Jak funguje zkrášlování CSS
Zkrášlovač čte váš stylopis znak po znaku, sleduje, jak hluboko je každý blok vnořen, a znovu jej vydá s konzistentními mezerami. Nikdy nemění to, co styly dělají — pouze to, jak vypadají v souboru.
- Tokenizace. Knihovna naskenuje váš vstup do proudu tokenů: selektory, názvy vlastností, hodnoty, at-pravidla, komentáře a závorky, dvojtečky a středníky, které je oddělují. Řetězce a hodnoty url() jsou rozpoznány jako jednotlivé celky, takže závorka uvnitř vlastnosti content není nikdy zaměněna za oddělovač bloku.
- Sledování vnoření. Při procházení tokenového proudu si zkrášlovač udržuje úroveň odsazení. Otevírací závorka posouvá úroveň hlouběji, ať už patří k bloku pravidla, media query nebo keyframes bloku, a každá zavírací závorka ji vrací zpět. Tato hloubka určuje, kolik jednotek odsazení je před každým řádkem, který dostanete zpět.
- Aplikace vašich možností. Vaše volba odsazení (2 mezery, 4 mezery nebo tabulátor) nastavuje šířku jedné úrovně. Nastavení stylu závorek rozhoduje, zda otevírací závorka zůstává na stejném řádku jako selektor, nebo klesne na vlastní řádek. Zbývající přepínače přidávají prázdný řádek mezi bloky pravidel a rozdělují seskupené selektory na samostatné řádky.
- Nový výstup. Nakonec formátovač vytiskne tokeny zpět s odsazením a zalomením řádků, které vypočítal, přičemž umístí jednu deklaraci na řádek a jednu mezeru za každou dvojtečkou. Výsledkem je stejný stylopis, rozvržený tak, aby člověk mohl procházet kaskádu.
Proč zkrášlovat CSS
- Čtení minifikovaných stylopisů. Produkční CSS se dodává na jednom řádku bez mezer mezi pravidly. Zkrášlení obnoví zalomení řádků a odsazení, takže můžete najít selektor za chybou rozvržení a vidět přesně, které deklarace nastavuje, i bez zdrojové mapy.
- Uspořádání nekonzistentních souborů. Stylopis, kterého se dotklo několik lidí, sklouzne do smíšeného odsazení a stylů závorek. Jeden průchod zkrášlovačem normalizuje celý soubor na jednotné rozvržení, takže další diff ukazuje skutečné změny kaskády místo šumu z bílých míst.
- Tento nástroj nezatěžuje vaši stránku. Většina online formátovačů načte celou knihovnu v okamžiku, kdy otevřete stránku. Tento líně načítá js-beautify pouze tehdy, když kliknete na Zkrášlit nebo zapnete Živý režim, takže otevření stránky stojí pár kilobajtů místo několika set a první vykreslení zůstává rychlé.
- Nic neopouští váš prohlížeč. Zkrášlovač běží zcela na vašem zařízení. Vaše CSS není nikdy nahráno na server, což je důležité, když stylopis, který prohlížíte, patří klientovi, obsahuje interní názvy tříd nebo spadá pod dohodu o mlčenlivosti.
Běžné aplikace
Zkrášlování CSS přichází na řadu vždy, když někdo potřebuje číst stylopis, který nebyl napsán pro čtení.
- Ladění produkce: vložte minifikovaný stylopis stažený z karty Network, abyste našli pravidlo, které přepisuje očekávané rozvržení.
- Příprava na code review: přeformátujte nekonzistentně odsazený stylopis přispěvatele před otevřením pull requestu, aby recenzenti viděli změny kaskády, ne změny rozvržení.
- Učení a audit: rozbalte stylopis frameworku nebo knihovny komponent, abyste prostudovali, jak jsou strukturovány jeho selektory, media queries a vlastní vlastnosti.
Příklad
Vezměte minifikovaný jednořádkový kód: a{color:red;margin:0}b{padding:0}. Vložte jej výše s odsazením 2 mezery a stylem závorek Souvislý, pak klikněte na Zkrášlit. Získáte zpět čitelné bloky: a { na vlastním řádku, deklarace color: red; a margin: 0; každá odsazená o jednu úroveň hlouběji, zavírací závorka zarovnaná pod selektorem a pravidlo b následující níže. Přepněte styl závorek na Roztažený a každá otevírací závorka klesne na vlastní řádek. Změňte odsazení na Tabulátory a každá úroveň se posune ze dvou mezer na tabulátor. Styly jsou identické; mění se pouze rozvržení.
FAQ
Běží to v mém prohlížeči?
Ano. Knihovna js-beautify je líně načtena při prvním kliknutí na Zkrášlit nebo zapnutí Živého režimu, pak je uložena do mezipaměti. Vaše CSS nikdy neopustí stránku — neprobíhá žádná cesta na server ani nahrávání.
Je zkrášlení stejné jako odminifikování?
Obnovuje čitelné formátování — odsazení, zalomení řádků a mezery — ale nemůže vrátit komentáře, které minifikace odstranila, ani obnovit strukturu, která v souboru nikdy nebyla. Pouze přeformátovává deklarace a selektory, které jsou přítomny.
Změní zkrášlení způsob vykreslení mých stylů?
Ne. Zkrášlování pouze přidává a odebírá bílé místo a zalomení řádků; kaskáda zůstává nedotčena a stránka se vykresluje identicky. Pořadí vlastností, specificita a hodnoty zůstávají přesně tak, jak jste je napsali.
Co znamenají možnosti stylu závorek?
Souvislý ponechává otevírací závorku na stejném řádku jako selektor (a {), což je běžná CSS konvence. Roztažený umísťuje každou otevírací závorku na vlastní řádek pod selektorem. Přepínače prázdných řádků a jednoho selektoru na řádek řídí mezery mezi pravidly a to, jak jsou seskupené selektory jako h1, h2, h3 rozvrženy.
Zkrášlování CSS na straně prohlížeče vám poskytne čitelný stylopis bez sestavovacího kroku nebo nahrávání. Vložte minifikovaný nebo neuspořádaný soubor, zvolte odsazení a styl závorek, pak zkopírujte nebo stáhněte výsledek. Nic neopouští vaše zařízení, není vyžadován účet a knihovna se načítá pouze tehdy, když o to požádáte — takže otevření této stránky vás stojí pár kilobajtů, ne megabajt.