CSS minifikátor

Vložte stylopis a odstraňte bílé znaky a komentáře, zkraťte hodnoty jako #ff0000 → red a slučte duplicitní pravidla díky strukturálním optimalizacím CSSO.

Běží v prohlížečiBez registraceNic se neodesílá

Minifikovaný výstup

Jak používat: CSS minifikátor

  1. Vložte CSS nebo otevřete soubor .css.
  2. Nechte zapnutou Restrukturalizaci pro slučování pravidel a deklarací, nebo ji vypněte pro bezpečný průchod jen s bílými znaky.
  3. Nechte zapnuté Zachovat licenční komentáře, aby se zachovaly poznámky /*! … */.
  4. Porovnejte původní velikost, velikost po minifikaci a po gzipu.
  5. Zkopírujte výsledek nebo stáhněte output.min.css.

Jak funguje minifikace CSS

Tento nástroj používá CSSO (CSS Optimizer), který rozparsuje stylopis do syntaktického stromu a vypíše ho zpět v nejkratší ekvivalentní podobě. Kromě odstranění bílých znaků a komentářů provádí bezpečné přepisy hodnot:

  • #ffffff → #fff, #ff0000 → red
  • 0px → 0, 0.90 → .9
  • margin: 8px 16px 8px 16px → margin:8px 16px
  • Prázdná pravidla a duplicitní deklarace se odstraní

Co dělá „restrukturalizace“?

Restrukturalizace prochází celý stylopis: pravidla se shodnými deklaracemi se sloučí do jednoho seznamu selektorů (.a,.b{color:red}) a opakované selektory se spojí. Na reálných stylopisech to často ušetří dalších 5–15 %. CSSO slučuje jen tehdy, když pořadí kaskády zůstane stejné, ale pokud spoléháte na neobvyklá přepsání, můžete ji vypnout pro čistě syntaktickou minifikaci.

Proč minifikovat CSS?

CSS blokuje vykreslování: prohlížeč nemůže stránku vykreslit, dokud se stylopisy v <head> nestáhnou a nerozparsují. Menší CSS znamená rychlejší First Contentful Paint a lepší Core Web Vitals, což pomáhá uživatelům i pozicím ve vyhledávání. Pro nejlepší výsledek kombinujte minifikaci s gzipem nebo Brotli na serveru.

Časté dotazy

Je minifikace CSS bezpečná?
Ano. Bílé znaky a komentáře nemají na vykreslení CSS vliv a přepisy hodnot v CSSO jsou podle specifikace ekvivalentní. Restrukturalizace zachovává pořadí kaskády; vypněte ji, pokud chcete nejkonzervativnější výstup.
Podporuje moderní CSS jako custom properties, vnořování a @layer?
Ano. Custom properties (--var), @media, @supports, @layer, @container i syntaxe gridu se zachovají.
Mohu minifikované CSS později vrátit zpět?
Minifikované CSS lze znovu odsadit libovolným formátovačem, ale odstraněné komentáře obnovit nelze. Uchovejte si původní zdrojový soubor a minifikovaný soubor berte jako výstup buildu.
Nahrává se můj stylopis někam?
Ne. Minifikace běží ve vašem prohlížeči; nic se neposílá na server.

Související nástroje

JavaScript minifikátor Komprimujte a zkracujte JS pomocí Terseru, se statistikami velikosti a gzipu. HTML minifikátor Odstraňte komentáře a bílé znaky a minifikujte vložené CSS/JS. SQL formátovač Formátujte nebo minifikujte SQL pro PostgreSQL, MySQL, T-SQL, BigQuery a další. JSON formátovač Formátujte, minifikujte a validujte JSON s chybami na řádek a sloupec.