Gør minificeret CSS læsbart online
Indsæt et komprimeret stylesheet, og læs det ordentligt igen. Selektorer får deres egne linjer, hver deklaration står for sig, og blokke og media queries indrykkes, som du selv ville skrive dem.
Hvorfor CSS i produktion fylder én lang linje
Stylesheets minificeres af samme grund som scripts: CSS blokerer gengivelsen, så hver sparet byte kan forkorte tiden, før siden vises. cssnano, Lightning CSS og optimeringerne i Sass og PostCSS fjerner mellemrum og kommentarer, forkorter farveværdier, samler gentagne selektorer og fjerner unødvendige semikoloner. Browseren behøver ingen af disse læsehjælpemidler. Resultatet er en mindre fil, men det er næsten umuligt at følge reglerne, når du skal fejlfinde et layout.
Se kaskaden tydeligt
Når hver selektor står på sin egen linje med deklarationerne indrykket nedenunder, kan du følge kaskaden: finde alle regler for et element, sammenligne deres specificitet, se hvilken der kommer sidst og opdage den vildfarne important, der tilsidesætter dit arbejde. Media queries og deres indhold vises som tydelige blokke. Det gør responsiv adfærd langt lettere at undersøge end i en komprimeret fil, hvor blokkenes grænser er skjult mellem tusindvis af tegn.
Moderne CSS understøttes
Formatteren forstår moderne CSS. Brugerdefinerede egenskaber, calc- og clamp-udtryk, forkortelser til grid og flexbox, container queries, indlejrede regler, layers, supports-blokke og keyframes formateres korrekt. Lange lister af selektorer fordeles over flere linjer, så du kan læse dem, og kommentarer, der overlevede bygningen, bevares. Hvis filen blander almindelig CSS og egenskaber med leverandørpræfikser, bliver begge dele bevaret og blot sat tydeligere op.
Et praktisk tip til kompilerede frameworks
Når du formaterer et kompileret Tailwind- eller Bootstrap-stylesheet, bliver filen hurtigt meget lang. Titusindvis af linjer er normalt. Slå linjenumre til, og brug browserens søgefunktion til at finde det klassenavn eller den egenskab, du undersøger, frem for at rulle gennem hele filen. Vil du gøre filen mindre, er det byggekonfigurationen, du skal se på, for de ubrugte regler blev genereret, allerede før minificeringen begyndte.
Ofte stillede spørgsmål
Kan jeg formatere et kompileret Tailwind-stylesheet?
Ja, det er en almindelig anvendelse af denne side. Resultatet bliver meget langt, fordi frameworket genererer en regel pr. utility-klasse. Slå linjenumre til, og brug browserens søgning for at finde rundt i filen.
Bliver kommentarer genskabt?
Kun de kommentarer, der stadig er i filen, kan vises. De fleste minificeringsværktøjer sletter alle kommentarer bortset fra juridiske meddelelser. Slettede kommentarer kan ikke hentes tilbage. Formatteren bevarer og opstiller dem, som overlevede.
Virker det med SCSS eller Less?
Siden er beregnet til almindelig CSS, som browseren faktisk downloader. Kildefiler med variabler, mixins og syntaks, der er særlig for SCSS eller Less, er ikke det tilsigtede input. Standardiseret indlejret CSS understøttes dog.