CDRN

CSS opmaken en inspringen

  • Dashboard
  • Documentatie
  • API
formatteert je CSS-regels om ze leesbaar en eenvoudig te onderhouden te maken

Waarom een CSS-opmaaktool gebruiken?

Het opmaken van CSS-code is essentieel voor ontwikkelaars om een schone en leesbare code te onderhouden. Deze tool vereenvoudigt het proces door snel en nauwkeurig CSS-code op te maken, wat het onderhoud en de samenwerking aan projecten vergemakkelijkt.

Kenmerken van de CSS-opmaaktool

Met deze CSS-opmaaktool kunt u CSS-code invoeren en opmaken voor een betere leesbaarheid. Het verwijdert overbodige commentaren, spaties en tabs en voegt geschikte inspringing toe voor CSS-regels en eigenschappen.

Hoe u de CSS-opmaaktool gebruikt

Om de CSS-opmaaktool te gebruiken, volgt u deze eenvoudige stappen:

  1. Voer uw CSS-code in in het daarvoor bestemde veld.
  2. Klik op de knop "Opmaken". De tool maakt de CSS-code op voor een betere leesbaarheid.
  3. Kopieer de opgemaakte CSS-code om deze in uw projecten te gebruiken.

Voorbeeld van gebruik van de CSS-opmaaktool

Hier is een voorbeeld van CSS-code voor en na de opmaak: 


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

Veelgestelde vragen

Wat is het verschil tussen een CSS-opmaaktool, een minifier en een beautifier?

Een CSS-opmaaktool (of beautifier) herschrijft een compact bestand naar een ingesprongen en leesbare versie. Een minifier doet het omgekeerde: hij verwijdert spaties, regeleinden en commentaren om de grootte van het in productie geleverde bestand te verminderen. Onze tool concentreert zich op opmaak: hij neemt een geminificeerde of slecht ingesprongen CSS-stylesheet en geeft deze vorm met een consistente inspringing, eigenschap per eigenschap.

Bewaart de opmaak de CSS-commentaren?

De commentaren /* ... */ worden standaard zo bewaard. Licentiecommentaren bovenaan het bestand (/*! ... */) evenals utility-annotaties (TODO, FIXME) blijven intact, op hun eigen regel. Als u ze wilt verwijderen om een productiebestand te produceren, ga dan via een speciale minifier.

Worden vendor prefixes (-webkit-, -moz-) beheerd?

Ja. Vendor prefixes worden behandeld als gewone eigenschappen: ze worden ingesprongen en uitgelijnd op de rest van het blok. De opmaker genereert noch verwijdert prefixes: hij beperkt zich tot het opmaken van wat wordt aangeleverd. Om automatisch ontbrekende prefixes toe te voegen, gebruikt u Autoprefixer in uw buildpipeline.

Beheert de opmaker media queries en geneste regels?

Ja. De @media, @supports, @keyframes en andere at-rules worden ingesprongen met hun geneste regels binnen de accolades. Native CSS-nesting (& in een ouderregel) wordt ook herkend en correct opgemaakt, evenals SCSS- of Less-blokken die compatibel zijn met de standaard CSS-syntaxis.

Kan ik SCSS, Less of Stylus opmaken?

De tool richt zich op standaard CSS. De uitgebreide syntaxen (SCSS-mixins, Less-variabelen met @, Stylus-syntaxis zonder accolades) worden niet begrepen door de parser en kunnen een gedegradeerd resultaat opleveren. Voor deze talen gebruikt u liever sass --style=expanded, lessc of een speciale formatter zoals Prettier met de juiste plugin.

Valideert de opmaker de CSS-syntaxis?

De opmaker voert een minimale syntactische analyse uit: hij detecteert blokken, selectors en declaraties. Hij signaleert grove fouten (niet gesloten accolade, ontbrekende puntkomma aan het einde van een blok) maar valideert geen eigenschapsnamen of waarden. Voor een volledige validatie gebruikt u de service van de W3C CSS Validator.

Voorbeeldverzoek

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

Invoerschema

Veld Type Vereist Standaard
input text ✓ –

Endpoints

  • GET https://cdrn.fr/api/v1/tools - toont alle beschikbare tools
  • GET https://cdrn.fr/api/v1/tools/css-formatter - geeft het schema van deze tool terug
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - voert deze tool uit met een JSON-payload