Демініфікація CSS онлайн
Додайте стиснену таблицю стилів і знову читайте її зручно. Селектори стоятимуть окремо, кожна декларація займатиме свій рядок, а блоки й медіазапити матимуть відступи, як у коді, написаному вручну.
Чому CSS на робочому сайті займає один рядок
Таблиці стилів мінімізують із тієї ж причини, що й скрипти: CSS блокує відображення сторінки, тому кожен зекономлений байт впливає на швидкість появи вмісту. cssnano, Lightning CSS та оптимізатори в Sass і PostCSS видаляють пробіли й коментарі, скорочують значення кольорів, об’єднують повторні правила та прибирають останню крапку з комою в кожному блоці. Утилітарні фреймворки роблять результат ще щільнішим: зібрана таблиця Tailwind може містити тисячі коротких правил майже без розділювачів.
Як знову читати каскад
Основна мета форматування таблиці стилів полягає в тому, щоб зрозуміти, чому певне правило застосовується або ігнорується. Коли кожен селектор займає окремий рядок, а його декларації мають відступи, можна простежити каскад: знайти всі правила для елемента, порівняти їхню специфічність, перевірити порядок та помітити випадковий important, який перекриває ваші зміни. Медіазапити та їхній вміст стають видимими блоками, тому поведінку адаптивної верстки значно легше дослідити, ніж у стисненому файлі.
Підтримка сучасного CSS
Форматер розуміє сучасний CSS. Користувацькі властивості, вирази calc і clamp, скорочення grid та flexbox, контейнерні запити, вкладені правила, каскадні шари, блоки supports та keyframes форматуються правильно. Довгі списки селекторів розбиваються на рядки, щоб їх було зручно читати, а коментарі, які пережили збирання, зберігаються. Якщо файл містить звичайні властивості поруч із властивостями з префіксами виробників, усі вони залишаються у файлі, змінюється лише читабельність оформлення.
Порада для зібраних фреймворків
Після форматування зібраної таблиці Tailwind або Bootstrap файл швидко стає дуже довгим: десятки тисяч рядків є звичайною справою. Увімкніть номери рядків і шукайте потрібний клас або властивість засобами браузера, замість того щоб гортати весь файл. Якщо ви хочете зменшити розмір файлу, а не прочитати його, основні зміни потрібно робити в налаштуваннях збирання. Невикористані правила були створені ще до того, як почалася мінімізація.
Поширені запитання
Чи можна демініфікувати зібрану таблицю Tailwind?
Так, це один із найпоширеніших сценаріїв. Результат буде дуже довгим, бо фреймворк створює окреме правило для кожного утилітарного класу. Для зручної навігації ввімкніть номери рядків і користуйтеся пошуком браузера.
Чи відновлюються коментарі?
Лише ті, що залишилися у файлі. Більшість мінімізаторів видаляють усі коментарі, крім юридичних повідомлень, а видалене відновити неможливо. Форматер зберігає наявні коментарі та розміщує їх у читабельному вигляді.
Чи підтримуються SCSS і Less?
Ця сторінка призначена для звичайного CSS, який отримує браузер. Вихідні файли препроцесорів зі змінними, міксинами та специфічним синтаксисом SCSS або Less не є цільовим форматом. Водночас стандартна вкладеність CSS підтримується.