CSS Minifikátor a formátovač

Co je tento nástroj?

CSS minifikátor přepisuje stylopis, aby byl co nejmenší bez změny toho, jak se vykresluje: odstraňuje komentáře a mezery, zkracuje hodnoty barev a nulové jednotky tam, kde je to bezpečné, slučuje duplicitní pravidla a odstraňuje nadbytečné středníky.

Tento nástroj je postavený na clean-css, CSS optimalizátoru, který skutečně parsuje stylopis do AST místo použití regexu, a proto dokáže bezpečně zpracovat okrajové případy, které naivní minifikátory rozbíjí — CSS vlastní vlastnosti (--main-color: ...), obsah uvnitř řetězců i složité selektory a media queries vyjdou vždy správně.

Proč ho používat?

• Minifikace založená na AST (clean-css), ne na regexu — bezpečná s vlastními vlastnostmi, řetězci a vnořenými media queries.
• Optimalizace úrovně 2 slučují a zjednodušují pravidla pro dodatečnou úsporu nad rámec pouhého odstranění mezer.
• Přesně vidíte, kolik bajtů a kolik procent jste ušetřili.
• Formátovací režim promění minifikovaný stylopis zpět na čitelné CSS s konzistentním odsazením.
• 100% lokální zpracování — proprietární nebo nezveřejněné styly nikdy neopustí váš prohlížeč.

Jak se používá

1. Vložte své CSS do vstupního pole, nebo klikněte na "Načíst příklad" a vyzkoušejte ukázku s vlastní vlastností a media query.
2. Klikněte na "Minifikovat" pro kompresi, nebo na "Formátovat" pro zkrášlení s odsazením 2 mezerami.
3. Zkontrolujte zprávu pod poli — režim minifikace zobrazuje snížení velikosti; neplatné CSS zobrazí jasnou chybu místo tichého vytvoření rozbitého výstupu.
4. Klikněte na "Kopírovat" pro zachycení výsledku.

Příklad

Vstup

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Výstup

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

Vlastní vlastnost, media query i pořadí kaskády jsou zachovány — odstraněny jsou pouze mezery, komentáře a nadbytečné znaky.

Praktické tipy

• Minifikujte při buildu/nasazení, ne během vývoje — upravujte čitelný zdroj a nechte tento nástroj (nebo váš build pipeline) vytvořit nasazovanou verzi.
• Pokud ladíte, proč stránka na produkci vypadá jinak, naformátování minifikovaného CSS nejdřív výrazně usnadní porovnání se zdrojem.
• Vlastní vlastnosti minifikaci přežijí, takže stylopisy založené na design tokenech (používající --spacing, --color-* atd.) je bezpečné tímto nástrojem projít.
• Kombinujte s HTML a JS minifikátory níže, pokud si v projektu udržujete vše v oddělených souborech před vydáním.

Kde to zapadá do reálných workflow

CSS je jedna z věcí s vyšším přínosem z minifikace, protože stylopisy jsou standardně blokující pro vykreslování — každý ušetřený bajt ze stylopisu může trochu zkrátit dobu do prvního vykreslení, zvláště na pomalejších připojeních. Je to menší výhra než optimalizace obrázků, ale je v podstatě zdarma, jakmile je zapojena do build kroku.

Směr Formátovat je užitečný pro opačný problém: prozkoumání minifikovaného stylopisu od konkurence nebo staršího produkčního webu, abyste pochopili jeho strukturu před napsáním přepisu nebo redesignu.

→ HTML Minifier · JS Minifier

Časté případy použití

• Zmenšení stylopisu před nasazením statického webu nebo landing page.
• Přeformátování minifikovaného CSS souboru staženého z živého webu, abyste pochopili jeho strukturu.
• Vyčištění CSS exportovaného z návrhářského nástroje, které často obsahuje nadměrné komentáře a mezery.
• Rychlá kontrola, zda ručně psaný CSS úryvek parsuje správně, protože chybné CSS se projeví jako explicitní chyba.

Časté dotazy