Formatirati in zamakniti CSS

Nadzorna plošča
Dokumentacija
API

formatira vaša CSS pravila, da so berljiva in razumljiva, olajša razvoj in vzdrževanje

Zakaj uporabljati orodje za oblikovanje CSS?

Oblikovanje kode CSS je bistveno za razvijalce, da ohranijo čisto in berljivo kodo. To orodje poenostavlja postopek, saj omogoča hitro in natančno formatiranje kode CSS, kar olajša vzdrževanje in sodelovanje pri projektih.

Funkcije orodja za oblikovanje CSS

To orodje za oblikovanje CSS vam omogoča vnos kode CSS in njeno oblikovanje za boljšo berljivost. Odstrani nepotrebne komentarje, presledke in zavihke ter doda ustrezen zamik za pravila in lastnosti CSS.

Kako uporabljati orodje za oblikovanje CSS

Če želite uporabiti orodje za oblikovanje CSS, sledite tem preprostim korakom:

Vnesite kodo CSS v predvideno polje.
Kliknite gumb »Oblika«. Orodje bo oblikovalo kodo CSS za boljšo berljivost.
Kopirajte oblikovano kodo CSS za uporabo v svojih projektih.

Primer uporabe orodja za oblikovanje CSS

Tukaj je primer kode CSS pred in po oblikovanju:


Pred formatiranjem:
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;}

Po oblikovanju:
telo {
    družina pisav: Arial, sans-serif;
    barva ozadja: #f0f0f0;
    rob: 0;
    oblazinjenje: 0;
}

.container {
    širina: 80 %;
    rob: 0 samodejno;
}

.header {
    barva ozadja: #333;
    barva: #fff;
    oblazinjenje: 20px;
    poravnava besedila: sredina;
}

Pogosta vprašanja

Kakšna je razlika med oblikovalnikom CSS, minifierjem in olepševalnikom?

Oblikovalnik CSS (ali olepševalec) prepiše kompaktno datoteko v zamaknjeno in berljivo različico. Minifier deluje ravno nasprotno: odstrani presledke, nove vrstice in komentarje, da zmanjša velikost datoteke, ki se uporablja v produkciji. Naše orodje se osredotoča na oblikovanje: vzame pomanjšan ali slabo zamaknjen list CSS in ga znova oblikuje z doslednim zamikom, lastnost za lastnostjo.

Ali oblikovanje ohranja komentarje CSS?

Komentarji /* ... */ so privzeto ohranjeni. Komentarji licence na vrhu datoteke (/*! ... */) kot tudi opombe pripomočkov (TODO, FIXME) ostanejo nedotaknjene, v svoji vrstici. Če jih želite odstraniti, da ustvarite produkcijsko datoteko, namesto tega uporabite namenski minifier.

Ali so podprte predpone prodajalcev (-webkit-, -moz-)?

ja Predpone prodajalca se obravnavajo kot običajne lastnosti: zamaknjene so in poravnane s preostalim delom bloka. Oblikovalnik ne ustvari ali odstrani predpon: preprosto oblikuje, kar je na voljo. Če želite samodejno dodati manjkajoče predpone, uporabite Autoprefixer v cevovodu gradnje.

Ali oblikovalnik obravnava medijske poizvedbe in ugnezdena pravila?

ja @media, @supports, @keyframes in druga pravila at so zamaknjena s svojimi pravili, ugnezdenimi v oklepajih. Izvorno gnezdenje CSS (& v nadrejenem pravilu) je prav tako prepoznano in pravilno oblikovano, kot so bloki SCSS ali Less, združljivi s standardno sintakso CSS.

Ali lahko formatiram SCSS, Less ali Stylus?

Orodje cilja na standardni CSS. Razčlenjevalnik ne razume razširjenih skladenj (miksinov SCSS, manj spremenljivk z @, sintakse brez oklepajev pisala), kar lahko povzroči poslabšan rezultat. Za te jezike namesto tega uporabite sass --style=expanded, lessc ali namenski oblikovalnik, kot je Prettier, s pravim vtičnikom.

Ali formater preverja sintakso CSS?

Oblikovalnik izvaja minimalno sintaktično analizo: identificira bloke, izbirnike in deklaracije. Poroča o hudih napakah (nezaprt oklepaj, manjkajoče podpičje na koncu bloka), vendar ne preveri imen ali vrednosti lastnosti. Za popolno preverjanje uporabite storitev W3C CSS Validator.

Primer zahteve

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

Vhodna shema

Polje	Tip	Obvezno	Privzeto
`input`	text	✓	–

Končne točke

GET https://cdrn.fr/api/v1/tools - izpiše vsa razpoložljiva orodja
GET https://cdrn.fr/api/v1/tools/css-formatter - pridobi shemo tega orodja
POST https://cdrn.fr/api/v1/tools/css-formatter/execute - izvede to orodje s JSON payloadom