CSS formázása online
Adj meg egy tömörített stíluslapot, és olvasd újra kényelmesen. A szelektorok külön sorba kerülnek, soronként egy deklaráció jelenik meg, a blokkok és médialekérdezések pedig olyan behúzást kapnak, ahogyan kézzel írnád őket.
Miért egysoros az éles CSS?
A stíluslapokat ugyanazért minifikálják, mint a szkripteket: a CSS blokkolhatja a megjelenítést, ezért minden megspórolt bájt hatással lehet az oldal kirajzolási sebességére. A cssnano, Lightning CSS, valamint a Sass és PostCSS optimalizálói eltávolítják a szóközöket és megjegyzéseket, rövidítik a színértékeket, összevonják az ismétlődő szabályokat, és elhagyják a blokkok utolsó pontosvesszőjét. A segédosztályokra épülő keretrendszerek még sűrűbb eredményt adnak: egy lefordított Tailwind-stíluslap ezernyi apró szabályt tartalmazhat, szinte elválasztás nélkül.
A kaszkád újra követhető
A stíluslap formázásának legfőbb célja megérteni, hogy egy szabály miért érvényesül vagy miért nem. Ha minden szelektor külön sorba kerül, alatta behúzott deklarációkkal, már követhető a kaszkád. Megkeresheted az adott elemre ható szabályokat, összehasonlíthatod a specificitásukat, láthatod a sorrendjüket, és megtalálhatod azt az eltévedt important jelölést, amely végig felülírta a munkádat. A médialekérdezések és tartalmuk ismét jól elkülönülő blokkok lesznek, így a reszponzív viselkedés is könnyebben megérthető.
Modern CSS támogatása
A formázó a mai CSS-t kezeli. Az egyéni tulajdonságok, calc és clamp kifejezések, grid- és flexbox-rövidítések, container query szabályok, beágyazások, rétegek, supports blokkok és keyframes animációk megfelelő formázást kapnak. A hosszú szelektorlisták több sorba törnek, hogy újra áttekinthetők legyenek, a build során megmaradt megjegyzések pedig megőrződnek. Ha a fájl szabványos CSS mellett gyártói előtagos tulajdonságokat is tartalmaz, mindkettő megmarad; csak az elrendezésük válik világosabbá.
Gyakorlati tipp lefordított keretrendszerekhez
Egy lefordított Tailwind- vagy Bootstrap-stíluslap formázás után nagyon hosszú lehet, akár több tízezer soros is. Kapcsold be a sorszámokat, és görgetés helyett a böngésző keresőjével keresd meg a kívánt osztályt vagy tulajdonságot. Ha viszont a fájl méretét szeretnéd csökkenteni, azt elsősorban a build beállításainál kell megoldani. A felesleges szabályok ugyanis már a minifikálás előtt létrejöttek, a formázó pedig ezeket nem törli és nem optimalizálja.
Gyakori kérdések
Formázható lefordított Tailwind-stíluslap?
Igen, ez az oldal egyik leggyakoribb felhasználása. Hosszú kimenetre számíts, mert a keretrendszer minden segédosztályhoz külön szabályt készít. A sorszámok és a böngésző keresője együtt segítenek eligazodni benne.
Visszaállnak a megjegyzések?
Csak a megmaradt megjegyzések láthatók. A legtöbb minifikáló a jogi megjegyzések kivételével mindent töröl, és a törölt szöveg nem állítható vissza. A formázó a fájlban még szereplő megjegyzéseket őrzi meg és rendezi el.
SCSS vagy Less is használható?
Ez az oldal szabványos CSS-hez készült, vagyis ahhoz, amit a böngészők ténylegesen letöltenek. Az SCSS- vagy Less-specifikus változókat, mixineket és saját szintaxist tartalmazó források nem a tervezett bemenetek, bár a szabványos beágyazott CSS támogatott.