Мініфікатор CSS

Зменшіть свої таблиці стилів

CSS блокує відображення: браузер не намалює сторінку, доки не завантажить і не розбере таблиці стилів у <head>. Тому розмір CSS прямо впливає на те, як швидко з'являється сторінка. Мініфікатор CSS прибирає коментарі, пробіли, розриви рядків та інші символи, непотрібні браузерам, і показує кількість символів до й після.

Стилі працюють точно так само; просто файл стає меншим. Це ідеально для власного CSS у темах WordPress, Shopify, Хорошоп чи AltumCode, для невеликих проєктів без інструмента збирання й для вбудованого критичного CSS.

Зберігайте читабельний оригінал для майбутніх змін, а розгортайте мініфіковану копію.

Як користуватися мініфікатором CSS

1. Вставте CSS.
2. Надішліть, щоб мініфікувати.
3. Порівняйте кількість символів до й після.
4. Скопіюйте мініфікований CSS на свій сайт чи у файл.

Приклади

Стилі кнопки

Вхідні дані:

/* Buttons */
.btn {
  color: #ffffff;
  margin: 0px 0px 10px 0px;
  background-color: #8997BB;
}

.btn:hover {
  opacity: 0.80;
}

Результат:

.btn{color:#fff;margin:0 0 10px;background-color:#8997bb}.btn:hover{opacity:.8}

Коментар і пробіли зникли, #ffffff скорочено до #fff, 0px стає 0, повторене значення margin згорнуто, а 0.80 стає .8.

Типові сценарії

• Мініфікація власного CSS, доданого через панель налаштувань теми чи CMS.
• Зменшення таблиць стилів для невеликих сайтів і лендингів.
• Підготовка вбудованого критичного CSS для швидшого першого відображення.
• Стискання CSS у HTML-шаблонах листів.
• Зменшення таблиці стилів для сайту без процесу збирання, як-от невеликого статичного сайту чи лендингу.
• Підготовка критичного CSS для вбудовування в <head> сторінки.
• Зменшення розміру власного CSS, вставленого в CMS чи конструктор сайтів.

Поради та корисні нюанси

• Спершу приберіть невикористані правила; видалення CSS економить більше, ніж мініфікація.
• Потрібні коментарі (як-от ліцензійні примітки) залишайте у вихідному файлі й перевіряйте, чи вони зберігаються.
• Протестуйте сторінку після розгортання, особливо якщо в CSS є незвичні хаки.
• Мініфікуйте також HTML і скрипти за допомогою мініфікатора HTML і мініфікатора JS. Перевіряйте значення кольорів конвертером кольорів.

Особливі випадки й обмеження

• Результат — один довгий рядок, у якому важко шукати помилки. Зберігайте читабельний вихідний файл і мініфікуйте копію.
• Коментарі видаляються, зокрема ліцензійні. Поверніть авторські примітки, які зобов'язані зберігати.
• Некоректний CSS може бути видалений чи змінений. Якщо після мініфікації щось виглядає не так, перевірте оригінал на пропущену дужку чи крапку з комою.

Часті запитання

Що робить мініфікатор CSS?

Він прибирає з CSS непотрібні символи, як-от пробіли й коментарі, не змінюючи роботу стилів.

Чи швидший мініфікований CSS?

Так, менші файли швидше завантажуються й розбираються, і сторінка відображається раніше.

Чи можна скасувати мініфікацію CSS?

Його можна переформатувати бьютифікатором, але видалені коментарі не відновити. Зберігайте оригінальний файл.

Чи мініфікувати CSS, якщо я використовую gzip чи Brotli?

Так. Стиснення й мініфікація разом дають найменший розмір передачі.

Чи змінює мініфікація вигляд сайту?

Не повинна. Прибираються лише символи, які браузери ігнорують, а значення скорочуються до рівнозначних форм, як-от #fff.

Схожі інструменти

• Мініфікатор HTML: Мініфікуйте HTML, прибравши всі зайві символи.
• Мініфікатор JS: Мініфікуйте JS, прибравши всі зайві символи.
• Конвертер кольорів: Перетворіть колір у кілька інших форматів.
• Калькулятор розміру тексту: Дізнайтеся розмір тексту в байтах (B), кілобайтах (KB) чи мегабайтах (MB).
• Перевірка HTTP/2: Перевірте, чи використовує сайт новий протокол HTTP/2.