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

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

Що відбувається під час мініфікації CSS?

Мініфікація CSS зменшує кількість символів у таблиці стилів, видаляючи форматування, яке не потрібне браузерам. Зазвичай це відступи, перенесення рядків, коментарі та необов'язкові пробіли біля розділових знаків.

Браузер і далі отримує правила CSS, селектори та значення оголошень. Очікуваний вигляд сторінки не повинен змінитися, а файл, що передається браузеру, стає меншим. Практична користь від мініфікації таблиці стилів CSS залежить від початкового файлу, стиснення HTTP і кешування браузера. Якщо таблиця стилів уже добре стиснена, скорочення обсягу переданих даних може бути незначним.

Мініфікація корисна перед розгортанням, під час перевірки завеликого стороннього CSS або коли потрібно з'ясувати, наскільки форматування для розробки збільшує файл. Не варто плутати її з оптимізацією, яка видаляє невикористані селектори, об'єднує рівнозначні правила чи переписує оголошення. Цей інструмент не претендує на виконання таких ширших завдань.

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

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

1. Візьми вихідний CSS, який використовує твій сайт або застосунок.
2. Перед мініфікацією перевір, чи правильно він обробляється синтаксичним аналізатором.
3. Встав його в поле CSS і запусти інструмент.
4. Порівняй Символи CSS із Символи мініфікованого CSS.
5. Перевір результат на тестовій сторінці, зокрема адаптивні стани, стилі друку та інтерактивні компоненти.

Мініфікація CSS відбувається на сервері. Надісланий CSS передається на сервер через HTTPS і не зберігається. Якщо таблиця стилів містить конфіденційні URL-адреси, внутрішні імена хостів або інші чутливі дані, зваж, чи відповідає надсилання їх будь-якому серверному інструменту правилам обробки даних у твоїй організації.

Як читати результат?

Результат містить перетворений CSS і два лічильники символів, тому можна переглянути вивід і відразу побачити скорочення. Символи CSS показує довжину надісланого тексту, а Символи мініфікованого CSS показує довжину після мініфікації.

Кількість символів визначається функцією підрахунку довжини з підтримкою багатобайтових символів. Не сприймай ці значення як точний прогноз обсягу даних, переданих мережею. Символи UTF-8 можуть займати більше одного байта, а стиснення Brotli або gzip здатне істотно змінити розмір даних, надісланих через HTTP.

Для цього інструмента не передбачено окремого поля перевірки чи повідомлень про помилки. Тому не використовуй його як валідатор CSS. Поширені проблеми, як-от непарні фігурні дужки, пропущена двокрапка, незакритий рядок, неправильно оформлені коментарі або некоректна вкладеність, потрібно перевіряти за допомогою інструментів розробника в браузері, лінтера чи валідатора, що враховує стандарти. Некоректний CSS може виглядати компактно після обробки, але працювати не так, як задумано.

Прості приклади мініфікації CSS

У звичайній мініфікованій версії форматування видаляється, а саме правило зберігається.

CSS

p { color: red; }

Мініфікований CSS

p{color:red}

У цьому прикладі читабельні вхідні дані містять 17 символів, а компактна форма, 12. Пробіли та розділові знаки всередині рядків у лапках мають залишатися частиною значення.

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

Мініфікований CSS

.notice,.warning{color:#c00;margin:0 1rem}

Безсистемно видаляти всі пробіли небезпечно. Пробіл може позначати комбінатор нащадка, а для арифметичних операторів у функціях на зразок calc() діють вимоги щодо пробілів. Рядки, URL-адреси даних, екрановані ідентифікатори та значення користувацьких властивостей також потрібно обробляти з урахуванням синтаксису.

Символи з діакритичними знаками та символи нелатинських абеток можуть траплятися в рядках, а з урахуванням правил ідентифікаторів CSS, також у селекторах. Числа, десяткові крапки, відсотки й одиниці вимірювання є частиною синтаксису, а не декоративним текстом, тому їх не можна просто скорочувати без розуміння оголошення. У порожній таблиці стилів немає CSS для мініфікації. Для дуже великих таблиць стилів зазвичай простіше повторювати й контролювати мініфікацію під час збирання, ніж копіювати текст через онлайн-форму.

Коли мініфікація CSS не має сенсу?

Зазвичай не варто повторювати мініфікацію, якщо файл уже мініфікований або створений як компактний ресурс для робочого середовища. Повторна мініфікація CSS може майже нічого не скоротити або не дати жодного результату, але додасть ще одне перетворення до процесу випуску.

• Не форматуйте, а потім повторно не мініфікуйте CSS, який читатиме лише браузер або система збирання.
• Не використовуй мініфікацію замість видалення невикористаних правил фреймворку чи повторюваних оголошень.
• Не очікуй, що скорочення кількості символів допоможе виявити запити, які блокують відтворення, проблеми з кешем або повільне завантаження шрифтів.
• Не видаляй форматований вихідний файл, особливо під час налагодження специфічності, шарів каскаду або медіазапитів.

Якщо CSS об'єднується автоматично, використовуй мініфікатор у цьому процесі, щоб кожен випуск створювався з однаковими налаштуваннями. Якщо пов'язані ресурси розгортаються вручну, HTML мінімізатор і JS мінімайзер можуть виконати аналогічну операцію з файлами відповідних типів.

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

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

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

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

Користувацькі властивості можна включати в обробку, але в їхніх значеннях можуть зберігатися токени та пробіли для подальшої підстановки через var(). Перевіряй оголошення з обчисленнями, резервними значеннями або вбудованими рядками в браузерах, які підтримує твій проєкт. Не вважай, що кожен видимий пробіл необов'язковий.

Чи створює інструмент карту вихідного коду?

Окремого результату з картою вихідного коду немає. Якщо під час налагодження робочої версії потрібно зіставляти компактний CSS із Sass, Less або іншим джерелом, створи мініфікований файл і карту вихідного коду в компіляторі чи пакувальнику, якому відома початкова структура файлів.

Чи збережуться в результаті коментарі про ліцензію?

Не розраховуй, що коментарі CSS буде збережено. Якщо ліцензія залежності вимагає додавати повідомлення до розповсюджуваного коду, збережи його окремо або перевір згенерований результат перед випуском.

Чи може мініфікація виправити пошкоджений CSS?

Ні. Мініфікація видаляє зайві символи, але не виправляє некоректний селектор, непідтримувану властивість, відсутній ресурс або неправильний каскад. Спочатку усунь попередження синтаксичного аналізатора та візуальні помилки у вихідному коді.

Що перевірити перед розгортанням

Збережи мініфікований результат як окремий ресурс для робочого середовища, переконайся, що URL-адреси й вміст у лапках не змінилися, і завантаж його на тестовій сторінці з відкритою консоллю браузера. Порівняй типові сторінки за вузької та широкої ширини області перегляду, а потім перевір, чи застосовує сервер очікуваний тип вмісту, політику кешування та стиснення HTTP.