Preskočiť na obsah
🛠️
Whiz Tools

Bezplatný CSS Minifikátor: Komprimujte a Optimalizujte CSS Kód Online

Okamžite zminifikujte CSS kód a znížte veľkosť súboru až o 40%. Bezplatný online CSS minifikátor odstraňuje medzery, komentáre a optimalizuje syntax pre rýchlejší výkon webových stránok.

CSS Minifikátor

Okamžite zminifikujte CSS kód a znížte veľkosť súboru až o 40% a zlepšite rýchlosť načítania webovej stránky.

0 znakov
0 znakov

O CSS Minifikácii

CSS minifikácia odstraňuje nepotrebné znaky z CSS súborov bez zmeny funkcionality, znižuje veľkosť súboru a zlepšuje výkon webovej stránky.

  • Odstraňuje komentáre, medzery a zalomenia riadkov
  • Eliminuje zbytočné bodkočiarky a nulové jednotky
  • Optimalizuje farebné hodnoty a deklarácie
  • Zlepšuje rýchlosť načítania stránky a SEO hodnotenie
Kalkulačka načítavania...
📚

Dokumentácia

Čo je minifikátor CSS?

Minifikátor CSS je nástroj, ktorý zmenšuje súbor CSS (kaskádových štýlov) odstránením znakov, ktoré prehliadače nepotrebujú. Odstraňuje komentáre, nadbytočné medzery a zalomenia riadkov a skracuje niektoré bežné zápisy bez zmeny vzhľadu stránky. Výsledkom je menší súbor, ktorý môže prehliadač rýchlejšie stiahnuť a analyzovať.

Ako funguje minifikácia CSS

Weboví vývojári píšu CSS s komentármi, odsadením a prázdnymi riadkami, pretože kód sa tak ľahšie číta a upravuje. Prehliadače celé toto formátovanie ignorujú. Minifikátor ho odstráni spolu s niekoľkými ďalšími bajtmi, ktoré nemajú vplyv na vzhľad, a ponechá kompaktný súbor určený na použitie v produkcii, nie na úpravy.

Tento nástroj vykonáva tieto zmeny:

  • Odstraňuje komentáre. Každý blok /* ... */ sa odstráni.
  • Zlučuje biele znaky. Súvislé sekvencie medzier, tabulátorov a zalomení riadkov medzi pravidlami sa odstránia alebo nahradia jednou medzerou tam, kde má medzera význam (napríklad medzi .parent a .child v selektore potomka).
  • Odstraňuje biele znaky okolo interpunkcie. Medzery pri znakoch {, }, :, ; a , sa odstránia.
  • Odstraňuje nadbytočné bodkočiarky. Opakované bodkočiarky sa zlúčia do jednej a posledná bodkočiarka pred uzatváracím znakom } sa odstráni.
  • Skracovanie hexadecimálnych farieb. Šesťciferná farba, napríklad #ffffff, sa zmení na #fff, keď sa každá dvojica číslic zhoduje (červená, zelená a modrá). Osemciferná farba s alfa kanálom, napríklad #ffaa00cc, sa rovnakým spôsobom skráti, keď sa zhodujú všetky štyri dvojice.
  • Odstraňuje jednotku z hodnôt s nulovou dĺžkou. 0px, 0em a 0rem sa zmenia na 0. Percentuálne hodnoty sa ponechávajú, pretože 0% nie je vždy zameniteľné s obyčajným 0 (napríklad vo vlastnosti flex-basis alebo v kroku @keyframes).
  • Odstraňuje úvodnú nulu z desatinných čísel. 0.5 sa zmení na .5.

Aby sa súbor nepoškodil, nástroj ponecháva nedotknuté tri druhy obsahu: text v úvodzovkách, hodnotu v neúvodzovkovom zápise url() a obsah matematických funkcií, ako sú calc(), clamp(), min() a max(). Medzery v calc(100% - 20px) sú pre prehliadač dôležité, preto ich nástroj zachová presne.

Nástroj nezlučuje duplicitné selektory, neodstraňuje prázdne bloky pravidiel ani nekonvertuje farby rgb() na hexadecimálny zápis. Ide o platné optimalizácie, ktoré vykonávajú iné nástroje, no tento minifikátor sa zameriava na vyššie uvedené zmeny.

Vzorec percentuálneho zmenšenia

Nástroj uvádza, o aké percento sa súbor zmenšil:

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

Obe dĺžky sa počítajú v znakoch. Výsledok sa zaokrúhľuje na dve desatinné miesta.

Vyriešený príklad

Pôvodné CSS (193 znakov):

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 znakov):

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

Po dosadení do vzorca: (193 − 129) / 193 × 100 = 33,16 %. Komentár zmizol, odsadenie a zalomenia riadkov zmizli, 0px sa zmenilo na 0 a #ffffff/#000000 sa zmenilo na #fff/#000.

