CDRN

Formatera och indentera CSS

  • Panel
  • Dokumentation
  • API
formaterar dina CSS-regler för att göra dem läsbara och lätta att underhålla

Varför använda ett CSS-formateringsverktyg?

Att formatera CSS-kod är avgörande för utvecklare för att hålla koden ren och läsbar. Detta verktyg förenklar processen genom att snabbt och precist formatera CSS-kod, vilket underlättar underhåll och samarbete i projekt.

Egenskaper hos CSS-formateringsverktyget

Detta CSS-formateringsverktyg låter dig mata in CSS-kod och formatera den för bättre läsbarhet. Det tar bort onödiga kommentarer, mellanslag och tabbar och lägger till lämplig indentering för CSS-regler och egenskaper.

Så använder du CSS-formateringsverktyget

För att använda CSS-formateringsverktyget, följ dessa enkla steg:

  1. Ange din CSS-kod i det avsedda fältet.
  2. Klicka på knappen "Formatera". Verktyget formaterar CSS-koden för bättre läsbarhet.
  3. Kopiera den formaterade CSS-koden för att använda i dina projekt.

Exempel på användning av CSS-formateringsverktyget

Här är ett exempel på CSS-kod före och efter formatering: 


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

Vanliga frågor

Vad är skillnaden mellan en CSS-formaterare, en minifierare och en beautifier?

En CSS-formaterare (eller beautifier) skriver om en kompakt fil till en indenterad och läsbar version. En minifierare gör tvärtom: den tar bort mellanslag, radbrytningar och kommentarer för att minska filstorleken som serveras i produktion. Vårt verktyg fokuserar på formatering: det tar en minifierad eller dåligt indenterad CSS-fil och återställer den med konsekvent indentering, egenskap för egenskap.

Bevarar formateringen CSS-kommentarer?

Kommentarer /* ... */ bevaras som de är som standard. Licenskommentarer i filhuvudet (/*! ... */) samt nyttiga annoteringar (TODO, FIXME) förblir intakta, på sin egen rad. Om du vill ta bort dem för att producera en produktionsfil, använd istället en dedikerad minifierare.

Hanteras leverantörsprefix (-webkit-, -moz-)?

Ja. Leverantörsprefix behandlas som vanliga egenskaper: de indenteras och justeras med resten av blocket. Formateraren genererar eller tar inte bort prefix: den formaterar bara det som tillhandahålls. För att automatiskt lägga till saknade prefix, använd Autoprefixer i din byggpipeline.

Hanterar formateraren media queries och kapslade regler?

Ja. @media, @supports, @keyframes och andra at-regler indenteras med sina kapslade regler inuti klamrarna. Inbyggd CSS-nestling (& i en överordnad regel) känns också igen och formateras korrekt, liksom SCSS- eller Less-block kompatibla med standard CSS-syntax.

Kan jag formatera SCSS, Less eller Stylus?

Verktyget är riktat mot standard-CSS. Utökade syntaxer (SCSS-mixins, Less-variabler med @, Stylus klammerfria syntax) förstås inte av parsern och kan ge ett försämrat resultat. För dessa språk, använd istället sass --style=expanded, lessc eller en dedikerad formaterare som Prettier med rätt plugin.

Validerar formateraren CSS-syntaxen?

Formateraren utför en minimal syntaktisk analys: den identifierar block, selektorer och deklarationer. Den flaggar grova fel (oavslutad klammer, saknat semikolon i slutet av ett block) men validerar inte egenskapsnamn eller värden. För fullständig validering, använd W3C CSS Validator-tjänsten.

Exempelförfrågan

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

Indatasschema

Fält Typ Obligatorisk Standard
input text ✓ –

Slutpunkter

  • GET https://cdrn.fr/api/v1/tools - listar alla tillgängliga verktyg
  • GET https://cdrn.fr/api/v1/tools/css-formatter - hämtar schemat för detta verktyg
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - kör detta verktyg med en JSON-payload