CSS určuje vzhled webové stránky. Před zveřejněním můžete odstranit nadbytečné mezery, nebo kód naopak odsadit a rozdělit do řádků pro snazší čtení a úpravy.
Zmenšit CSS
Nad editory vyberte režim
Zmenšit.CSS můžete vložit tlačítkem Vložit do vstupního editoru nebo pomocí
Importovatnačíst soubor.css.Se zapnutou volbou Zpracovávat automaticky se výsledek aktualizuje při psaní. Kde je volba viditelná, můžete ji vypnout a po dokončení úprav stisknout Zmenšit. Na telefonu použijte tlačítko Zmenšit, kdykoli potřebujete obnovit výsledek.
Tlačítkem
Kopírovatvýsledek zkopírujete, tlačítkemStáhnoutho uložíte jako soubor CSS.
Například následující CSS obarví nadpis červeně. Po zmenšení vznikne h1{color:red}. Nadpis zůstane červený.
h1 {
color: red;
}Zpřehlednění zmenšeného CSS
Zvolte Formátovat, pokud je kód nepřehledný a nahuštěný. Deklarace se rozdělí na samostatné řádky a odsadí dvěma nebo čtyřmi mezerami podle vybraného nastavení.
Formátování přidává mezery, takže výsledek může být větší než vstup. Neobnovuje komentáře ani původní rozložení, které dřívější minifikace odstranila.
Prohodit přesune výsledek do vstupního editoru a přepne mezi režimy Zmenšit a Formátovat. Pokud je volba Zpracovávat automaticky vypnutá, zpracujte nový vstup hlavním tlačítkem.
Co smí zmenšení změnit
| Nastavení | Co ovlivňuje |
|---|---|
| Zachovat důležité komentáře | Zachová komentáře začínající /*!. Běžné komentáře se odstraní. Volbu vypněte pouze tehdy, když chcete odstranit i označené komentáře. |
| Uspořádat a sloučit pravidla | Povolí slučování a změny uspořádání kompatibilních pravidel. Po vypnutí se tyto zásahy do struktury neprovádějí. |
| Zpracovávat automaticky | Aktualizuje výsledek po změně vstupu nebo nastavení. Je-li volba vypnutá, neaktuální výsledek se smaže. Na telefonu se tato volba nezobrazuje. |
| Odsazení výsledku | V režimu Formátovat zvolíte dvě nebo čtyři mezery pro každou úroveň odsazení. |
| Zalamovat | Zalamuje dlouhé řádky v editorech. Mění pouze zobrazení kódu, nikoli stažený soubor. |
Než nahradíte původní CSS, vyzkoušejte výsledek na svém webu, zvlášť pokud jste povolili úpravu uspořádání pravidel. Původní soubor si ponechte pro případ návratu.
Tlačítko Importovat a práce s výsledkem
Tlačítko Importovat přijímá vždy jeden soubor CSS. Soubor můžete také přetáhnout na stránku. Pokud už je ve vstupu kód, před načtením jiného souboru se zobrazí dotaz na jeho nahrazení. Zrušením zachováte dosavadní obsah.
Tlačítko Vložit nahradí vstup obsahem schránky. Prohlížeč může požádat o povolení přístupu. Můžete také kliknout do vstupního editoru a použít obvyklou klávesovou zkratku pro vložení.
Tlačítka Kopírovat a Stáhnout pracují s výsledkem. Stažené soubory CSS mají v názvu minified nebo beautified. Před odchodem ze stránky si výsledek uložte. Obsah editorů se po obnovení stránky nevrátí.
Na telefonu jsou v dolní liště po ruce hlavní akce a tlačítko Kopírovat. Nabídka Další obsahuje další příkazy a nastavení komentářů, uspořádání pravidel nebo odsazení podle režimu. Volba Zpracovávat automaticky v tomto rozložení dostupná není.
Údaje o velikosti
Údaje o velikosti se zobrazují pod editory v oknech širších než 768 pixelů. V užších oknech jsou skryté. Vstup a výsledek se měří v bajtech, úspora porovnává tyto dvě hodnoty. Formátování může soubor zvětšit, ale ukazatel úspory záporné procento nezobrazuje.
Údaj gzip odhaduje velikost po kompresi gzip v tomto prohlížeči. Server může soubor komprimovat jinak, takže nejde o přesnou velikost stahování u každého návštěvníka.
Když výsledek neodpovídá očekávání
V režimu Zmenšit upozornění uvádí řádek a pozici, které je potřeba zkontrolovat. Mezi vlastností a hodnotou má být dvojtečka a závorky mají tvořit páry. Nástroj někdy vytvoří výsledek i z částečně chybného CSS. Zobrazený výsledek tedy nepotvrzuje správnost každého pravidla.
Režim Formátovat upraví text pro snazší čtení a také hlásí syntaktické chyby zjištěné parserem. Ani jeden režim neověřuje, zda každá deklarace funguje podle záměru.
Pokud výsledek po úpravě zmizel, stiskněte znovu Zmenšit nebo Formátovat. Kde je volba Zpracovávat automaticky viditelná, můžete ji zapnout pro automatické aktualizace. Smazat po potvrzení smaže oba editory. Zrušením zůstane jejich obsah zachovaný.
CSS se zpracovává v prohlížeči. Statistiky používání mohou zůstat uložené na tomto zařízení, kopii CSS ale neukládají. Počet zpracování se zvyšuje při spuštění tlačítkem Zmenšit nebo Formátovat. Automatické aktualizace se nezapočítávají.