CDRN

Vorminda ja taanda CSS

  • Töölaud
  • Dokumentatsioon
  • API
vormindab teie CSS-reeglid, et need oleksid loetavad ja mõistetavad, hõlbustades arendamist ja hooldust

Miks kasutada CSS-vormingu tööriista?

CSS-koodi vormindamine on arendajatele puhta ja loetava koodi säilitamiseks hädavajalik. See tööriist lihtsustab protsessi, võimaldades CSS-koodi kiiresti ja täpselt vormindada, muutes hoolduse ja projektide koostöö lihtsamaks.

CSS-i vormindamise tööriista omadused

See CSS-vormingu tööriist võimaldab teil sisestada CSS-koodi ja vormindada seda parema loetavuse huvides. See eemaldab mittevajalikud kommentaarid, tühikud ja tabeldusmärgid ning lisab CSS-i reeglitele ja atribuutidele õige taande.

Kuidas kasutada CSS-vormingu tööriista

CSS-vormingu tööriista kasutamiseks järgige neid lihtsaid samme.

  1. Sisestage oma CSS-kood ettenähtud väljale.
  2. Klikkige nupul „Vorminda”. Tööriist vormindab CSS-koodi parema loetavuse tagamiseks.
  3. Kopeerige vormindatud CSS-kood, mida oma projektides kasutada.

Näide CSS-vormingu tööriista kasutamisest

Siin on näide CSS-koodist enne ja pärast vormindamist: 


Enne vormindamist:
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;

Pärast vormindamist:
keha {
    fondiperekond: Arial, sans-serif;
    taustavärv: #f0f0f0;
    marginaal: 0;
    polsterdus: 0;
}

.container {
    laius: 80%;
    marginaal: 0 auto;
}

.header {
    taustavärv: #333;
    värv: #fff;
    polsterdus: 20px;
    teksti joondamine: keskel;
}

Korduma kippuvad küsimused

Mis vahe on CSS-i vormindajal, mini- ja kaunistajal?

CSS-i vormindaja (või kaunistaja) kirjutab kompaktse faili ümber taandega ja loetavaks versiooniks. Minifier toimib vastupidiselt: see eemaldab tühikud, reavahetused ja kommentaarid, et vähendada tootmises esitatava faili suurust. Meie tööriist keskendub vormindamisele: see võtab minimeeritud või halvasti taandatud CSS-lehe ja vormindab selle uuesti järjepideva taandega atribuutide kaupa.

Kas vormindamine säilitab CSS-i kommentaarid?

/* ... */ kommentaarid säilitatakse vaikimisi. Litsentsi kommentaarid faili ülaosas (/*! ... */) ja utiliidi märkused (TODO, FIXME) jäävad puutumata, omal real. Kui soovite need tootmisfaili loomiseks eemaldada, kasutage selle asemel spetsiaalset minimeerijat.

Kas teenusepakkuja eesliiteid (-webkit-, -moz-) toetatakse?

Jah. Tarnija eesliiteid käsitletakse nagu tavalisi omadusi: need on taandatud ja joondatud ülejäänud plokiga. Vormindaja ei genereeri ega eemalda eesliiteid: see lihtsalt vormindab pakutavat. Puuduvate eesliidete automaatseks lisamiseks kasutage oma ehituskonveieris Autoprefixerit.

Kas vormindaja käsitleb meediapäringuid ja pesastatud reegleid?

Jah. Reeglid @media, @supports, @keyframes ja muud at-reeglid on taandatud ning nende reeglid on pesastatud sulgudes. Natiivse CSS-i pesastus (& vanemreeglis) tuvastatakse ja vormindatakse samuti õigesti, nagu standardse CSS-i süntaksiga ühilduvad SCSS- või Less-plokid.

Kas ma saan vormindada SCSS-i, Lessi või Stylus'i?

Tööriist sihib standardset CSS-i. Laiendatud süntaksid (SCSS-i segud, vähem muutujaid koos @-ga, süntaks ilma pliiatsisulgudeta) ei ole parserile arusaadavad ja need võivad anda halvema tulemuse. Nende keelte puhul kasutage selle asemel sass --style=expanded, lessc või spetsiaalset vormindajat (nt Prettier) koos õige pistikprogrammiga.

Kas vormindaja kinnitab CSS-i süntaksi?

Vormindaja teostab minimaalset süntaktilist analüüsi: tuvastab plokid, valijad ja deklaratsioonid. See teatab suurtest vigadest (sulgude sulgemine, puuduv semikoolon ploki lõpus), kuid ei kinnita atribuutide nimesid ega väärtusi. Täielikuks valideerimiseks kasutage teenust W3C CSS Validator.

Päringunäide

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

Sisendskeem

Väli Tüüp Kohustuslik Vaikimisi
input text ✓ –

Lõpp-punktid

  • GET https://cdrn.fr/api/v1/tools - loetleb kõik saadaolevad tööriistad
  • GET https://cdrn.fr/api/v1/tools/css-formatter - toob selle tööriista skeemi
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - täidab selle tööriista JSON-payloadiga