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

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

1. Поставете стила си или щракнете Отвори файл, за да заредите файл .css (до 10 МБ).
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, така че спестяването при пренос е по-малко от суровата цифра, но минимизирането пак намалява времето за анализ и размера на кешираните файлове.