CDRN

CSS formázása és behúzása

  • Irányítópult
  • Dokumentáció
  • API
formázza CSS szabályait olvashatóvá és érthetővé, megkönnyítve a fejlesztést és karbantartást

Miért használjunk CSS formázó eszközt?

A CSS kód formázása elengedhetetlen a fejlesztők számára a tiszta és olvasható kód fenntartásához. Ez az eszköz leegyszerűsíti a folyamatot azáltal, hogy lehetővé teszi a CSS kód gyors és pontos formázását, megkönnyítve ezzel a karbantartást és a projekteken való együttműködést.

A CSS formázó eszköz jellemzői

Ez a CSS formázó eszköz lehetővé teszi CSS kód megadását és annak formázását a jobb olvashatóság érdekében. Eltávolítja a felesleges megjegyzéseket, szóközöket és tabulátorokat, valamint megfelelő behúzást ad a CSS szabályokhoz és tulajdonságokhoz.

Hogyan használjuk a CSS formázó eszközt

A CSS formázó eszköz használatához kövesse az alábbi egyszerű lépéseket:

  1. Írja be a CSS kódját az erre a célra szolgáló mezőbe.
  2. Kattintson a „Formázás” gombra. Az eszköz formázza a CSS kódot a jobb olvashatóság érdekében.
  3. Másolja ki a formázott CSS kódot a projektjeiben való felhasználáshoz.

Példa a CSS formázó eszköz használatára

Íme egy példa a CSS kódra formázás előtt és után: 


Formázás előtt :
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;}

Formázás után :
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;
}

Gyakori kérdések

Mi a különbség a CSS formázó, a minifikáló és a beautifier között?

A CSS formázó (vagy beautifier) egy tömör fájlt ír át behúzott és olvasható verzióra. A minifikáló az ellenkezőjét teszi: eltávolítja a szóközöket, soremeléseket és megjegyzéseket a produkciós környezetben kiszolgált fájl méretének csökkentése érdekében. Eszközünk a formázásra összpontosít: egy minifikált vagy rosszul behúzott CSS stíluslapot formáz át következetes behúzással, tulajdonságról tulajdonságra.

A formázás megőrzi a CSS megjegyzéseket?

A /* ... */ megjegyzések alapértelmezés szerint változatlanul megmaradnak. A fájl elején található licencmegjegyzések (/*! ... */), valamint a segédjegyzetek (TODO, FIXME) érintetlenül, saját sorukban maradnak. Ha el szeretné távolítani őket egy produkciós fájl létrehozásához, használjon inkább egy dedikált minifikálót.

Kezeli az eszköz a gyártói előtagokat (-webkit-, -moz-)?

Igen. A gyártói előtagokat közönséges tulajdonságokként kezeli az eszköz: be vannak húzva és a blokk többi részéhez vannak igazítva. A formázó nem hoz létre és nem távolít el előtagokat: egyszerűen csak formázza a megadott tartalmat. A hiányzó előtagok automatikus hozzáadásához használja az Autoprefixert a build folyamatban.

Kezeli a formázó a media query-ket és a beágyazott szabályokat?

Igen. A @media, @supports, @keyframes és egyéb at-szabályok a kapcsos zárójeleken belül beágyazott szabályaikkal együtt be vannak húzva. A natív CSS beágyazást (& a szülő szabályban) szintén felismeri és megfelelően formázza, ahogy a standard CSS szintaxissal kompatibilis SCSS vagy Less blokkokat is.

Formázhatok SCSS, Less vagy Stylus kódot?

Az eszköz a standard CSS-t célozza meg. A kiterjesztett szintaxisokat (SCSS mixinek, @ jellel ellátott Less változók, a Stylus kapcsos zárójelek nélküli szintaxisa) az elemző nem értelmezi, és romolhat az eredmény. Ezekhez a nyelvekhez használja inkább a sass --style=expanded, a lessc parancsokat vagy egy dedikált formázót, például a Prettiert a megfelelő bővítménnyel.

Ellenőrzi a formázó a CSS szintaxisát?

A formázó minimális szintaktikai elemzést végez: felismeri a blokkokat, a szelektorokat és a deklarációkat. Jelzi a durva hibákat (be nem zárt kapcsos zárójel, hiányzó pontosvessző a blokk végén), de nem ellenőrzi a tulajdonságneveket vagy az értékeket. A teljes körű ellenőrzéshez használja a W3C CSS Validator szolgáltatását.

Kérés példa

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

Bemeneti séma

Mező Típus Kötelező Alapértelmezett
input text ✓ –

Végpontok

  • GET https://cdrn.fr/api/v1/tools - listázza az összes elérhető eszközt
  • GET https://cdrn.fr/api/v1/tools/css-formatter - lekéri ezen eszköz sémáját
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - végrehajtja ezen eszközt JSON payloaddal