CDRN

Formatirati i uvući CSS

  • Nadzorna ploča
  • Dokumentacija
  • API
formatira vaša CSS pravila kako bi bila čitljiva i razumljiva, olakšavajući razvoj i održavanje

Zašto koristiti CSS alat za oblikovanje?

Oblikovanje CSS koda ključno je za programere kako bi održali čist i čitljiv kod. Ovaj alat pojednostavljuje proces dopuštajući brzo i točno formatiranje CSS koda, olakšavajući održavanje i suradnju na projektima.

Značajke CSS alata za oblikovanje

Ovaj alat za oblikovanje CSS-a omogućuje vam unos CSS koda i njegovo formatiranje radi bolje čitljivosti. Uklanja nepotrebne komentare, razmake i kartice te dodaje odgovarajuće uvlačenje za CSS pravila i svojstva.

Kako koristiti CSS alat za oblikovanje

Da biste koristili alat za oblikovanje CSS-a, slijedite ove jednostavne korake:

  1. Unesite svoj CSS kod u ponuđeno polje.
  2. Kliknite gumb "Format". Alat će formatirati CSS kod radi bolje čitljivosti.
  3. Kopirajte formatirani CSS kod za korištenje u svojim projektima.

Primjer korištenja CSS alata za oblikovanje

Prikaz primjera CSS koda ispred i nakon formatiranja: 

<šifra>
Avant le formatage :
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;}

Après le formatage:
tijelo {
    obitelj fontova: Arial, sans-serif;
    boja pozadine: #f0f0f0;
    margina: 0;
    ispuna: 0;
}

.spremnik {
    širina: 80%;
    margina: 0 auto;
}

.zaglavlje {
    boja pozadine: #333;
    boja: #fff;
    ispuna: 20px;
    poravnanje teksta: središte;
}

Često postavljana pitanja

Koja je razlika između CSS formattera, minifiera i beautifiera?

CSS formatter (ili uljepšavač) prepisuje kompaktnu datoteku u uvučenu i čitljivu verziju. Minifikator radi suprotno: uklanja razmake, nove retke i komentare kako bi smanjio veličinu datoteke koja se poslužuje u proizvodnji. Naš se alat usredotočuje na oblikovanje: uzima umanjeni ili slabo uvučeni CSS list i ponovno ga formatira s dosljednim uvlačenjem, svojstvo po svojstvo.

Čuva li oblikovanje CSS komentare?

Komentari /* ... */ su sačuvani prema zadanim postavkama. Komentari o licenci na vrhu datoteke (/*! ... */) kao i bilješke pomoćnih programa (TODO, FIXME) ostaju netaknuti, u vlastitom retku. Ako ih želite ukloniti da biste proizveli proizvodnu datoteku, umjesto toga upotrijebite namjenski minifier.

Jesu li podržani prefiksi dobavljača (-webkit-, -moz-)?

da Prefiksi dobavljača tretiraju se kao obična svojstva: uvučeni su i poravnati s ostatkom bloka. Formater ne stvara niti uklanja prefikse: on jednostavno formatira ono što je dano. Za automatsko dodavanje prefiksa koji nedostaju, koristite Autoprefixer u svom cjevovodu za izgradnju.

Rukuje li formater medijskim upitima i ugniježđenim pravilima?

da @media, @supports, @keyframes i druga at-pravila uvučena su sa svojim pravilima ugniježđenim unutar zagrada. Nativno CSS ugniježđivanje (& u nadređenom pravilu) također se prepoznaje i ispravno formatira, poput blokova SCSS ili Less kompatibilnih sa standardnom CSS sintaksom.

Mogu li formatirati SCSS, Less ili Stylus?

Alat cilja standardni CSS. Parser ne razumije proširene sintakse (SCSS mixins, Less varijable s @, sintaksu bez Stylus zagrada) i može proizvesti lošiji rezultat. Za te jezike umjesto toga upotrijebite sass --style=expanded, lessc ili namjenski alat za oblikovanje kao što je Prettier s pravim dodatkom.

Provjerava li formater CSS sintaksu?

Formater izvodi minimalnu sintaktičku analizu: identificira blokove, selektore i deklaracije. Izvještava o velikim pogreškama (nezatvorena zagrada, nedostaje točka-zarez na kraju bloka), ali ne provjerava valjanost imena ili vrijednosti svojstava. Za potpunu provjeru valjanosti koristite uslugu W3C CSS Validator.

Primjer zahtjeva

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

Ulazna shema

Polje Tip Obavezno Zadano
input text ✓ –

Krajnje točke

  • GET https://cdrn.fr/api/v1/tools - ispisuje sve dostupne alate
  • GET https://cdrn.fr/api/v1/tools/css-formatter - dohvaća shemu ovog alata
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - izvršava ovaj alat s JSON payloadom