Hogyan formázhatok minifikált CSS-t olvashatóvá?

Illeszd be a minifikált CSS-t a beviteli mezőbe a Szépítés kiválasztásával, és válassz 2 vagy 4 szóköz Behúzás értéket. A szelektorok és deklarációk külön sorokba kerülnek. Ezután nyomd meg a Másolás vagy Letöltés gombot egy .css fájlhoz.

Tudja ábécé sorrendbe rendezni a CSS tulajdonságokat?

Igen. Jelöld be a Tulajdonságok ábécé szerinti rendezése opciót, és az egyes blokkokban lévő deklarációk tulajdonságnév szerint rendeződnek. Csak a blokkon belül rendez át, ami megváltoztathatja az eredményt, ha a későbbi deklarációk felülírják a korábbiakat.

Hogyan minifikálhatok CSS-t ezzel az eszközzel?

Válaszd a Minifikálás opciót a Szépítés helyett. A szóközök és megjegyzések eltávolításra kerülnek, és egy méret-összehasonlítás mutatja, mennyivel kisebb a kimenet. A Letöltés minified.css néven menti.

Kezeli a @media szabályokat, a beágyazást és az url() értékeket?

Igen. Az elemző követi az idézőjeleket és zárójeleket, így az url()-en vagy stringeken belüli pontosvesszők vagy kapcsos zárójelek nem bontják meg a deklarációkat. A beágyazott blokkok, mint a @media, @supports és a natív CSS beágyazás, mélyebb szinteken kerülnek behúzásra.

Feltöltődik valahova a stíluslapom?

Nem. Az elemző az oldalba van írva, és gépelés közben a böngésződben formázza a CSS-t. Semmi sem kerül elküldésre szerverre, és nem használunk harmadik féltől származó formázó könyvtárat.

Igen. Minden eszköz ingyenesen használható, fiók és bankkártya nélkül. A munka a szervereink helyett a te eszközödön fut, ezért maradhat ingyenes a használata.

Igen. Az iOS és Android jelenlegi mobilböngészőiben fut, telepítés nélkül.

🎨

Ingyenes CSS-szépítő

Formázza a minifikált CSS-t egységes behúzással, vagy minifikálja. Opcionális betűrendes tulajdonságrendezés az áttekinthető különbségekért.

A böngésződben futNincs regisztráció, nincs felugró ablakNem szükséges bejelentkezésÖrökre ingyenes

Betöltés után offline is működik

Behúzás:

Tulajdonságok ábécé szerinti rendezése

Húzza ide a fájlt, vagy kattintson a tallózáshoz

CSS · az eszközödön dolgozza fel

vagy nyomjon Ctrl+V-t a vágólapról való beillesztéshez

Fájlok tallózása

Minifikált / rendezetlen CSS

Formázott CSS

A kimenet itt jelenik meg…

Gyakori felhasználások

CSS termelés hibakereséseTekintse meg a termelési helyekről származó minifikált CSS-t olvasható formátumban a stílus megtalálásához és fordított mérnökeléséhez.
Csapat CSS stílus kikényszerítéseFuttassa a csapat által benyújtott CSS-t konzisztens szépítőn keresztül, hogy a diffs tartalomról szóljanak, nem formázásról.
Szállító-előtagos CSS formázásaA szállító-előtagos CSS (autoprefixer kimenet) gyakran sok -webkit-, -moz-, -ms- variánst tartalmaz. Formázás vizsgálathoz.
Tanuljon a Pro CSS-bőlTanulmányozzon CSS-t a híres tervezési rendszerekből a lefordított kimenetük formázásával.
CSS formázása hibajelentésekhezCSS hibák benyújtásakor a formázott CSS sokkal könnyebb az értékelőknek olvasni és megérteni.

Hogyan működik

Ez az eszköz CSS-t formáz egy kézzel írt rekurzív parserrel, amely közvetlenül az oldalba van építve — nincs harmadik féltől származó könyvtár, nincs szerverhívás. A parser karakterenként megy végig a CSS-en, helyesen kezelve az idézett karakterláncokat, az url() értékeket, egymásba ágyazott at-szabályokat és megjegyzéseket, amelyek egyszerűbb regex-alapú megközelítéseket megzavarnának.

1
Karakterszintű tokenizálás
A walkCss függvény egyszerre egy karaktert szkennel a nyers bemenetből, nyomon követve az idézetjel-állapotot és a zárójelmélységet, így az url()-en, szövegértékeken vagy megjegyzéseken belüli pontosvesszők vagy zárójelek soha nem kerülnek téves összekeverésre a strukturális elválasztókkal.
2
Blokk és deklaráció elválasztás
Amikor a szkenner megtalál egy legfelső szintű nyitó zárójelet, kivonja a prelude-ot (a szelektort vagy at-szabály kulcsszót), és rekurzívan feldolgozza a blokktörzset — amely maga is tartalmazhat egymásba ágyazott szabályokat (@media, @supports, natív CSS ágyazás), amelyeket mélyebb rekurziós szinten kezel.
3
Tulajdonságrendezés és behúzás
Az egyes blokkokon belüli deklarációk egy futásba gyűjtésre kerülnek, majd opcionálisan ábécésorrendbe rendeződnek a tulajdonságnév szerint, mielőtt a kiválasztott behúzási szélességgel (2 vagy 4 szóköz) kiírásra kerülnének. A Minify mód teljesen kihagyja a bjeline-ket, és eltávolítja a megjegyzéseket.
4
Azonnali böngészőn belüli kimenet
Az eredmények gépelés közben jelennek meg egy useMemo hookon keresztül — semmi nem kerül elküldésre sehova. A formázott vagy minifikált CSS a vágólapra másolható vagy .css fájlként letölthető, és a panel megmutatja a méretkülönbséget az eredetihez képest.