Zmenšit a formátování CSS
Režim Zmenšit odstraní nadbytečné formátování a optimalizuje CSS. Režim Formátovat přidá odsazení a konce řádků, aby se zmenšený kód lépe četl.
Zmenšení a formátování CSS
Zmenšete CSS pro menší soubor nebo ho naformátujte pro snazší čtení. Porovnejte výsledek s původním kódem.
Způsob zpracování
Další akce
Související nástroje
Vaše statistiky
0
Zpracováno
0
Ušetřené bajty
0%
Průměrná úspora
Zatím nepoužito
Nejčastější režim
0
Zkopírováno
100%
Skóre aktivity
Jak zmenšit a formátovat CSS
Video se nepodařilo načíst. Můžete postupovat podle návodu níže.
Video ukazuje anglické rozhraní.
Režim Zmenšit vytvoří úsporné CSS. Režim Formátovat zpřehlední zmenšený kód. Formátovat už neobnoví dříve odstraněné komentáře. Než původní CSS nahradíte, ponechte si jeho kopii.
Zmenšení a formátování CSS s volitelným nastavením
Optimalizace pravidel
CSSO může zkrátit hodnoty, odstranit prázdná pravidla a sloučit opakující se struktury. Výsledná úspora závisí na CSS a na tom, zda povolíte změny uspořádání pravidel.
Otevření souboru CSS
Tlačítkem Importovat načtěte jeden soubor .css nebo ho přetáhněte do vstupního pole. Jeho obsah se zpracuje ve vybraném režimu.
Zobrazit další (3)Zobrazit méně
Upozornění na chyby syntaxe
Režim Zmenšit zobrazí řádek a sloupec chyb zjištěných parserem. Než výsledné CSS použijete, upozornění zkontrolujte.
Komentáře a uspořádání pravidel
Zachovejte komentáře začínající /*! tam, kde obsahují licenci nebo důležité poznámky. Pokud nechcete slučovat pravidla ani měnit jejich pořadí, vypněte úpravu jejich uspořádání.
Automatické zpracování
Se zapnutou volbou Zpracovávat automaticky se výsledek aktualizuje při úpravách. Kde je tato volba viditelná, můžete ji vypnout a použít tlačítko Zmenšit nebo Formátovat. Na telefonu jsou tato tlačítka dostupná, ale volba Zpracovávat automaticky se nezobrazuje.
Časté otázky
Co je minifikace CSS?
Minifikace odstraní nadbytečné mezery a komentáře a může zkrátit hodnoty, například #ffffff na #fff. Nástroj používá CSSO, které při zapnuté úpravě uspořádání optimalizuje také opakující se pravidla a deklarace.
O kolik se CSS zmenší?
Záleží na původním kódu. CSS s mnoha komentáři a opakujícími se pravidly se může zmenšit více než už zmenšený kód. V oknech širších než 768 pixelů najdete pod editory srovnání velikosti vstupu a výsledku. V užších oknech se nezobrazuje. Údaj gzip měří kompresi v tomto prohlížeči, takže server může odeslat jiný počet bajtů.
Zrychlí zmenšení CSS web nebo zlepší SEO?
Menší CSS může snížit množství dat, která návštěvník stahuje. Dopad na načítání ale závisí i na zbytku stránky, mezipaměti a způsobu doručování souborů. Samotná minifikace nezaručí lepší Core Web Vitals ani pozice ve vyhledávání.
Jaký je rozdíl mezi zmenšením a formátováním CSS?
Režim Zmenšit vytvoří úspornější kód pro menší soubor. Režim Formátovat přidá řádky a odsazení pro snazší čtení a úpravy. Formátování neobnoví komentáře ani původní rozložení, které už bylo odstraněno.
Zobrazit další (4)Zobrazit méně
Jak zmenšené CSS znovu naformátuji?
Vyberte režim Formátovat, vložte CSS a zvolte odsazení dvěma nebo čtyřmi mezerami. Naformátovaný výsledek se zobrazí v editoru výsledku, odkud ho můžete zkopírovat nebo stáhnout.
Může zmenšení CSS něco rozbít?
Než nahradíte původní soubor, výsledek zkontrolujte a vyzkoušejte na svém webu. Úprava uspořádání může pravidla slučovat nebo měnit jejich pořadí. Pokud na pořadí záleží, tuto volbu vypněte a zkontrolujte upozornění parseru.
Najde nástroj chyby v CSS?
Režim Zmenšit zobrazí řádek a sloupec syntaktických chyb zjištěných parserem. Některé chyby umí parser částečně obejít a formátování není úplnou kontrolou správnosti CSS. Výsledek vyzkoušejte v prohlížečích, které váš web podporuje.
Musím CSS někam nahrávat?
Ne. Tlačítko Importovat načte místní soubor do editoru a zpracování probíhá v prohlížeči. CSS se neposílá na server k převodu.
Technické podrobnosti
Zmenšení pomocí CSSO
Režim Zmenšit načte CSSO a analyzuje CSS pomocí css-tree. Optimalizace odstraní nadbytečné formátování a může zkrátit hodnoty, odstranit prázdná pravidla a sloučit struktury. Dvě volby určují zachování důležitých komentářů a úpravu uspořádání pravidel.
Zpracování v prohlížeči
Knihovny pro zmenšení a formátování se načtou při prvním použití příslušného režimu. CSS zpracují v prohlížeči. Tlačítko Importovat přečte místní soubor, aniž by ho nahrálo na server k převodu.
Zobrazit další (4)Zobrazit méně
Výsledek a srovnání velikosti
Velikost vstupu a výsledku se měří podle počtu bajtů textu. Pokud prohlížeč podporuje CompressionStream, nástroj změří i velikost výsledku po kompresi gzip. Tlačítko Stáhnout vytvoří soubor .css s názvem podle zvoleného režimu.
Hlášení parseru
Režim Zmenšit shromáždí chyby z css-tree a zobrazí jejich řádek a sloupec. Parser může část chybného vstupu zpracovat, takže samotný výsledek nepotvrzuje platnost ani zamýšlené chování všech deklarací.
Formátování CSS
Režim Formátovat používá @projectwallace/format-css s odsazením dvěma nebo čtyřmi mezerami. Oba režimy také zobrazují syntaktické chyby zjištěné css-tree. Formátování neobnovuje odstraněné komentáře a nepotvrzuje platnost všech deklarací CSS.
Místní statistiky používání
Počet zpracování, ušetřené bajty a použití režimů se započítávají při spuštění tlačítkem Zmenšit nebo Formátovat. Automatické aktualizace je nezvyšují. Kopírování výsledku se počítá zvlášť. Je-li úložiště dostupné, statistiky se ukládají do IndexedDB v prohlížeči. Skóre aktivity vychází z úspory velikosti, kopírování a použitých režimů. Neměří správnost CSS ani rychlost načítání.