Мініфікатор та форматувальник CSS — безкоштовно
Мінімізуйте CSS для зменшення розміру файлу або форматуйте мінімізований CSS для читабельності. Миттєво, у вашому браузері.
Перетягніть сюди файл .css або натисніть, щоб вибрати
CSS · обробляється на вашому пристрої
або натисніть Ctrl+V, щоб вставити з буфера обміну
Типові застосування
- Мініфікуйте CSS для Розгортання ВиробництваЗменшіть розмір CSS-файлу перед розгортанням на виробництво - швидше завантаження сторінок і нижчі витрати на пропускну спроможність.
- Прикрасьте Мініфіковане CSS для НалагодженняФорматуйте стиснутий або мініфікований CSS у читний код, щоб ви могли перевіряти та налагоджувати стилі.
- Мініфікуйте CSS для Електронних ШаблонівКомпактний CSS для HTML-шаблонів електронної пошти, де розмір файлу та вибухання вбудованого стилю важливі.
- Мініфікуйте CSS для Тем WordPressЗменшіть розмір користувацьких аркушів стилів теми WordPress для кращих результатів PageSpeed.
- Прикрасьте CSS для Рецензування КодуФорматуйте будь-який CSS-файл у чистий, відступ, читний код, готовий до рецензування та співпраці.
Як це працює
Інструмент використовує власноруч написаний токенізатор CSS без залежностей, повністю на JavaScript — без зовнішніх бібліотек і звернень до сервера. Токенізатор класифікує кожен символ як код, коментар, рядок у лапках чи значення url() перед будь-якими перетвореннями, що не дає правилам пробілів пошкодити вміст рядків, data URI чи вирази calc().
- 1Прохід токенізаціїВхідний CSS сканується символ за символом і ділиться на типізовані токени: сегменти коду, коментарі /* ... */, рядки в лапках (зі збереженням екранованих послідовностей) і блоки url(...). Це гарантує, що перетворення на наступному кроці торкаються лише справжнього синтаксису CSS — ніколи вмісту рядкового літерала чи data URI.
- 2Мініфікація або форматуванняУ режимі мініфікації звичайні коментарі видаляються (коментарі /*! license */ зберігаються), послідовності пробілів у токенах коду стискаються до одного пробілу, а пробіли біля розділових знаків { } : ; , > ~ прибираються. Пробіли навколо + і - навмисно залишаються, щоб не зламати вирази calc(). У режимі форматування код спершу мініфікується до чистої основи, а потім повторно токенізується й отримує відступи з відстеженням глибини по два пробіли та визначенням двокрапок в оголошеннях, щоб відрізнити двокрапки property: value від двокрапок у селекторах, як-от a:hover.
- 3Оцінка розміру gzipПісля створення результату нативний API браузера CompressionStream стискає його gzip і вимірює отриману кількість байтів. Це дає реалістичну оцінку розміру передачі — таку, яку надіслав би мережею вебсервер зі стисненням gzip.
- 4Копіювання або завантаженняОброблений CSS записується в буфер обміну через Clipboard API або завантажується як styles.min.css (режим мініфікації) чи styles.css (режим форматування) через Blob з типом MIME text/css. Відсоток зменшення розміру показується наживо під час введення.
Схожі інструменти
Оптимізатор та мініфікатор SVG
Видаляйте метадані, стискайте пробіли та округлюйте десяткові числа для значного зменшення розміру SVG-файлу — типово на 30–70%. Візуальний перегляд перевіряє, що нічого не зламано.
Форматувальник CSS
Форматуйте мінімізований CSS з однаковими відступами або мінімізуйте його. Додаткове сортування властивостей за абеткою для передбачуваних відмінностей.
Форматування JSON
Форматуйте, перевіряйте, мініфікуйте та досліджуйте дані JSON. Деревовидний перегляд, підсвічування синтаксису та копіювання одним кліком.