Мініфікатор / Форматер CSS
Вхідний CSS
Результат
Про цей мініфікатор і форматер CSS
Цей інструмент стискає CSS, видаляючи коментарі, зайві пробіли та надлишкове форматування.
Також можна відформатувати стиснутий CSS, щоб його було легше переглядати, редагувати, дебажити чи рев'юїти перед використанням у проєкті.
Як користуватися
- Вставте ваш CSS у поле вводу.
- Оберіть «Мініфікувати» для стискання або «Форматувати» для читабельного вигляду.
- Скопіюйте результат і використайте у стилях чи білд-процесі.
Поради
- Використовуйте мініфікований CSS у продакшені, коли потрібні менші файли.
- Форматуйте CSS, коли переглядаєте сторонні сніпети чи згенеровані стилі.
- Для великих проєктів тримайте вихідний CSS у репозиторії.
Що перевірити після мініфікації CSS
Зберігайте вихідні файли
Мініфікований CSS — це результат, а не файл для редагування. Тримайте читабельний вихідний CSS чи файли препроцесора у системі контролю версій.
Перевірте коментарі
Мініфікація може видалити коментарі. Ліцензійні позначки та важливі білд-коментарі тримайте у вихідному коді чи конфігурації бандлера.
Протестуйте вплив на каскад
Мініфікація має зберігати поведінку, але завжди перевіряйте порядок селекторів, медіа-запити та браузерні хаки після копіювання результату.
Для застосунків — білд-інструменти
Для продакшн-застосунків безпечніший бандлер чи пайплайн фреймворка: вони зберігають source maps та посилання на ресурси.
Перевірки мінімізації CSS перед публікацією stylesheet
Стиснення має зберігати cascade, підтримуваний синтаксис, custom properties, URL і сумісність із production-браузерами.
Cascade і порядок
Переконайтеся, що об'єднання або зміна порядку правил не змінює specificity, layers, fallbacks, overrides і залежність від source order.
Сучасний синтаксис
Перевірте custom properties, calc(), color functions, nesting, container queries, vendor prefixes і browser fallbacks.
Assets і source maps
Переконайтеся, що відносні URL працюють зі згенерованого файлу, а source map references відповідають deployed asset paths.
Visual regression
Порівняйте ключові сторінки на різних breakpoints, themes, interaction states, print styles і підтримуваних браузерах.
Пов’язані інструменти
Можливо, тобі також стануть у пригоді ці інструменти.