01 / Postup
Jak to funguje
Odsazení a nové řádky odhalují strukturu a zachovávají podporované vstupní prvky.
Užitečná poznámka
U složité syntaxe nebo produkčních souborů ověřte výsledek v cílové aplikaci i specializovaným nástrojem.
Formátování kódu / MULTIVERTO
Formátovat CSS
Odsazením CSS zvýrazněte pravidla a deklarace.
Okamžitý převodVáš vstup zůstává v prohlížeči. Text k převodu nikam neodesíláme.
Soubor zůstává ve vašem prohlížeči.
Řetězit nástroje
Každý textový nástroj použijte na předchozí výsledek.
02 / Příklad
Příklad
Váš vstup
h1{color:#334155;margin:0;}p{line-height:1.5;}Výsledek
h1 {
color:#334155;
margin:0;
}
p {
line-height:1.5;
}03 / Postup
Formátovat CSS — Jak to funguje
Co tento nástroj mění
Odsazením CSS zvýrazněte pravidla a deklarace. Odsazení a nové řádky odhalují strukturu a zachovávají podporované vstupní prvky. Použijte jej na krátký styl, ve kterém jsou selektory a deklarace natlačené dohromady. Výsledek oddělí pravidla a deklarace do řádků. Vlastnosti netřídí a nezjišťuje, zda se selektor používá; to jsou jiné úlohy.
Poznejte formát
CSS se skládá ze selektorů, pravidel, bloků deklarací, hodnot a komentářů. Mezera mezi selektory může vyjadřovat vztah potomka, takže bezhlavé odstranění všech mezer by změnilo výběr elementů. Řetězce, funkce jako calc(), vlastní proměnné i vložené URL mohou obsahovat znaky podobné oddělovačům. Formátovač před změnou rozložení rozpoznává řetězce, komentáře a vnoření; nevyhodnocuje kaskádu ani podporu prohlížečů. Kompaktní verze odstraní běžné komentáře a vybrané mezery kolem interpunkce. Je záměrně mírnější než produkční minifikátor. Po zkopírování zkontrolujte stránku, která daný styl používá.
Spolehlivý postup
Formátování pomáhá zejména při kontrole a ladění, protože odsazení může odhalit chybějící úroveň vnoření nebo nečekaný sourozenecký prvek. Vložte úplný reprezentativní úryvek a spusťte formátování jednou. Výstup čtěte od vnější struktury dovnitř a sledujte začátek i konec každého elementu, bloku či klauzule. Tato stránka se nevydává za kompilátor pro všechna rozšíření jazyka; pokročilé konstrukce může odmítnout. Po zkopírování výsledku použijte běžný validátor nebo testy cílového projektu. Před uložením upraveného textu zkontrolujte rozdíl, aby změny rozložení nezakryly neúmyslnou změnu literálu nebo datové hodnoty.
Ověřte výsledek
Původní zdroj si ponechte vedle výsledku a před velkým dokumentem vyzkoušejte krátký známý příklad. Porovnávejte významový obsah, nejen velikost souboru nebo počet řádků. Po transformaci zkontrolujte názvy, řetězce v uvozovkách, znaky mimo ASCII, konce řádků i opakovaná pole. Čitelný výsledek neověřuje schéma, nedokazuje spustitelnost kódu ani bezpečnost zveřejnění dat. Tato stránka zpracovává text v prohlížeči a ukazuje výsledek jako text, ale po vložení do jiné aplikace se uplatní její pravidla. Pokud nástroj vstup odmítne, najděte nepodporovanou konstrukci a podle potřeby použijte specializovaný parser. Při kopírování z dokumentace si všimněte typografických uvozovek, neviditelných mezer a značky pořadí bajtů na začátku textu. Tyto znaky mohou vypadat nenápadně, ale parser je může vyhodnotit jinak než běžnou mezeru nebo uvozovku.
CSS — Vstup
Načíst a změnit strukturu
CSS — Výsledek