Formátovanie CSS online
Vložte kompaktné štýly a opäť ich pohodlne čítajte. Selektory aj jednotlivé deklarácie budú na samostatných riadkoch a bloky i mediálne dopyty dostanú prehľadné odsadenie.
Prečo je produkčné CSS na jednom dlhom riadku
Produkčné štýly sa často minifikujú, aby sa znížil objem textu posielaného do prehliadača. Zostavovacie nástroje môžu odstrániť medzery a komentáre, skrátiť hodnoty alebo zlúčiť zlučiteľné pravidlá. Výsledok závisí od zvoleného optimalizátora a jeho nastavení; konkrétna úspora veľkosti ani rýchlejšie načítanie stránky nie sú zaručené. Zostavené štýly s pomocnými triedami môžu obsahovať množstvo drobných pravidiel, čo sťažuje prezeranie kompaktného súboru. Formátovanie pridá jednotné rozloženie na čítanie týchto pravidiel, nedokáže však obnoviť zdrojové komponenty, súbory preprocesora ani konfiguráciu zostavenia, z ktorých vznikli.
Ako znovu čítať kaskádu
Hlavným dôvodom na formátovanie štýlov je pochopiť, prečo sa pravidlo uplatňuje alebo neuplatňuje. Keď je každý selektor na vlastnom riadku s odsadenými deklaráciami, kaskáda sa sleduje jednoduchšie: nájdete všetky pravidlá pre prvok, porovnáte ich špecifickosť, zistíte poradie a odhalíte zatúlané important, ktoré prepisovalo vaše úpravy. Mediálne dopyty a ich obsah sa zobrazia ako bloky, takže responzívne správanie sa skúma oveľa ľahšie než v minifikovanom súbore. Pred úpravami si na cielené skúmanie skopírujte celé pravidlo aj príslušný okolitý mediálny dopyt. Zobrazené štýly vysvetľujú iba časť kaskády: dôležité sú aj štýly priamo v atribútoch, ďalšie súbory štýlov, dedičnosť a aktuálny DOM. Vývojárske nástroje prehliadača ukážu, ktoré deklarácie sa na prvok skutočne uplatňujú. Naformátovaný súbor použite na pochopenie ich kontextu a správanie overte pri skúmanej veľkosti zobrazovacej oblasti. Ak automatické rozpoznávanie označí CSS ako JavaScript, skontrolujte zobrazený jazyk skôr, než sa na výsledok spoľahnete.
Podpora moderného CSS
Formátovač rozumie súčasnému CSS, nielen starším prvkom jazyka. Medzi podporované možnosti patria vlastné premenné, výrazy calc a clamp, skrátené zápisy pre grid a flexbox, kontajnerové dopyty, vnorené pravidlá, vrstvy, bloky supports a kľúčové snímky animácií. Dlhé zoznamy selektorov sa rozdelia na riadky, aby sa dali pohodlne čítať, a komentáre, ktoré zostavenie neodstránilo, sa zachovajú. Ak súbor kombinuje obyčajné CSS s vlastnosťami s prefixmi výrobcov prehliadačov, výsledok tieto deklarácie ponechá a upraví ich podľa štýlu formátovača.
Praktický tip pre zostavené frameworky
Po naformátovaní zostavených štýlov Tailwind alebo Bootstrap sa súbor rýchlo predĺži, desiatky tisíc riadkov nie sú nič nezvyčajné. Zapnite čísla riadkov a namiesto posúvania vyhľadajte názov triedy alebo vlastnosť pomocou vyhľadávania v prehliadači. Ak chcete súbor skôr zmenšiť než čítať, sústreďte sa na konfiguráciu zostavenia: nepoužívané pravidlá vznikli ešte pred spustením minifikácie.
Často kladené otázky
Môžem naformátovať zostavené štýly Tailwind?
Áno, ide o jedno z najčastejších použití tejto stránky. Počítajte s veľmi dlhým výsledkom, pretože framework vytvára pravidlo pre každú pomocnú triedu. Najpraktickejšie je zapnúť čísla riadkov a pohybovať sa v súbore pomocou vyhľadávania prehliadača.
Obnovia sa komentáre?
Komentáre, ktoré zostali v dodanom CSS, sa môžu objaviť aj v naformátovanom výstupe. Komentáre odstránené minifikátorom nemožno zo súboru obnoviť, vrátane vysvetlení, prečo pravidlo existuje. Ak potrebujete poznámky k návrhu, pokyny autora alebo históriu selektora, pozrite sa do pôvodného zdrojového repozitára.
Funguje nástroj aj so SCSS alebo Less?
Táto stránka je určená pre obyčajné CSS vrátane skompilovaného výstupu Sass alebo Less. Premenné, mixiny a direktívy špecifické pre preprocesory nie sú podporovaným vstupom. Najprv zdroje skompilujte príslušnými nástrojmi projektu a potom pomocou tohto editora preskúmajte výsledné štýly.