Přeskočit na obsah
🛠️
Whiz Tools

Bezplatný CSS Minifikátor: Komprese a Optimalizace CSS Kódu Online

Okamžitě zmenšete CSS kód a snižte velikost souboru až o 40%. Bezplatný online CSS minifikátor odstraňuje mezery, komentáře a optimalizuje syntaxi pro rychlejší výkon webu.

Minifikátor CSS

Okamžitě zmenšete velikost CSS kódu až o 40% a zlepšete rychlost načítání webu.

0 znaků
0 znaků

O minifikaci CSS

Minifikace CSS odstraňuje zbytečné znaky z CSS souborů bez změny funkčnosti, čímž zmenšuje velikost souboru a zlepšuje výkon webu.

  • Odstraňuje komentáře, mezery a zalomení řádků
  • Eliminuje zbytečné středníky a nulové jednotky
  • Optimalizuje barevné hodnoty a deklarace
  • Zlepšuje rychlost načítání stránky a SEO hodnocení
Kalkulačka načítání...
📚

Dokumentace

Co je minifikátor CSS?

Minifikátor CSS je nástroj, který zmenšuje soubor CSS (kaskádových stylů) odstraněním znaků, které prohlížeče nepotřebují. Odstraňuje komentáře, nadbytečné mezery a konce řádků a zkracuje některé běžné zápisy, aniž by změnil vzhled stránky. Výsledkem je menší soubor, který může prohlížeč rychleji stáhnout a zpracovat.

Jak minifikace CSS funguje

Weboví vývojáři píší CSS s komentáři, odsazením a prázdnými řádky, protože díky nim se kód snadněji čte a upravuje. Prohlížeče toto formátování ignorují. Minifikátor je odstraní spolu s několika dalšími bajty, které nemají žádný vliv na vzhled, a ponechá kompaktní soubor určený k použití v produkci, nikoli k úpravám.

Tento nástroj provádí následující změny:

  • Odstraňuje komentáře. Každý blok /* ... */ se odstraní.
  • Slučuje bílé znaky. Sekvence mezer, tabulátorů a konců řádků mezi pravidly se zredukují na nic, nebo na jednu mezeru tam, kde je mezera významová (například mezi .parent a .child v selektoru potomka).
  • Odstraňuje bílé znaky kolem interpunkce. Mezeru vedle znaků {, }, :, ; a , odstraní.
  • Odstraňuje nadbytečné středníky. Opakované středníky sloučí do jednoho a poslední středník před uzavíracím znakem } odstraní.
  • Zkracuje hexadecimální barvy. Šestimístná barva jako #ffffff se změní na #fff, pokud se každá dvojice číslic shoduje (červená, zelená a modrá). Osmimístná barva s alfakanálem, například #ffaa00cc, se stejným způsobem zkrátí, pokud se shodují všechny čtyři dvojice.
  • Odstraňuje jednotku z hodnot s nulovou délkou. 0px, 0em a 0rem se změní na 0. Procentuální hodnoty se ponechávají, protože 0% nelze vždy zaměnit za prosté 0 (například u kroku flex-basis nebo @keyframes).
  • Odstraňuje úvodní nulu z desetinných čísel. 0.5 se změní na .5.

Aby nedošlo k poškození souboru, ponechává nástroj beze změny tři druhy obsahu: text v uvozovkách, hodnotu uvnitř neuzavřeného url() a obsah matematických funkcí, jako jsou calc(), clamp(), min() a max(). Mezery uvnitř calc(100% - 20px) jsou pro prohlížeč významné, takže je nástroj zachová přesně.

Nástroj neslučuje duplicitní selektory, neodstraňuje prázdné bloky pravidel ani nepřevádí barvy rgb() na hexadecimální zápis. Jde o platné optimalizace, které provádějí jiné nástroje, ale tento minifikátor se zaměřuje na výše uvedené změny.

Vzorec pro výpočet procentuálního zmenšení

Nástroj uvádí, o kolik se soubor zmenšil v procentech:

1reduction % = ((original length − minified length) / original length) × 100
2

Obě délky se počítají ve znacích. Výsledek se zaokrouhluje na dvě desetinná místa.

Příklad výpočtu

Původní CSS (193 znaků):

1/* Navigation Styles */
2.nav-menu {
3  display: flex;
4  justify-content: space-between;
5  padding: 20px 0px;
6  background-color: #ffffff;
7}
8
9.nav-item {
10  margin-right: 15px;
11  color: #000000;
12}
13

Minifikovaný výstup (129 znaků):

