CSS форматер и минификатор

Како да форматирате или минифицирате CSS

1. Залепете го вашиот стилски лист или кликнете Отвори датотека за да вчитате .css датотека (до 10 MB).
2. Изберете Вовлекување (2 празни места, 4 празни места или табулатор) и дали сакате Празен ред меѓу правилата.
3. Кликнете Форматирај (улепшај) за читлив код или Минифицирај за најмалата верзија.
4. За минификација оставете штиклирано Спој ги правилата при минификација за најдобар резултат и Задржи ги коментарите /*! */ за да ги зачувате заглавијата со лиценца.
5. Копирајте го или преземете го резултатот. Статусната линија ја прикажува големината пред и по, во бајти, и процентот на заштеда.

Ако недостасува заграда, алатката запира и ви кажува на кој ред е незатворената { или вишокот }, наместо да создаде расипан излез.

Улепшување: читлив и доследен CSS

Форматирај (улепшај) користи js-beautify, форматерот што се наоѓа во многу уредници на код. Секоја декларација ја става во свој ред, ја вовлекува содржината на секое правило и на at-правила како @media и @supports, го пишува секој селектор од група во свој ред и додава празно место по двоточката на секоја декларација. Постојните празни редови се задржуваат (најмногу еден по ред), па логичките делови на вашата датотека остануваат видливи. Форматерот никогаш не ги менува вредностите, редоследот на правилата или значењето на селекторите: менува само празни места.

Ова е корисно за читање минифициран CSS од веб-страница, за преглед на стилски лист генериран од алатка или за средување датотека што ја уредувале повеќе луѓе со различни навики.

Минификација: помал CSS со csso

Минифицирај користи csso (CSS Optimizer), структурен минификатор. Покрај отстранувањето на празни места и коментари, тој го препишува стилскиот лист во еквивалентна, пократка форма:

• боите се скратуваат (#ff0000 станува red, #ffffff станува #fff);
• единиците и нулите се поедноставуваат (0px станува 0, 0.5em станува .5em);
• дуплираните декларации се отстрануваат, а кратенките на својства се спојуваат кога е безбедно;
• со Спој ги правилата при минификација, правилата со идентични декларации се групираат (a{color:red} b{color:red} станува a,b{color:red}), а пребришаните декларации се отфрлаат.

Преструктурирањето е безбедно за нормални стилски листови, но ги преместува декларациите. Ако вашиот CSS зависи од многу специфичен редослед на каскадата, на пример од трикови за прелистувачи, исклучете ја опцијата: csso тогаш само ќе го компресира секое правило на неговото место.

Коментарите се отстрануваат, освен „важните“ коментари што почнуваат со /*!, кои најчесто се користат за лиценци. Исклучете Задржи ги коментарите /*! */ за да ги отстраните и нив.

Големина пред и по

Статусната линија ја споредува големината на внесот и на резултатот во UTF-8 бајти. Улепшаниот код обично е поголем од оригиналот; минифицираниот обично штеди 20 до 50% кај рачно напишан CSS. Не заборавајте дека серверите ги компресираат датотеките и со gzip или Brotli, па заштедата при пренос е помала од суровата бројка, но минификацијата сепак го намалува времето за анализа и големината на кешираните датотеки.