Ugrás a tartalomhoz
TextArray
100% helyi

CSS-formázó

Formázd olvasható, behúzott szabályokká a minifikált vagy rendezetlen CSS-t.

Bemenet
Kimenet

CSS-formázó

Illessz be minifikált vagy kézzel összekuszált CSS-t, és a formázó áttekinthető, olvasható stíluslappá bontja: soronként egy deklaráció, a szelektor a nyitó kapcsos zárójellel egy sorban, a záró zárójel külön sorban, és üres sor a legfelső szintű szabályok között. A beágyazott blokkok, mint a @media, a @supports és a beágyazott szelektorok, egy szinttel mélyebbre húzódnak, így a stíluslap szerkezete első pillantásra világos.

Az eszköz karakterről karakterre olvassa a CSS-t, nem durva mintákkal darabolja, ezért nem akad meg a bonyolult tartalmon sem. A karakterláncok megőrzik pontos tartalmukat, így a content: "a{b}" a benne lévő zárójelekkel együtt megmarad. A url() tartalma szó szerint másolódik, így egy saját pontosvesszőkkel és kettőspontokkal teli adat-URI — url(data:image/png;base64,...) — teljesen érintetlen marad. A megjegyzések szóról szóra a saját sorukban maradnak az aktuális behúzással.

A kimenetet három beállítás hangolja. A behúzás két szóköz, négy szóköz vagy tabulátor között vált. A minden szelektor külön sorban a vesszős lista minden szelektorát külön sorba teszi, ami hosszú, csoportosított szabályoknál és tisztább különbségeknél jön jól. Az üres sor a szabályok között kikapcsolható, ha tömörebb stíluslapot szeretnél. Az élő számláló gépelés közben összesíti a szabályokat, a deklarációkat és a kimeneti sorokat, a szabályok számát kiemelve.

Ez a CSS-minifikáló párja: használd arra, hogy egy tömörített éles fájlt újra szerkeszthetővé tégy, több szerző következetlen kódját egységesítsd, vagy egyszerűen elolvass egy nem általad írt stíluslapot. Minden teljes egészében a böngésződben fut — a CSS-ed sehová nem töltődik fel.

Gyakori kérdések

Megváltoztatja a CSS-értékeket vagy a tulajdonságneveket?
Nem. Csak szóközöket és sortöréseket ad hozzá és normalizál. A szelektorok, tulajdonságok, értékek, színek, egységek, a url() tartalma és a megjegyzések pontosan úgy maradnak, ahogy leírtad.
Elrontják a formázást a karakterláncokban vagy url()-ben lévő zárójelek?
Nem. Egy karakterolvasó követi a karakterlánc, a megjegyzés és a url() állapotát, így a content: "a{b}" és a url(data:...;base64,...) szó szerint másolódik, és soha nem számít szerkezetnek.
Mit csinál a „Minden szelektor külön sorban"?
A vesszővel elválasztott lista minden szelektorát külön sorba teszi, így a h1, h2, h3 három sor lesz a nyitó zárójel felett. A :is() vagy az attribútumszelektorok vesszői soha nem törnek meg.
Ki tudja javítani az érvénytelen CSS-t?
A tőle telhető legjobban formáz, és hibás bemeneten sem hibázik, de nem validálja és nem javítja a CSS-t. A hiányzó zárójeleket vagy elszórt karaktereket úgy rendezi el, ahogy a szerkezet engedi.
Feltöltődik valahová a CSS-em?
Nem. A formázás teljes egészében a böngésződben fut, és a CSS-ed soha nem hagyja el az eszközödet.