CSS Minifier

Co je minifikace CSS?

Minifikace CSS je proces odstranění všech nadbytečných znaků ze stylesheetu beze změny jeho chování. To zahrnuje odstraňování mezer, zalomení řádků, komentářů a nadbytečné syntaxe, jako jsou závěrečné středníky a zbytečné uvozovky. Prohlížeč parsuje minifikované CSS identicky jako originál. W3C CSS Syntax Module definuje gramatiku; mezery mezi tokeny jsou nepovinné, pokud neslouží k oddělení identifikátorů. Minifikace tohoto využívá tím, že vše zkomprimuje na minimální potřebný počet znaků.

Online CSS minifier vezme váš naformátovaný stylesheet a vytvoří kompaktní verzi optimalizovanou pro velikost přenosu. Typické úspory se pohybují od 15 % do 40 % v závislosti na množství mezer a komentářů ve zdroji. U stylesheetu o velikosti 50 KB to znamená o 7–20 KB méně bajtů odeslaných po síti při každém načtení stránky. V kombinaci s kompresí gzip nebo Brotli na serveru minifikace dále zmenšuje výslednou velikost přenosu, protože komprimovaný výstup již minifikovaného CSS je menší než komprimovaný originál s formátováním.

Minifikace je standardní krok v build pipeline frontendových aplikací. Nástroje jako cssnano, clean-css a esbuild provádějí minifikaci jako součást sestavení. Při vývoji však často potřebujete minifikovat jeden snippet pro testování, vložit blok kritického CSS nebo zkontrolovat, o kolik se stylesheet zmenší, než ho přidáte do konfigurace bundlu. Právě k tomu slouží CSS minifier v prohlížeči: vložte CSS, získejte minifikovaný výstup, zkopírujte ho a pokračujte dál.

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

Proč použít tento CSS Minifier?

Vložte libovolné CSS a získejte minifikovaný výstup během milisekund. Žádné konfigurování build nástrojů, žádné CLI příkazy, žádné účty.

Případy použití CSS Minifieru

Techniky minifikace CSS

CSS minifier aplikuje několik transformací ke zmenšení velikosti souboru. Každá cílí na jiný typ nadbytečnosti ve zdroji. Tabulka níže uvádí hlavní techniky a jejich typické úspory na naformátovaném stylesheetu:

Procentuální úspory se liší podle vstupu. Soubory s mnoha komentáři těží více z jejich odstraňování, zatímco již kompaktní soubory mají menší přínosy. Nejspolehlivější výsledky přináší odstranění mezer a optimalizace zkratek. Pokročilé minifikátory jako cssnano také slučují duplicitní selektory, zkracují rozepsané vlastnosti do zkratkových forem (margin-top + margin-right + margin-bottom + margin-left do margin) a odstraňují přepsané deklarace.

Minifikace vs. komprese Gzip

Minifikace a komprese se vzájemně doplňují a nelze je zaměňovat. Fungují na různých vrstvách a lze je kombinovat:

Ukázky kódu

Jak programově minifikovat CSS v různých jazycích a prostředích:

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

Nejčastější dotazy