Presné percento závisí od vstupu. Stručne zapísané CSS s niekoľkými komentármi sa zmenší menej. CSS s množstvom komentárov a výrazným odsadením sa môže zmenšiť viac. Bežné šablóny štýlov minifikované týmto nástrojom sa zmenšia približne o 20 % až 40 %.

Ako používať tento nástroj

  1. Vložte kód CSS do vstupného poľa vľavo.
  2. Minifikovaná verzia sa automaticky zobrazí vpravo bez potreby stlačiť tlačidlo.
  3. Skontrolujte percento zmenšenia zobrazené nad výstupom.
  4. Vyberte možnosť „Copy to Clipboard“, skopírujte minifikované CSS a potom ho vložte do súboru projektu.
  5. Vyberte možnosť „Clear“, aby ste vymazali obe polia a začali znova.

Nič, čo do nástroja zadáte, sa neodosiela na server; minifikácia prebieha v prehliadači.

Kedy minifikovať CSS

Vývojové tímy bežne minifikujú CSS ako súčasť procesu zostavenia pomocou nástrojov, ako sú Webpack alebo skripty npm, takže zmena prebehne automaticky pred každým nasadením. Čitateľný zdrojový súbor s komentármi zostáva v systéme správy verzií; minifikovaná je iba produkčná zostava. Minifikované CSS sa bežne používa napríklad v týchto prípadoch:

  • Veľké webové sídla, napríklad internetové obchody, kde menší súbor štýlov umožňuje rýchlejšie načítanie stránky.
  • Jednostránkové aplikácie vytvorené pomocou frameworkov, ako sú React alebo Vue, v ktorých sa CSS spája s JavaScriptom.
  • Mobilné webové stránky, pri ktorých používatelia častejšie používajú pomalšie pripojenie.
  • E-maily vo formáte HTML, ktoré majú často prísne obmedzenia veľkosti.

Minifikácia CSS a rýchlosť stránky

Menší súbor CSS sa stiahne a analyzuje rýchlejšie, čo môže skrátiť čas do zobrazenia stránky. Google uviedol, že rýchlosť stránky patrí medzi signály používané pri hodnotení vo vyhľadávaní, takže rýchlejšia stránka môže byť jedným z mnohých menších faktorov ovplyvňujúcich umiestnenie stránky vo výsledkoch vyhľadávania. Samotná minifikácia nezaručuje zmenu umiestnenia; ide o jednu z viacerých optimalizácií vrátane kompresie obrázkov a skrátenia času odozvy servera.

Minifikátor CSS verzus formátovač CSS

Minifikátor komprimuje kód na použitie v produkcii. Formátovač robí opak: vezme komprimované CSS a preformátuje ho pomocou odsadenia a zalomení riadkov, aby ho človek mohol znova čítať. Formátovač nedokáže obnoviť komentáre ani pôvodné názvy premenných odstránené pri minifikácii, pretože po odstránení sú tieto informácie preč.

Najčastejšie otázky

O koľko sa CSS po minifikácii zmenší? Pri tomto nástroji zvyčajne o 20 % až 40 %, v závislosti od počtu komentárov, prázdnych riadkov a odsadenia v pôvodnom súbore. Súbor, ktorý mal už na začiatku len málo formátovania, sa zmenší menej.

Zmení minifikácia CSS vzhľad stránky? Nie. Minifikácia iba odstraňuje znaky, ktoré prehliadače ignorujú, napríklad komentáre a nadbytočné biele znaky, a prepisuje niektoré rovnocenné hodnoty (napríklad #ffffff na #fff). Vykreslená stránka zostane rovnaká.

Malo by sa CSS minifikovať počas vývoja? Nie. Počas písania a ladenia kódu si ponechajte čitateľnú verziu s komentármi. Minifikujte iba kópiu, ktorá sa odosiela na produkčný server, zvyčajne automaticky v rámci procesu zostavenia.

Dá sa minifikované CSS zmeniť späť na pôvodný súbor? Formátovač dokáže minifikované CSS preformátovať pomocou odsadenia, ale nedokáže obnoviť odstránené komentáre ani vrátiť opisné názvy, ktoré v minifikovanej verzii nikdy neboli. Pôvodný zdrojový súbor si ponechajte.

Konvertuje tento nástroj farby rgb() na hexadecimálny zápis alebo zlučuje duplicitné selektory? Nie. Skracuje hexadecimálne farby a odstraňuje nepotrebné znaky, ale neprepisuje hodnoty rgb()/hsl() ani nezlučuje opakované selektory. Niektoré iné minifikátory vykonávajú aj tieto kroky.

Je minifikácia to isté ako kompresia gzip? Nie. Minifikácia odstraňuje nepotrebné znaky zo samotného zdrojového kódu. Kompresiu gzip (alebo Brotli) použije webový server pri odosielaní súboru pomocou samostatného algoritmu. Použitie oboch metód spolu vytvorí najmenší súbor prenášaný sieťou.