Kif nifformattja CSS minimizzat biex ikun jista' jinqara?

Ikkopja u waħħal is-CSS minimizzat fil-kaxxa bil-buttuna Imbelleza magħżula u agħżel Indentazzjoni ta' 2 jew 4 spazji. Is-selectors u d-dikjarazzjonijiet jitqiegħdu fuq linji separati. Imbagħad agħfas Kopja jew Niżżel biex tikseb fajl .css.

Jista' jissortja l-proprjetajiet tas-CSS f'ordni alfabetiku?

Iva. Immarka Issortja l-proprjetajiet alfabetikament u d-dikjarazzjonijiet f'kull blokk jiġu ordnati skont l-isem tal-proprjetà. L-ordni jinbidel biss fi ħdan il-blokk stess, ħaġa li tista' taffettwa r-riżultat jekk tiddependi fuq proprjetajiet sussegwenti li jissostitwixxu dawk ta' qabilhom.

Kif nimmimizza s-CSS b'din l-għodda?

Agħżel Immiminizza minflok Imbelleza. L-ispazji bojod u l-kummenti jitneħħew, u tqabbil tad-daqs juri kemm iċċekken il-kodiċi. Niżżel tissejvjah bħala minified.css.

Jappoġġja regoli @media, nesting u valuri url()?

Iva. Il-parser isegwi l-virgoletti u l-parentesi, għalhekk punti u virgoli jew parentesi graffi ġewwa url() jew strings ma jaqsmux id-dikjarazzjonijiet. Blokki mdaħħla ġo xulxin (nested) bħal @media, @supports u CSS nesting nattiv jinkitbu b'indentazzjoni aktar profonda.

L-i-stylesheet tiegħi tittella' xi mkien?

Le. Il-parser huwa mibni fil-paġna stess u jifformattja s-CSS fil-browser waqt li tkun qed tittajpja. Xejn ma jintbagħat lil server, u ma tintuża l-ebda librerija ta' formattjar ta' terzi persuni.

Iva. Kull għodda tista' tintuża b'xejn, mingħajr kont u mingħajr karta ta' kreditu. Ix-xogħol isir fuq it-tagħmir tiegħek minflok fuq is-servers tagħna, u huwa dan li jippermettilha tibqa' taħdem b'xejn.

Taħdem fuq il-mowbajl?

Iva. Jaħdem fil-browsers moderni tal-mowbajl fuq iOS u Android, mingħajr xejn x'tinstalla.

🎨

Beautifier CSS b'xejn

Ifformatja CSS minifikat b'indentazzjoni konsistenti, jew minifikah. Issortjar alfabetiku b'għażla tal-proprjetajiet għal differenzi prevedibbli.

Jaħdem fil-browser tiegħekMingħajr reġistrazzjoni, mingħajr pop-upsEbda login meħtieġĦieles għal dejjem

Jaħdem offline ladarba mgħobbi

Indentazzjoni:

Issortja l-proprjetajiet alfabetikament

Waqqa' fajl hawn, jew ikklikkja biex tfitteq

CSS · ipproċessat fuq it-tagħmir tiegħek

jew agħfas Ctrl+V biex twaħħal mill-clipboard

Agħżel fajls

CSS minifikat / imħawwad

CSS imtejjeb

L-output jidher hawn…

Użi komuni

Tiddebugja Production CSSAra minified CSS minn siti tal-produzzjoni f'format leġġibbli biex issib u reverse-engineer styling.
Iffrizza Team CSS StyleJaħdem CSS mogħti mit-team permezz ta' beautifier konsistenti sabiex diffs huma dwar il-kontenut, mhux formatting.
Formattja Vendor-Prefixed CSSVendor-prefixed CSS (autoprefixer output) ħaffa għandha ħafna -webkit-, -moz-, -ms- variants. Formattja biex tispettja.
Tgħallem minn Pro CSSStudjaw CSS minn famużi design systems billi formattja l-output magħqud tagħhom.
Formattja CSS għal Bug ReportsMeta ffajlja CSS bugs, formatted CSS huwa ħafna eħfef għall-reviewers biex jinqraw u jifhmu.

Kif Taħdem

Din l-għodda tifformatta CSS bl-użu ta' parser rikursiv miktub bl-idejn mibni direttament fil-paġna — l-ebda librerija ta' parti terza, l-ebda sejħa lil server. Il-parser jimxi mill-CSS tiegħek karattru b'karattru, jimmaniġġja korrettament strings bejn virgoletti, valuri url(), at-rules imbejta, u kummenti li kienu jħawdu approċċi iktar sempliċi bbażati fuq regex.

1
Tokenizzazzjoni fil-livell tal-karattri
Il-funzjoni walkCss tiskennja d-dħul mhux ipproċessat karattru b'karattru, issegwi l-istat tal-virgoletti u l-fond tal-parentesi biex semikoloni jew parentesi ġewwa url(), valuri ta' string, jew kummenti qatt ma jinftiehmu ħażin bħala delimitaturi strutturali.
2
Separazzjoni tal-blokk u d-dikjarazzjoni
Meta l-iskenner isib parentesi graffa tal-ftuħ fil-livell ta' fuq, jiġbed il-prelude (is-selettur jew il-kelma ewlenija at-rule) u jipproċessa rikursivament il-korp tal-blokk — li nnifsu jista' jkun fih regoli nested (@media, @supports, CSS nesting nattiv) immaniġġjati fi profondità ta' rikursjoni akbar.
3
Ordinar tal-proprjetajiet u indentazzjoni
Dikjarazzjonijiet f'kull blokk jinġabru f'run, imbagħad mhux obbligatorjament ordnati alfabetikament skont l-isem tal-proprjetà qabel ma jinkitbu bil-wisa' tal-indentazzjoni magħżula (2 jew 4 spazji). Il-modalità Immiminizza taqbeż l-ispazji vojta kompletament u tneħħi l-kummenti.
4
Ħruġ instantanju fil-browser
Ir-riżultati jidhru hekk kif tittajpja permezz ta' hook useMemo — xejn ma jintbagħat imkien. Il-CSS formattat jew immiminizzat jista' jiġi kkopjat fil-clipboard jew imniżżel bħala fajl .css, u l-panel juri d-differenza tad-daqs meta mqabbla mal-oriġinali.