Прескочи на садржај
🛠️
Whiz Tools

Бесплатни CSS Минификатор: Компресија и Оптимизација CSS Кода Online

Минификујте CSS код тренутно и смањите величину датотеке до 40%. Бесплатни онлајн CSS минификатор уклања празан простор, коментаре и оптимизује синтаксу за бржи учинак веб странице.

CSS Минификатор

Тренутно минификујте CSS код да бисте смањили величину датотеке до 40% и побољшали брзину учитавања веб странице.

0 карактера
0 карактера

О CSS Минификацији

CSS минификација уклања непотребне карактере из CSS датотека без мењања функционалности, смањујући величину датотеке и побољшавајући перформансе веб странице.

  • Уклања коментаре, празан простор и преломе линија
  • Елиминише непотребне тачка-зарезе и нулте јединице
  • Оптимизује вредности боја и декларације
  • Побољшава брзину учитавања странице и SEO рангирање
Kalkulator učitavanja...
📚

Dokumentacija

Шта је CSS минификатор?

CSS минификатор је алат који минификује CSS датотеку (каскадни стилски листови) уклањањем знакова који нису потребни прегледачима. Уклања коментаре, сувишне размаке и преломе редова и скраћује неколико уобичајених образаца, без промене изгледа странице. Резултат је мања датотека коју прегледач може брже да преузме и обради.

Како функционише минификација CSS-а

Веб програмери пишу CSS са коментарима, увлачењем и празним редовима јер ти елементи олакшавају читање и уређивање кода. Прегледачи занемарују сво то обликовање. Минификатор га брише, заједно са још неколико бајтова који немају визуелну сврху, и оставља компактну датотеку намењену употреби у продукцији, а не уређивању.

Овај алат примењује следеће измене:

  • Уклања коментаре. Сваки блок /* ... */ се брише.
  • Сажима размаке. Низови размака, табулатора и прелома редова између правила своде се на ништа или на један размак тамо где је размак значајан, на пример између .parent и .child у селектору потомка.
  • Уклања размаке око интерпункције. Размаци поред знакова {, }, :, ; и , се уклањају.
  • Уклања сувишне тачке и зарезе. Поновљене тачке и зарези своде се на једну, а последња тачка и зарез испред затварајућег знака } се уклања.
  • Скраћује хексадецималне боје. Боја са шест цифара, као што је #ffffff, постаје #fff када се сваки пар цифара поклапа за црвену, зелену и плаву компоненту. Боја са осам цифара и алфа-каналом, као што је #ffaa00cc, скраћује се на исти начин када се поклапају сва четири пара.
  • Уклања јединицу из вредности нулте дужине. 0px, 0em и 0rem постају 0. Процентуалне вредности се остављају непромењене, јер 0% није увек заменљиво са обичним 0, на пример у кораку flex-basis или @keyframes.
  • Уклања водећу нулу из децималних бројева. 0.5 постаје .5.

Да би се спречило оштећење датотеке, алат не мења три врсте садржаја: текст под наводницима, вредност у ненаводничком url() и садржај математичких функција као што су calc(), clamp(), min() и max(). Размаци унутар calc(100% - 20px) значајни су прегледачу, па их алат чува тачно онаквима какви су.

Алат не спаја дупликате селектора, не брише празне блокове правила и не претвара боје rgb() у хексадецимални запис. То су ваљане оптимизације које обављају други алати, али овај минификатор се усредсређује на претходно наведене измене.

Формула за проценат смањења

Алат приказује колико је датотека смањена, изражено у процентима:

1reduction % = ((original length − minified length) / original length) × 100
2

Обе дужине се броје у знаковима. Резултат се заокружује на две децимале.

Решен пример

Изворни CSS (193 знакова):

1/* Navigation Styles */
2.nav-menu {
3  display: flex;
4  justify-content: space-between;
5  padding: 20px 0px;
6  background-color: #ffffff;
7}
8
9.nav-item {
10  margin-right: 15px;
11  color: #000000;
12}
13

Минификовани излаз (129 знакова):

