Minifikator CSS

Czym jest minifikacja CSS?

Minifikacja CSS to proces usuwania wszystkich zbędnych znaków z arkusza stylów bez zmiany jego działania. Oznacza to usunięcie białych znaków, podziałów wierszy, komentarzy i nadmiarowej składni, takiej jak końcowe średniki i niepotrzebne cudzysłowy. Przeglądarka parsuje zminifikowany CSS identycznie jak oryginał. Moduł składni CSS W3C definiuje gramatykę; białe znaki między tokenami są opcjonalne z wyjątkiem miejsc, gdzie oddzielają identyfikatory. Minifikacja wykorzystuje to, redukując wszystko do minimalnej liczby wymaganych znaków.

Internetowy minifikator CSS przyjmuje sformatowany arkusz stylów i tworzy jego kompaktową wersję zoptymalizowaną pod kątem rozmiaru transferu. Typowe oszczędności wynoszą od 15% do 40% w zależności od ilości białych znaków i komentarzy w źródle. Dla arkusza stylów o rozmiarze 50 KB oznacza to 7–20 KB mniej bajtów wysyłanych przez sieć przy każdym załadowaniu strony. W połączeniu z kompresją gzip lub Brotli na serwerze minifikacja dodatkowo zmniejsza końcowy rozmiar transferu, ponieważ skompresowany wynik już zminifikowanego CSS jest mniejszy niż kompresja sformatowanego oryginału.

Minifikacja to standardowy krok w potokach budowania aplikacji frontendowych. Narzędzia takie jak cssnano, clean-css i esbuild wykonują minifikację w ramach procesu budowania. Jednak podczas programowania często trzeba zminifikować pojedynczy fragment do testów, osadzić krytyczny blok CSS inline lub sprawdzić, o ile arkusz stylów zmaleje, zanim doda się go do konfiguracji bundlera. Tu właśnie przydaje się przeglądarkowy minifikator CSS: wklej CSS, uzyskaj zminifikowany wynik, skopiuj go i przejdź dalej.

/* 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}

Dlaczego warto używać tego minifikatora CSS?

Wklej dowolny CSS i uzyskaj zminifikowany wynik w milisekundach. Bez konfiguracji narzędzi budowania, bez poleceń CLI, bez zakładania konta.

Przypadki użycia minifikatora CSS

Techniki minifikacji CSS

Minifikator CSS stosuje kilka przekształceń, aby zmniejszyć rozmiar pliku. Każde z nich eliminuje inny rodzaj nadmiarowości w źródle. Poniższa tabela zawiera główne techniki i typowe oszczędności na sformatowanym arkuszu stylów:

Wartości procentowe oszczędności zależą od danych wejściowych. Pliki z dużą ilością komentarzy zyskują więcej na usuwaniu komentarzy, podczas gdy już skompresowane pliki odnoszą mniejsze korzyści. Najbardziej niezawodne oszczędności daje usuwanie białych znaków i optymalizacja skrótów. Zaawansowane minifikatory, takie jak cssnano, łączą też zduplikowane selektory, zwijają właściwości pełne do skrótów (margin-top + margin-right + margin-bottom + margin-left do margin) i usuwają nadpisane deklaracje.

Minifikacja a kompresja gzip

Minifikacja i kompresja to procesy uzupełniające, a nie wymienne. Działają na różnych warstwach i nakładają się na siebie:

Przykłady kodu

Jak programowo minifikować CSS w różnych językach i środowiskach:

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}"

Często zadawane pytania