CSS Minifier

Що таке мінімізація CSS?

Мінімізація CSS — це процес видалення всіх зайвих символів із таблиці стилів без зміни її поведінки. Це означає видалення пробілів, розривів рядків, коментарів і надлишкового синтаксису — наприклад, кінцевих крапок з комою та непотрібних лапок. Браузер розбирає мінімізований CSS ідентично оригіналу. Специфікація W3C CSS Syntax Module визначає граматику: пробіли між токенами необов'язкові, якщо вони не розділяють ідентифікатори. Мінімізація використовує це, скорочуючи все до мінімально необхідних символів.

Онлайн CSS minifier бере вашу відформатовану таблицю стилів і генерує компактну версію, оптимізовану за розміром передачі. Типова економія — від 15% до 40% залежно від кількості пробілів і коментарів у вихідному файлі. Для таблиці стилів розміром 50 КБ це означає на 7–20 КБ менше байтів, що передаються по мережі при кожному завантаженні сторінки. У поєднанні зі стисненням gzip або Brotli на сервері мінімізація додатково зменшує розмір передачі, оскільки стиснутий вивід вже мінімізованого CSS менший, ніж стиснення відформатованого оригіналу.

Мінімізація — стандартний крок у front-end пайплайнах збірки. Такі інструменти, як cssnano, clean-css та esbuild, виконують мінімізацію в рамках збірки. Але під час розробки часто потрібно мінімізувати окремий фрагмент для тестування, вбудувати критичний CSS-блок або перевірити, наскільки зменшиться таблиця стилів перед додаванням до конфігурації бандла. Саме тут корисний браузерний CSS minifier: вставте CSS, отримайте мінімізований вивід, скопіюйте і рухайтесь далі.

/* Main navigation styles */
.nav {
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1e293b;
}

/* Links inside nav */
.nav a {
  color: #e2e8f0;
  text-decoration: none;
  margin-right: 1.5rem;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: #818cf8;
}

.nav{display:flex;align-items:center;padding:1rem 2rem;background-color:#1e293b}.nav a{color:#e2e8f0;text-decoration:none;margin-right:1.5rem;transition:color .2s ease}.nav a:hover{color:#818cf8}

Навіщо використовувати цей CSS Minifier?

Вставте будь-який CSS і отримайте мінімізований вивід за мілісекунди. Жодного налаштування інструментів збірки, жодних CLI-команд, жодних облікових записів.

Випадки використання CSS Minifier

Техніки мінімізації CSS

CSS minifier застосовує кілька перетворень для зменшення розміру файлу. Кожне з них спрямоване на певний тип надлишковості у вихідному коді. У таблиці нижче наведено основні техніки та їхня типова економія для відформатованої таблиці стилів:

Відсоток економії залежить від вхідних даних. Файли з великою кількістю коментарів більше виграють від їх видалення, тоді як вже стислі файли дають меншу економію. Найнадійніший виграш — від видалення пробілів та оптимізації скорочень. Розширені minifier-и, як-от cssnano, також об'єднують дублюючі селектори, згортають повні властивості у скорочені (margin-top + margin-right + margin-bottom + margin-left у margin) і видаляють перевизначені оголошення.

Мінімізація проти стиснення gzip

Мінімізація та стиснення доповнюють одне одного — вони не взаємозамінні. Вони працюють на різних рівнях і застосовуються один поверх іншого:

Приклади коду

Як мінімізувати CSS програмно в різних мовах та середовищах:

import postcss from 'postcss'
import cssnano from 'cssnano'

const input = `
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* TODO: update color */
}
`

const result = await postcss([cssnano]).process(input, { from: undefined })
console.log(result.css)
// → ".nav{display:flex;padding:0 1rem;color:#fff}"

import csscompressor

css = """
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* navigation styles */
}
"""

minified = csscompressor.compress(css)
print(minified)
# → ".nav{display:flex;padding:0 1rem;color:#fff}"

package main

import (
	"fmt"
	"github.com/tdewolff/minify/v2"
	"github.com/tdewolff/minify/v2/css"
)

func main() {
	m := minify.New()
	m.AddFunc("text/css", css.Minify)

	input := ".nav { display: flex; padding: 0px 1rem; color: #ffffff; }"
	output, _ := m.String("text/css", input)
	fmt.Println(output)
	// → ".nav{display:flex;padding:0 1rem;color:#fff}"
}

# Using cssnano via PostCSS CLI
npx postcss styles.css --use cssnano -o styles.min.css

# Using clean-css CLI
npx clean-css-cli styles.css -o styles.min.css

# Quick one-liner with Node.js
node -e "const CleanCSS=require('clean-css');console.log(new CleanCSS().minify('body { margin: 0px; }').styles)"
# → "body{margin:0}"

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