1.nav-menu{display:flex;justify-content:space-between;padding:20px 0;background-color:#fff}.nav-item{margin-right:15px;color:#000}
2

Применом формуле: (193 − 129) / 193 × 100 = 33,16%. Коментар је уклоњен, увлачење и преломи редова су уклоњени, 0px је постало 0, а #ffffff/#000000 су постали #fff/#000.

Тачан проценат зависи од улаза. Густо написан CSS са мало коментара смањује се мање. CSS са много коментара и дубоким увлачењем може се смањити више. Уобичајени листови стилова минификовани овим алатом смањују се приближно за 20% до 40%.

Како се користи овај алат

  1. Налепите CSS код у поље за унос са леве стране.
  2. Минификована верзија се аутоматски појављује са десне стране, без дугмета које треба притиснути.
  3. Проверите проценат смањења приказан изнад излаза.
  4. Изаберите „Копирај у међуспремник“ да бисте копирали минификовани CSS, а затим га налепите у датотеку пројекта.
  5. Изаберите „Обриши“ да бисте избрисали оба поља и почели изнова.

Ништа што унесете у алат не шаље се серверу; минификација се извршава у прегледачу.

Када треба минификовати CSS

Развојни тимови обично минификују CSS као корак у процесу изградње, користећи алате као што су Webpack или npm скрипте, тако да се то аутоматски обави пре сваког постављања. Читљива датотека са изворним кодом и коментарима остаје у систему за контролу верзија; минификује се само продукциона верзија. Уобичајена места примене минификованог CSS-а обухватају:

  • Велике веб-сајтове, као што су онлајн продавнице, где мањи лист стилова значи брже учитавање странице.
  • Једностраничне апликације направљене оквирима као што су React или Vue, где се CSS упакује заједно са JavaScript-ом.
  • Мобилне веб-странице, где је већа вероватноћа да корисници имају спорију везу.
  • HTML поруке е-поште, које често имају строга ограничења величине.

Минификација CSS-а и брзина странице

Мања CSS датотека се брже преузима и обрађује, што може скратити време до приказивања странице. Google је навео да је брзина странице један од сигнала који се користе при рангирању у претрази, па бржа страница може бити један мањи фактор међу многима који утичу на њен учинак у резултатима претраге. Сама минификација не гарантује промену рангирања; она је једна од више оптимизација, уз компресију слика и време одговора сервера.

CSS минификатор у односу на CSS форматер

Минификатор компресује код за продукцију. Форматер ради супротно: узима компресовани CSS и поново га обликује помоћу увлачења и прелома редова како би га човек могао читати. Форматер не може да врати коментаре или изворне називе променљивих уклоњене током минификације, јер су те информације изгубљене након брисања.

Најчешће постављана питања

Колико се CSS смањи после минификације? Овим алатом обично за 20% до 40%, у зависности од броја коментара, празних редова и увлачења у изворној датотеци. Датотека која је од почетка имала мало обликовања смањиће се мање.

Да ли минификација CSS-а мења изглед странице? Не. Минификација само уклања знакове које прегледачи занемарују, као што су коментари и сувишни размаци, и преписује неколико еквивалентних вредности, попут #ffffff у #fff. Приказана страница остаје иста.

Да ли CSS треба минификовати током развоја? Не. Током писања и отклањања грешака задржите читљиву верзију са коментарима. Минификујте само копију која се поставља на продукциони сервер, обично као аутоматски корак у процесу изградње.

Може ли се минификовани CSS претворити назад у изворну датотеку? Форматер може поново обликовати минификовани CSS помоћу увлачења, али не може да поврати обрисане коментаре или описне називе који никада нису били присутни у минификованој верзији. Сачувајте изворну датотеку.

Да ли овај алат претвара боје rgb() у хексадецимални запис или спаја дупле селекторе? Не. Он скраћује хексадецималне боје и уклања непотребне знакове, али не преписује вредности rgb()/hsl() нити спаја поновљене селекторе. Неки други минификатори обављају те додатне кораке.

Да ли је минификација исто што и gzip компресија? Не. Минификација уклања непотребне знакове из самог изворног кода. Gzip (или Brotli) примењује веб сервер када шаље датотеку, користећи засебан алгоритам. Комбиновањем оба поступка добија се најмања датотека током преноса преко мреже.