CSS Minifikátor a Formátovač

Čo je tento nástroj?

CSS minifier prepíše štýlopis tak, aby bol čo najmenší bez zmeny vykresľovania: odstráni komentáre a medzery, skráti farebné hodnoty a nulové jednotky tam, kde je to bezpečné, zlúči duplicitné pravidlá a odstráni nadbytočné bodkočiarky.

Tento nástroj je postavený na clean-css, CSS optimalizátore, ktorý štýlopis skutočne rozparsuje do AST namiesto použitia regulárnych výrazov, vďaka čomu dokáže bezpečne spracovať hraničné prípady, ktoré naivné minifikátory rozbíjajú — vlastné CSS vlastnosti (--main-color: ...), obsah v reťazcoch aj zložité selektory a mediálne dotazy vyjdú vždy správne.

Prečo ho používať?

• Minifikácia založená na AST (clean-css), nie na regulárnych výrazoch — bezpečná pri vlastných vlastnostiach, reťazcoch aj vnorených mediálnych dotazoch.
• Optimalizácie úrovne 2 zlučujú a zjednodušujú pravidlá pre ďalšiu úsporu nad rámec jednoduchého odstránenia medzier.
• Presne uvidíte, koľko bajtov a koľko percent ste ušetrili.
• Režim formátovania premení minifikované CSS späť na čitateľný kód s konzistentným odsadením.
• 100 % lokálne spracovanie — vaše neverejné či ešte nevydané štýly nikdy neopustia prehliadač.

Ako sa používa

1. Vložte svoje CSS do vstupného poľa, alebo kliknite na "Načítať príklad" a vyskúšajte ukážku s vlastnou vlastnosťou a mediálnym dotazom.
2. Kliknite na "Minifikovať" pre skomprimovanie, alebo na "Formátovať" pre preformátovanie s 2-medzerovým odsadením.
3. Skontrolujte správu pod poľami — režim minifikácie zobrazí zníženie veľkosti; neplatné CSS zobrazí zrozumiteľnú chybu namiesto tichého vytvorenia poškodeného výstupu.
4. Kliknite na "Kopírovať" a prevezmite výsledok.

Prí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á vlastnosť, mediálny dotaz aj poradie kaskády sú zachované — odstránia sa iba medzery, komentáre a nadbytočné znaky.

Praktické tipy

• Minifikujte pri builde/nasadení, nie počas vývoja — upravujte čitateľný zdroj a nechajte tento nástroj (alebo svoj build pipeline) vytvoriť odosielanú verziu.
• Ak riešite, prečo stránka v produkcii vyzerá inak, naformátovanie minifikovaného CSS ako prvý krok výrazne uľahčí porovnanie so zdrojom.
• Vlastné vlastnosti minifikáciu prežijú, takže štýlopisy založené na dizajnových tokenoch (s --spacing, --color-* a pod.) je bezpečné cez tento nástroj prepustiť.
• Skombinujte s minifikátormi HTML a JS nižšie, ak váš projekt pred vydaním drží všetko v samostatných súboroch.

Kam to zapadá v reálnych workflow

CSS patrí medzi vecí s vyšším prínosom pri minifikácii, pretože štýlopisy štandardne blokujú vykresľovanie — každý ušetrený bajt zo štýlopisu môže o trochu skrátiť čas do prvého vykreslenia, obzvlášť na pomalších pripojeniach. Je to menší prínos než optimalizácia obrázkov, no v podstate zadarmo, keď je raz zapojený do build kroku.

Smer Formátovať je užitočný pri opačnom probléme: skúmaní minifikovaného produkčného štýlopisu konkurencie alebo staršieho projektu s cieľom pochopiť jeho štruktúru pred písaním prepisu alebo redizajnu.

→ HTML Minifikátor · JS Minifikátor

Bežné prípady použitia

• Zmenšenie štýlopisu pred nasadením statického webu alebo landing page.
• Preformátovanie minifikovaného CSS súboru stiahnutého zo živého webu na štúdium jeho štruktúry.
• Vyčistenie CSS exportovaného z dizajnérskeho nástroja, ktoré často obsahuje nadbytočné komentáre a medzery.
• Rýchla kontrola, či sa ručne napísaný úryvok CSS správne parsuje, keďže chybné CSS sa prejaví ako výslovná chyba.

Časté otázky