Як користуватися

Вставте CSS у поле введення, відкрийте файл .css або спробуйте приклад.
Виберіть «Beautify» для зручночитаного коду або «Minify» для найменшого результату.
Під час форматування виберіть 2 пробіли, 4 пробіли або табуляції.
Скопіюйте результат або завантажте його як файл .css. Якщо фігурні дужки або лапки не збалансовані, повідомлення про помилку показує рядок і стовпець.

Як це працює

Спочатку форматувальник розбиває таблицю стилів на токени: рядки в одинарних або подвійних лапках, значення url(…), коментарі, фігурні дужки та крапки з комою. Оскільки рядки та url() є окремими токенами, крапка з комою всередині data URI або фігурна дужка у content: "{ }" не порушує структуру, а їхній вміст копіюється точно.

Beautify розміщує кожен селектор зі списку селекторів на окремому рядку, додає пробіли навколо дочірнього, сусіднього та суміжного комбінаторів (>, ~, +) і записує кожну декларацію як «property: value;» на окремому рядку. Блоки всередині @media, @supports, @layer, @container і вкладених CSS-правил мають відступ на один рівень за кожен рівень вкладеності. Якщо після останньої декларації блоку бракує крапки з комою, її буде додано. Коментарі залишаються на своїх місцях.

Minify видаляє коментарі (крім ліцензійних позначок /*! … */), згортає пробільні символи, видаляє пробіли навколо фігурних дужок, двокрапок, крапок з комою, ком і комбінаторів селекторів, а також прибирає крапку з комою перед кожною закривальною фігурною дужкою. Пробіли, які змінюють значення, зберігаються: комбінатор нащадка в «.a .b», пробіл у «a :focus» і пробіли всередині значень, як-от calc(100% - 2px). «! important» приводиться до «!important».

Інструмент не переписує значення: кольори, одиниці вимірювання та нулі залишаються як у вихідному коді, а правила не об’єднуються і не переставляються. SCSS- або Less-файли зі звичайним вкладенням зазвичай працюють, але їхній власний синтаксис, як-от рядкові коментарі // або міксини, не підтримується.

Приклади

Читання мініфікованого файлу фреймворку

Вставте однорядковий фрагмент bootstrap.min.css і виберіть Beautify з 2 пробілами, щоб побачити кожне правило, медіазапити та їхні вкладені правила на окремих рядках із відступами.

Підготовка власноруч написаної таблиці стилів

Мініфікуйте таблицю стилів розміром 12 КБ із коментарями та відступами, перш ніж вбудувати її в шаблон електронного листа або в head сторінки. Підсумок показує кількість символів до та після.

Пошук відсутньої фігурної дужки

Таблиця стилів перестає застосовуватися на половині файлу. Форматувальник повідомляє «Ця { ніколи не закривається відповідною }» із рядком правила, у якому не вистачає закривальної фігурної дужки.

Поширені запитання

Чи безпечно використовувати мініфікований CSS із цього інструмента в робочому середовищі?

Інструмент лише видаляє коментарі та пробіли, які CSS ігнорує, тому правила працюють так само. Він не виконує глибшої оптимізації, як інструменти збірки, наприклад об’єднання правил чи скорочення кольорів, тому результат може бути трохи більшим, ніж у них.

Чому пробіл зберігається в «a :focus»?

У селекторі пробіл є комбінатором нащадка. «a :focus» означає елемент у фокусі всередині посилання, а «a:focus» — посилання у фокусі. Видалення цього пробілу змінило б, які елементи відповідають селектору.

Чи може він форматувати SCSS або Less?

Звичайні вкладені правила форматує правильно. Синтаксис, характерний лише для препроцесорів, як-от коментарі //, міксини з аргументами або блоки @if, не розпізнається і може бути відформатований незвично, тому перевіряйте результат.

Чи видаляються ліцензійні коментарі під час мініфікації?

Коментарі, які починаються з /*!, зберігаються — це звичайна практика для повідомлень про ліцензію й авторські права. Усі інші коментарі видаляються.

Конфіденційність

Ваш CSS обробляється лише у вашому браузері. Нічого не завантажується, не зберігається і не потрапляє в аналітику.