A formatter nem egyszerűen minden kapcsos zárójelnél és pontosvesszőnél darabolja fel a kódot, hanem szintaxisérzékeny vizsgálót használ. Követi a karakterláncokat, megjegyzéseket, függvényeket, attribútumszelektorokat és egymásba ágyazott blokkokat, ezért az URL-ek és idézett értékek írásjelei érintetlenek maradnak.
Ingyenes CSS Formatter
Teljesen a böngésződben fut - feltöltés és regisztráció nélkül.
CSS-bemenet
Formázott CSS
Illesszen be formázandó CSS-t
Mire szolgál a CSS formatter?
A CSS formatter a tömörített vagy egyenetlenül tagolt stíluslapot következetes behúzással és sortörésekkel teszi olvashatóvá. Illessze be a CSS-t, válasszon két szóközt, négy szóközt vagy tabulátort, majd másolja vagy töltse le az eredményt. A feldolgozás a böngészőben történik, a deklarációk sorrendje pedig megmarad.
Így működik
- 1CSS beillesztése. Illesszen a beviteli szerkesztőbe stíluslapot, szelektorblokkot vagy tömörített CSS-részletet.
- 2Behúzás kiválasztása. Válasszon két szóközt, négy szóközt vagy tabulátort. A formázott eredmény azonnal frissül.
- 3Állapot ellenőrzése. Nézze át a szerkezeti adatokat, vagy javítsa a lezáratlan határolójelet, megjegyzést vagy karakterláncot.
- 4Másolás vagy letöltés. Másolja a formázott CSS-t a vágólapra, vagy mentse formatted.css néven.
Kinek hasznos
- Front-end fejlesztők olvasható formára bonthatják ki az éles CSS-t az egyszerűbb ellenőrzéshez és hibakereséshez.
- Kódellenőrök egységesíthetik a behúzást egy stíluslap vagy pull request részlet összehasonlítása előtt.
- Tanulók könnyebben átláthatják a beágyazott media queryket, szelektorokat és deklarációs blokkokat.
- Támogatási és QA-csapatok rendezhetik a böngésző vizsgálójából kimásolt CSS-t, mielőtt hibajegyhez csatolják.
Gyakori kérdések
Ingyenes a CSS formatter?
Igen. Annyi CSS-t formázhat, amennyit a böngésző kényelmesen kezel. Nincs szükség fiókra vagy telepítésre, használati keret sincs, az eredmény pedig azonnal megjelenik.
Feltöltődik a CSS-em egy szerverre?
Nem. A formázás helyben, a böngészőben fut. A beillesztett CSS az oldal szerkesztőjében marad, és nem kerül API-hoz, így bizalmas projektkóddal is használható.
Mennyi CSS-t formázhatok?
Nincs rögzített karakterkorlát. A rendkívül nagy, generált stíluslapok feldolgozása az eszköz memóriájától és a böngészőtől függ, a szokásos webhely-, komponens- és e-mail-CSS azonban gyorsan elkészül.
A formázás megváltoztatja a CSS működését?
A formatter a szóközöket és sortöréseket módosítja, de megtartja a szelektorokat, deklarációkat, megjegyzéseket, idézett karakterláncokat és azok sorrendjét. Közzététel előtt ellenőrizze az eredményt, különösen kísérleti szintaxis vagy szóközérzékeny escape használatakor.
Ellenőrzi az eszköz a CSS-tulajdonságok érvényességét?
Nem. Csak a kapcsos, szögletes és kerek zárójelek, megjegyzések és karakterláncok lezárását ellenőrzi. Nem állapítja meg, hogy az egyes tulajdonságok, értékek vagy böngészőspecifikus funkciók szemantikailag érvényesek-e.
Formázhatók a media queryk és a beágyazott CSS?
Igen. A media, supports, container, layer és keyframes típusú at-rule blokkok a mélységüknek megfelelő behúzást kapnak. A modern beágyazott szelektorokat is rendezi a karakterláncok és függvényargumentumok módosítása nélkül.