tigtools

CSS formázó

Illesszen be egy stíluslapot, hogy olvashatóvá tegye vagy tömörítse. A karakterláncok, az url() értékek és a megjegyzések egységként kezelődnek, így a belsejük nem sérül.

Böngészőben fut Regisztráció nélkül

Mód
Behúzás (szóközök)

Adjon meg bemenetet az eredmény megtekintéséhez.

Használata

  1. Illessze be a CSS-t a beviteli mezőbe, nyisson meg egy .css fájlt, vagy próbálja ki a példát.
  2. Válassza a Szépítés lehetőséget az olvasható kódért, vagy a Minimalizálást a legkisebb eredményért.
  3. Szépítéskor válasszon 2 szóközt, 4 szóközt vagy tabulátorokat.
  4. Másolja az eredményt, vagy töltse le .css fájlként. Ha a kapcsos zárójelek vagy az idézőjelek nem párosíthatók, a hibaüzenet tartalmazza a sort és az oszlopot.

Hogyan működik

A formázó először tokenekre bontja a stíluslapot: szimpla vagy dupla idézőjelben lévő szövegekre, url(…) értékekre, megjegyzésekre, kapcsos zárójelekre és pontosvesszőkre. Mivel a szövegek és az url() egyetlen tokent alkotnak, a data URI-ban lévő pontosvessző vagy a content: "{ }" belsejében lévő kapcsos zárójel soha nem zavarja meg a szerkezetet, és a tartalmuk pontosan másolódik.

A szépítés a szelektorlista minden szelektorát külön sorba teszi, szóközt rak a gyermek, testvér és szomszédos kombinátorok (>, ~, +) köré, és minden deklarációt „tulajdonság: érték;” formában ír saját sorba. Az @media, @supports, @layer, @container blokkok és a natív CSS egymásba ágyazás szintenként eggyel beljebb húzódnak. A blokk utolsó deklarációja után hiányzó pontosvesszőt pótolja. A megjegyzések a helyükön maradnak.

A tömörítés eltávolítja a megjegyzéseket (kivéve a /*! … */ licencmegjegyzéseket), összevonja a szóközöket, eltávolítja a kapcsos zárójelek, kettőspontok, pontosvesszők, vesszők és szelektor-kombinátorok körüli szóközöket, és elhagyja a záró kapcsos zárójel előtti pontosvesszőt. A jelentést megváltoztató szóközök megmaradnak: a leszármazott kombinátor a „.a .b” kifejezésben, a szóköz az „a :focus” kifejezésben, és az olyan értékeken belüli szóközök, mint a calc(100% - 2px). A „! important” normalizálva lesz: „!important”.

Az eszköz nem írja át az értékeket: a színek, mértékegységek és nullák a leírt formában maradnak, a szabályokat pedig nem vonja össze és nem rendezi át. Az egyszerű egymásba ágyazást használó SCSS- vagy Less-fájlok általában működnek, de a saját szintaxisukat, például a // sorvégi megjegyzéseket vagy a mixineket nem értelmezi.

Példák

Minifikált keretrendszer-fájl olvasása

Illesszen be egy egysoros bootstrap.min.css részletet, majd válassza a Szépítés lehetőséget 2 szóközzel, hogy minden szabály, a médialekérdezés és a beágyazott szabályaik külön, behúzott sorokban jelenjenek meg.

Kézzel írt stíluslap kiadása

Tömörítsen egy 12 KB-os, megjegyzéseket és behúzásokat tartalmazó stíluslapot, mielőtt beillesztené egy e-mail sablonba vagy egy oldal fejlécébe. Az összegzés mutatja a karakterszámot előtte és utána.

Hiányzó kapcsos zárójel megtalálása

Egy stíluslap a felénél már nem érvényesül. A formázó jelzi: „Ez a { nincs lezárva a hozzá tartozó } jellel”, és megadja annak a szabálynak a sorát, amelyikből hiányzik a záró kapcsos zárójel.

Gyakori kérdések

Biztonságos éles környezetben használni az eszközzel tömörített CSS-t?

Csak olyan megjegyzéseket és szóközöket távolít el, amelyeket a CSS figyelmen kívül hagy, így a szabályok ugyanúgy viselkednek. Nem végez olyan mélyebb optimalizálásokat, mint a build eszközök, például nem vonja össze a szabályokat és nem rövidíti a színeket, ezért az eredmény valamivel nagyobb lehet, mint az övék.

Miért marad meg a szóköz az „a :focus” kifejezésben?

Egy szelektorban a szóköz a leszármazott kombinátor. Az „a :focus” egy hivatkozáson belüli fókuszált elemet jelöl, míg az „a:focus” egy fókuszált hivatkozást. A szóköz eltávolítása megváltoztatná, hogy mely elemekre illeszkedik.

Tud SCSS-t vagy Less-t formázni?

A sima egymásba ágyazott szabályok megfelelően formázódnak. A csak előfeldolgozókban használt szintaxis – például a // megjegyzések, az argumentumos mixinek vagy az @if blokkok – nem értelmezett, ezért furcsán formázódhat; ellenőrizze az eredményt.

Eltávolítja a licencmegjegyzéseket a minimalizálás során?

A /*! kezdetű megjegyzések megmaradnak; ez a szokásos megoldás a licenc- és szerzői jogi közleményeknél. Minden más megjegyzés eltávolításra kerül.

Adatvédelem

A CSS feldolgozása kizárólag az Ön böngészőjében történik. Semmi nem kerül feltöltésre, tárolásra vagy elemzési adatok közé.