Kuidas vormindada minifitseeritud CSS loetavaks?

Kleebi minifitseeritud CSS sisestuskasti, kui Iluista on valitud, ja vali Taane 2 või 4 tühikut. Selektorid ja deklaratsioonid paigutatakse eraldi ridadele. Seejärel vajuta Kopeeri või Laadi alla, et saada .css fail.

Kas see oskab CSS-i omadusi tähestikuliselt sorteerida?

Jah. Märgi Sorteeri omadused tähestikuliselt ja iga ploki deklaratsioonid sorteeritakse omaduse nime järgi. See järjestab ümber ainult ploki sees, mis võib tulemust muuta, kui toetud sellele, et hilisemad deklaratsioonid varasemad üle kirjutavad.

Kuidas selle tööriistaga CSS-i minifitseerida?

Vali Iluista asemel Minifitseeri. Tühikud ja kommentaarid eemaldatakse ning suuruse võrdlus näitab, kui palju väiksem on väljund. Laadi alla salvestab selle kui minified.css.

Kas see käsitleb @media reegleid, pesitsemist ja url() väärtusi?

Jah. Parser jälgib jutumärke ja sulge, nii et semikoolonid või looksulud url() või stringide sees ei tükelda deklaratsioone. Pesastatud plokid nagu @media, @supports ja natiivne CSS-pesitsus taandatakse sügavamatel tasemetel.

Kas minu stiilileht laaditakse kuhugi üles?

Ei. Parser on lehe sisse kirjutatud ja vormindab sinu CSS-i brauseris seda tippides. Midagi ei saadeta serverisse ja ei kasutata kolmanda osapoole vormindamise teeki.

Kas see on tõesti tasuta?

Jah. Iga tööriist on tasuta kasutamiseks, ei nõua kontot ega krediitkaarti. Töö toimub sinu seadmes, mitte meie serverites, mis võimaldabki seda tasuta pakkuda.

Kas see töötab mobiilseadmetes?

Jah. See töötab tänapäevastes mobiilibrauserites iOS-is ja Androidis ning midagi pole vaja installida.

🎨

CSS kaunistaja tasuta

Vorminda minimeeritud CSS ühtse taandega või minimeeri see. Valikuline omaduste tähestikuline sorteerimine selgemate erinevuste jaoks.

Töötab sinu brauserisRegistreerimist pole, hüpikaknaid poleSisselogimist ei nõutaIgavesti tasuta

Töötab võrguühenduseta pärast laadimist

Taane:

Sorteeri omadused tähestikuliselt

Lohistage fail siia või klõpsake sirvimiseks

CSS · töödeldakse sinu seadmes

või vajutage lõikelaualt kleepimiseks Ctrl+V

Sirvi faile

Minifitseeritud / segane CSS

Vormindatud CSS

Väljund ilmub siia…

Levinud kasutusviisid

Siluge tootmise CSS-iVaadake minifitseeritud CSS-i tootmise veebisaitidest loetavas formaadis stiili otsimiseks ja pöördtalguks.
Rakenda meeskonna CSS stiiliKäivitage meeskonna esitatud CSS läbi järjekindla kaunistaja, nii et erinevused on sisu, mitte vormindamine.
Vormindage müüjate eelliidete CSS-iMüüjate eelliidete CSS-il (autoprefixer väljund) on sageli palju -webkit-, -moz-, -ms- varianti. Vormindage inspekteerimiseks.
Õppige Pro CSS-istÕppige CSS-i tuntud kujunduse süsteemidest nende kompileeritud väljundi vormindamise abil.
Vormindage CSS vearaportiteleCSS vigade teatamisel on vormindatud CSS palju lihtsam lugeda ja mõista ülevaatajatele.

Kuidas see töötab

See tööriist vormindab CSS-i, kasutades käsitsi kirjutatud rekursiivset parserit, mis on integreeritud otse lehele — kolmanda osapoole teeki ega serverikutset pole. Parser käib sinu CSS-i läbi tähemärk-tähemärgi haaval, käsitledes korrektselt jutumärkides olevaid stringe, url() väärtusi, pesastatud @-reegleid ja kommentaare, mis segaks lihtsamaid regulaaravaldistel põhinevaid lähenemisi.

1
Tähemärgitasandi tokeniseerimine
Funktsioon walkCss skaneerib toorest sisendit ühe tähemärgi kaupa, jälgides jutumärkide olekut ja sulgude sügavust, nii et semikoolonid või lokkis sulud url()'i, stringiväärtuste või kommentaaride sees ei satuks kunagi struktuurseteks eraldajateks.
2
Plokkide ja deklaratsioonide eraldamine
Kui skanner leiab ülemise taseme avava lokkis sulu, eraldab see preludiumi (selektori või @-reegli märksõna) ja töötleb rekursiivselt ploki keha — mis ise võib sisaldada pesastatud reegleid (@media, @supports, natiivne CSS pesastamine), mida käsitletakse sügavamal rekursioonitasandil.
3
Omaduste sortimine ja sisennemine
Iga ploki sisesed deklaratsioonid kogutakse seeriasse, seejärel valikuliselt sorditakse tähestikuliselt omaduse nime järgi, enne kui need kirjutatakse välja valitud sisenevahega (2 või 4 tühikut). Minifitseerimise režiim jätab tühikud täielikult vahele ja eemaldab kommentaarid.
4
Kohene brauseri-sisene väljund
Tulemused ilmuvad kirjutades useMemo hooki abil — midagi ei saadeta kuhugi. Vormindatud või minifitseeritud CSS-i saab kopeerida lõikelauale või laadida alla .css failina, ja paneel näitab suurusevahe võrreldes originaaliga.