Ifformatta u indenta CSS

jifformatta r-regoli CSS tiegħek biex jagħmilhom qari u jinftiehmu, jiffaċilita l-iżvilupp u l-manutenzjoni

Għaliex tuża għodda għall-ifformattjar CSS?

L-ifformattjar tal-kodiċi CSS huwa essenzjali għall-iżviluppaturi biex iżommu kodiċi nadif u li jinqara. Din l-għodda tissimplifika l-proċess billi tippermetti li l-kodiċi CSS jiġi fformattjat malajr u b'mod preċiż, u tagħmel il-manutenzjoni u l-kollaborazzjoni fuq proġetti aktar faċli.

Karatteristiċi tal-Għodda tal-Formattjar CSS

Din l-għodda tal-ifformattjar tas-CSS tippermettilek li ddaħħal il-kodiċi CSS u tifformatjah għal leġibilità aħjar. Tneħħi kummenti, spazji u tabs mhux meħtieġa, u żżid indentazzjoni xierqa għar-regoli u l-proprjetajiet CSS.

Kif tuża l-għodda tal-ifformattjar CSS

Biex tuża l-għodda tal-ifformattjar CSS, segwi dawn il-passi sempliċi:

  1. Daħħal il-kodiċi CSS tiegħek fil-qasam ipprovdut.
  2. Ikklikkja l-buttuna "Format". L-għodda se tifformattja l-kodiċi CSS għal leġibilità aħjar.
  3. Ikkopja l-kodiċi CSS ifformattjat biex tużah fil-proġetti tiegħek.

Eżempju tal-użu tal-għodda tal-ifformattjar CSS

Hawn eżempju ta 'kodiċi CSS qabel u wara l-ifformattjar:


Qabel l-ifformattjar:
body{font-family:Arial,sans-serif;background-color:#f0f0f0;margin:0;padding:0;}.container{width:80%;margin:0 auto;}.header{background-color:#333;color:#fff;padding:20px;text-align:center;}

Wara l-ifformattjar:
korp {
    font-family: Arial, sans-serif;
    kulur tal-isfond: #f0f0f0;
    marġini: 0;
    padding: 0;
}

.kontenitur {
    wisa ': 80%;
    marġini: 0 auto;
}

.header {
    l-isfond-kulur: #333;
    kulur: #fff;
    padding: 20px;
    text-align: center;
}

Mistoqsijiet frekwenti

X'inhi d-differenza bejn formatter CSS, minifier u beautifier?

Formatter CSS (jew beautifier) jikteb mill-ġdid fajl kompatt f'verżjoni indentata u li tinqara. Minifier jagħmel l-oppost: ineħħi l-ispazji, il-linji ġodda u l-kummenti biex inaqqas id-daqs tal-fajl moqdi fil-produzzjoni. L-għodda tagħna tiffoka fuq l-ifformattjar: tieħu folja CSS minifikata jew indentata ħażin u tifformatjaha mill-ġdid b'indentazzjoni konsistenti, proprjetà għal proprjetà.

L-ifformattjar jippreserva l-kummenti CSS?

Il-kummenti /* ... */ huma ppreservati kif inhuma awtomatikament. Il-kummenti tal-liċenzja fin-naħa ta' fuq tal-fajl (/*! ... */) kif ukoll l-annotazzjonijiet tal-utilità (TODO, FIXME) jibqgħu intatti, fuq il-linja tagħhom stess. Jekk trid tneħħihom biex tipproduċi fajl ta 'produzzjoni, uża minifier iddedikat minflok.

Il-prefissi tal-bejjiegħ (-webkit-, -moz-) huma appoġġjati?

Iva. Il-prefissi tal-bejjiegħ huma ttrattati bħal proprjetajiet ordinarji: huma indentati u allinjati mal-bqija tal-blokka. Il-formatter ma jiġġenerax jew ineħħi prefissi: sempliċement jifformattja dak li huwa pprovdut. Biex iżżid awtomatikament prefissi neqsin, uża Autoprefixer fil-pipeline tal-bini tiegħek.

Il-formatter jieħu ħsieb il-mistoqsijiet tal-midja u r-regoli nested?

Iva. @media, @supports, @keyframes u at-regoli oħra huma indentati bir-regoli tagħhom imdaħħla ġewwa ċ-ċingi. Nesting CSS nattiv (& f'regola ġenitur) huwa wkoll rikonoxxut u fformattjat b'mod korrett, bħal blokki SCSS jew Inqas kompatibbli mas-sintassi CSS standard.

Nista’ nifformattja SCSS, Less jew Stylus?

L-għodda timmira għal CSS standard. Sintassi estiżi (SCSS mixins, Inqas varjabbli b'@, sintassi mingħajr ċingi Stylus) mhumiex mifhuma mill-parser u jistgħu jipproduċu riżultat degradat. Għal dawn il-lingwi, minflok uża sass --style=expanded, lessc jew formatter iddedikat bħal Prettier bil-plugin it-tajjeb.

Il-formatter jivvalida s-sintassi tas-CSS?

Il-formatter jagħmel analiżi sintattika minima: jidentifika blokki, seletturi u dikjarazzjonijiet. Jirrapporta żbalji kbar (ċinga mhux magħluqa, punt u virgola nieqsa fl-aħħar tal-blokk) iżda ma jivvalidax ismijiet jew valuri tal-proprjetà. Għal validazzjoni kompleta, uża s-servizz tal-W3C CSS Validator.

Eżempju ta' talba

curl -X POST https://cdrn.fr/api/v1/tools/css-formatter/execute \
  -H "Content-Type: application/json" \
  -d '{"input":"..."}'

Skema ta' input

Kamp Tip Meħtieġ Default
input text

Endpoints

  • GET https://cdrn.fr/api/v1/tools - telenka l-għodod kollha disponibbli
  • GET https://cdrn.fr/api/v1/tools/css-formatter - tikseb l-iskema ta' din l-għodda
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - teżegwixxi din l-għodda b'payload JSON