Přejít na obsah

Minifikace CSS

Zmenšete styly, aniž by se změnilo jejich chování.

Možnosti
Běží v prohlížeči – vaše CSS se nikam nenahrává.

Jak použít

  1. Vložte CSS kód do vstupního editoru.
  2. Nechte zapnuté „Odstranit komentáře“, pokud chcete komentáře z výsledku vyřadit. Licenční komentáře /*! */ zůstanou, dokud je zapnuté „Zachovat komentáře /*! */“.
  3. Zapněte „Odstranit poslední středník“, pokud chcete vynechat středník před každou uzavírací složenou závorkou }.
  4. Zkopírujte minifikovaný CSS kód z výstupního editoru.

Příklady

Licenční hlavička ve stylech e-shopu

Vstup
/*! MIT */
/* Styly produktové karty */
.produkt {
  padding: 16px;
  color: #333333;
}
Výstup
/*! MIT */
.produkt{padding:16px;color:#333333}

Zkrácení barev a čísel

Vstup
.nabidka {
  color: #FFFFFF;
  margin: 0px 0.50em 10.0px;
  opacity: 0.80;
  flex: 1 1 0px;
}
Výstup
.nabidka{color:#fff;margin:0 .5em 10px;opacity:.8;flex:1 1 0px}

Responzivní rozvržení s calc()

Vstup
@media screen and ( min-width : 768px ) {
  .katalog > .produkt {
    width: calc(100% - 24px);
    margin: 12px;
  }
}
Výstup
@media screen and (min-width:768px){.katalog>.produkt{width:calc(100% - 24px);margin:12px;}}

Tipy

Časté dotazy

Odesílá se můj CSS kód na server?

Minifikace probíhá ve vašem prohlížeči a nástroj CSS na server neposílá. Ukládá se pouze nastavení voleb; analytické události neobsahují váš CSS kód.

Sloučí minifikace stejné selektory a odstraní přepsané deklarace?

Stejné selektory se neslučují a opakované deklarace zůstávají zachované, včetně záložních hodnot. Pořadí pravidel i deklarací se nemění.

Mění se při minifikaci CSS proměnné?

Hodnoty vlastních vlastností, například --barva, se nezkracují. Odstraní se pouze mezery na začátku a konci hodnoty; vnitřní mezery zůstávají.

Jak velký CSS soubor můžu použít?

Můžete načíst soubor .css nebo .txt do 10 MB, větší soubory se odmítnou. Do 200 KB se CSS minifikuje automaticky během psaní, u většího vstupu klikněte na „Minifikovat CSS“ nebo stiskněte Ctrl/Cmd+Enter.

Proč minifikace ukazuje nulovou úsporu?

Pokud výsledek není menší než vstup, nástroj zobrazí upozornění, že CSS už je minifikované. Výsledný kód se zobrazí i v tomto případě.