CDRN

Formater og indryk CSS

  • Dashboard
  • Dokumentation
  • API
formaterer dine CSS-regler så de er læsbare og forståelige, og letter udvikling og vedligeholdelse

Hvorfor bruge et CSS-formateringsværktøj?

CSS-kodeformatering er afgørende for, at udviklere kan opretholde ren og læsbar kode. Dette værktøj forenkler processen ved at tillade, at CSS-kode formateres hurtigt og præcist, hvilket gør vedligeholdelse og samarbejde om projekter nemmere.

Funktioner i CSS-formateringsværktøj

Dette CSS-formateringsværktøj giver dig mulighed for at indtaste CSS-kode og formatere den for bedre læsbarhed. Det fjerner unødvendige kommentarer, mellemrum og faner og tilføjer korrekt indrykning til CSS-regler og -egenskaber.

Sådan bruger du CSS-formateringsværktøjet

Følg disse enkle trin for at bruge CSS-formateringsværktøjet:

  1. Indtast din CSS-kode i det angivne felt.
  2. Klik på knappen "Formater". Værktøjet vil formatere CSS-koden for bedre læsbarhed.
  3. Kopiér den formaterede CSS-kode til brug i dine projekter.

Eksempel på brug af CSS-formateringsværktøjet

Stem et eksempel på kode CSS avant og après le formatage: 


Avant le formatering:
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 formatering:
krop {
    font-familie: Arial, sans-serif;
    baggrundsfarve: #f0f0f0;
    margin: 0;
    polstring: 0;
}

.container {
    bredde: 80%;
    margin: 0 auto;
}

.header {
    baggrundsfarve: #333;
    farve: #fff;
    polstring: 20px;
    tekst-align: center;
}

Ofte stillede spørgsmål

Hvad er forskellen mellem en CSS-formater, en minifier og en beautifier?

En CSS-formater (eller beautifier) omskriver en kompakt fil til en indrykket og læsbar version. En minifier gør det modsatte: den fjerner mellemrum, nye linjer og kommentarer for at reducere størrelsen på filen, der vises i produktionen. Vores værktøj fokuserer på formatering: det tager et minificeret eller dårligt indrykket CSS-ark og omformaterer det med ensartet indrykning, egenskab for egenskab.

Bevarer formatering CSS-kommentarer?

Kommentarerne /* ... */ bevares som standard. Licenskommentarerne øverst i filen (/*! ... */) samt hjælpeannoteringerne (TODO, FIXME) forbliver intakte på deres egen linje. Hvis du vil fjerne dem for at producere en produktionsfil, skal du bruge en dedikeret minifier i stedet.

Er leverandørpræfikser (-webkit-, -moz-) understøttet?

Ja. Leverandørpræfikser behandles som almindelige egenskaber: de er indrykket og justeret med resten af blokken. Formateringsværktøjet genererer eller fjerner ikke præfikser: det formaterer blot det, der leveres. For automatisk at tilføje manglende præfikser, skal du bruge Autoprefixer i din build-pipeline.

Håndterer formateringsværktøjet medieforespørgsler og indlejrede regler?

Ja. @media, @supports, @keyframes og andre at-regler er indrykket med deres regler indlejret i klammerne. Indbygget CSS-indlejring (& i en overordnet regel) genkendes og formateres også korrekt, som SCSS eller Less-blokke, der er kompatible med standard CSS-syntaks.

Kan jeg formatere SCSS, Less eller Stylus?

Værktøjet er rettet mod standard CSS. Udvidede syntakser (SCSS mixins, Less variables med @, syntaks uden Stylus klammeparenteser) forstås ikke af parseren og kan producere et forringet resultat. Til disse sprog skal du i stedet bruge sass --style=expanded, lessc eller en dedikeret formater som Prettier med det rigtige plugin.

Validerer formateringsværktøjet CSS-syntaks?

Formatereren udfører minimal syntaktisk analyse: den identificerer blokke, vælgere og erklæringer. Den rapporterer grove fejl (ulukket klammeparentes, manglende semikolon i slutningen af blok), men validerer ikke egenskabsnavne eller værdier. For fuldstændig validering skal du bruge W3C CSS Validator-tjenesten.

Anmodningseksempel

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

Inputskema

Felt Type Påkrævet Standard
input text ✓ –

Endpoints

  • GET https://cdrn.fr/api/v1/tools - lister alle tilgængelige værktøjer
  • GET https://cdrn.fr/api/v1/tools/css-formatter - henter skemaet for dette værktøj
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - udfører dette værktøj med et JSON-payload