Форматувальник і мінімізатор 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, тому економія під час передавання менша за сирий показник, але мінімізація все одно скорочує час розбору й розмір кешованих файлів.