1.nav-menu{display:flex;justify-content:space-between;padding:20px 0;background-color:#fff}.nav-item{margin-right:15px;color:#000}
2

Po dosazení do vzorce: (193 − 129) / 193 × 100 = 33,16 %. Komentář zmizel, odsazení a konce řádků byly odstraněny, 0px se změnilo na 0 a #ffffff/#000000 se změnilo na #fff/#000.

Přesné procento závisí na vstupu. Pečlivě napsané CSS s několika komentáři se zmenší méně. Silně komentované a hluboce odsazené CSS se může zmenšit více. U běžných šablon stylů minifikovaných tímto nástrojem se velikost obvykle zmenší přibližně o 20 % až 40 %.

Jak tento nástroj používat

  1. Vložte kód CSS do vstupního pole vlevo.
  2. Minifikovaná verze se automaticky zobrazí vpravo, bez nutnosti stisknout tlačítko.
  3. Zkontrolujte procento zmenšení zobrazené nad výstupem.
  4. Vyberte „Copy to Clipboard“ a zkopírujte minifikované CSS, poté je vložte do souboru projektu.
  5. Vyberte „Clear“ a vymažte obě pole, abyste mohli začít znovu.

Nic, co do nástroje zadáte, se neodesílá na server; minifikace probíhá v prohlížeči.

Kdy minifikovat CSS

Vývojové týmy běžně minifikují CSS jako krok procesu sestavení pomocí nástrojů, jako jsou Webpack nebo skripty npm, takže ke změně dochází automaticky před každým nasazením. Čitelný zdrojový soubor s komentáři zůstává v systému správy verzí; minifikována je pouze produkční sestava. Mezi běžná místa použití minifikovaného CSS patří:

  • Velké weby, například internetové obchody, kde menší šablona stylů znamená rychleji se načítající stránku.
  • Jednostránkové aplikace vytvořené pomocí frameworků, jako jsou React nebo Vue, kde je CSS sbaleno společně s JavaScriptem.
  • Mobilní webové stránky, u nichž uživatelé častěji používají pomalejší připojení.
  • E-maily ve formátu HTML, které mají často přísné limity velikosti.

Minifikace CSS a rychlost stránky

Menší soubor CSS se stahuje a zpracovává rychleji, což může zkrátit dobu do zobrazení stránky. Google uvedl, že rychlost stránky patří mezi signály používané při řazení výsledků vyhledávání, takže rychlejší stránka může být jedním z mnoha dílčích faktorů ovlivňujících umístění webu ve výsledcích vyhledávání. Samotná minifikace změnu pořadí nezaručuje; je jednou z několika optimalizací, mezi které patří také komprese obrázků a doba odezvy serveru.

Minifikátor CSS versus formátovač CSS

Minifikátor komprimuje kód pro produkční použití. Formátovač dělá opak: vezme komprimované CSS a znovu je naformátuje pomocí odsazení a konců řádků, aby je člověk mohl číst. Formátovač nemůže obnovit komentáře ani původní názvy proměnných odstraněné během minifikace, protože po jejich smazání jsou tyto informace pryč.

Často kladené otázky

O kolik se CSS po minifikaci zmenší? U tohoto nástroje obvykle o 20 % až 40 % podle toho, kolik komentářů, prázdných řádků a odsazení původní soubor obsahuje. Soubor, který je už od začátku málo formátovaný, se zmenší méně.

Změní minifikace CSS vzhled stránky? Ne. Minifikace pouze odstraňuje znaky, které prohlížeče ignorují, například komentáře a nadbytečné bílé znaky, a přepisuje několik ekvivalentních hodnot (například #ffffff na #fff). Vykreslená stránka zůstane stejná.

Mělo by se CSS minifikovat během vývoje? Ne. Při psaní a ladění kódu ponechte čitelnou verzi s komentáři. Minifikujte pouze kopii určenou pro produkční server, obvykle jako automatický krok procesu sestavení.

Lze minifikované CSS převést zpět na původní soubor? Formátovač může minifikované CSS znovu naformátovat pomocí odsazení, ale nedokáže obnovit odstraněné komentáře ani popisné názvy, které v minifikované verzi nikdy nebyly. Původní zdrojový soubor si ponechte.

Převádí tento nástroj barvy rgb() na hexadecimální zápis nebo slučuje duplicitní selektory? Ne. Zkracuje hexadecimální barvy a odstraňuje nepotřebné znaky, ale nepřepisuje hodnoty rgb()/hsl() ani neslučuje opakované selektory. Některé jiné minifikátory tyto kroky provádějí.

Je minifikace totéž co komprese gzipem? Ne. Minifikace odstraňuje nepotřebné znaky přímo ze zdrojového kódu. Kompresi gzipem (nebo Brotli) použije webový server při odesílání souboru pomocí samostatného algoritmu. Použití obou metod dohromady vytvoří nejmenší soubor přenášený po síti.