Zpřehlednění CSS online
Vložte zhuštěný stylopis a znovu se v něm vyznejte. Selektory i jednotlivé deklarace dostanou vlastní řádky, bloky a mediální dotazy přehledné odsazení, jaké byste použili při ručním psaní.
Proč má produkční CSS jediný dlouhý řádek
Produkční stylopisy se často minifikují, aby se zmenšil objem textu přenášeného do prohlížeče. Sestavovací nástroje mohou odstraňovat mezery a komentáře, zkracovat hodnoty nebo slučovat slučitelná pravidla. Výsledek závisí na zvoleném optimalizátoru a jeho nastavení. Nelze zaručit konkrétní úsporu velikosti ani rychlejší načítání stránky. Sestavený stylopis pomocných tříd může obsahovat mnoho drobných pravidel, kvůli kterým se zhuštěný soubor špatně prohlíží. Formátování pravidla jednotně uspořádá pro čtení, neobnoví však zdrojové komponenty, soubory preprocesoru ani konfiguraci sestavení, která je vytvořila.
Kaskáda opět přehledně
Hlavním důvodem pro formátování stylopisu je pochopit, proč se určité pravidlo uplatňuje, nebo neuplatňuje. Jakmile má každý selektor vlastní řádek a pod ním odsazené deklarace, můžete správně sledovat kaskádu: najít všechna pravidla pro prvek, porovnat jejich specificitu, zjistit jejich pořadí a objevit zapomenuté important, které přepisuje vaši práci. Mediální dotazy i jejich obsah jsou viditelné jako bloky, takže se responzivní chování sleduje mnohem snáze než ve zhuštěném souboru. Při cíleném zkoumání si před změnami zkopírujte celé pravidlo i příslušný okolní mediální dotaz. Viditelný stylopis vysvětluje jen část kaskády: roli hrají také styly přímo v prvcích, další stylopisy, dědičnost a aktuální DOM. Vývojářské nástroje prohlížeče ukážou, které deklarace se na prvek skutečně vztahují. Naformátovaný soubor použijte k pochopení souvislostí a chování potom ověřte při zkoumané velikosti zobrazované oblasti. Pokud automatické rozpoznávání označí CSS jako JavaScript, zkontrolujte zobrazený údaj, než se na výsledek spolehnete.
Podpora moderního CSS
Formátovač rozumí současnému CSS, nejen jeho starší omezené podobě. Zvládá vlastní vlastnosti, výrazy calc a clamp, zkrácené zápisy pro grid a flexbox, kontejnerové dotazy, vnořená pravidla, vrstvy, bloky supports i klíčové snímky animací. Dlouhé seznamy selektorů rozděluje do řádků, aby se daly pohodlně číst, a zachovává komentáře, které přežily sestavení. Pokud soubor kombinuje běžné CSS s vlastnostmi s prefixy výrobců, výsledek tyto deklarace ponechá a pouze je naformátuje podle pravidel nástroje.
Praktický tip pro sestavené frameworky
Při formátování sestaveného stylopisu Tailwind nebo Bootstrap soubor rychle naroste, desítky tisíc řádků jsou běžné. Zapněte čísla řádků a místo posouvání stránky vyhledejte požadovaný název třídy nebo vlastnosti pomocí hledání v prohlížeči. Pokud chcete soubor spíše zmenšit než číst, zaměřte se na konfiguraci sestavení: nepoužívaná pravidla totiž vznikla ještě před samotnou minifikací.
Časté dotazy
Lze zpřehlednit sestavený stylopis Tailwind?
Ano, jde o jedno z nejčastějších použití této stránky. Počítejte s velmi dlouhým výsledkem, protože framework vytváří pravidlo pro každou pomocnou třídu. Praktickou orientaci usnadní zapnutí čísel řádků a hledání v prohlížeči.
Obnoví se komentáře?
Komentáře, které v dodaném CSS zůstaly, se mohou objevit i ve formátovaném výstupu. Komentáře odstraněné minifikátorem nelze ze souboru obnovit, včetně vysvětlení, proč pravidlo existuje. Potřebujete-li poznámky k návrhu, pokyny autora nebo historii selektoru, podívejte se do původního zdrojového repozitáře.
Funguje nástroj s SCSS nebo Less?
Tato stránka je určena pro běžné CSS včetně výstupu sestaveného ze Sass nebo Less. Proměnné, mixiny a direktivy specifické pro preprocesory nejsou podporovaným vstupem. Nejprve zdroje sestavte vhodnými nástroji projektu a tento editor použijte k prohlížení výsledného stylopisu.