CDRN

Formattare e indentare CSS

  • Dashboard
  • Documentazione
  • API
formatta le tue regole CSS per renderle leggibili e comprensibili, facilitando lo sviluppo e la manutenzione

Perché usare uno strumento di formattazione CSS?

La formattazione del codice CSS è essenziale per gli sviluppatori per mantenere un codice pulito e leggibile. Questo strumento semplifica il processo permettendo di formattare rapidamente e con precisione il codice CSS, facilitando così la manutenzione e la collaborazione sui progetti.

Caratteristiche dello strumento di formattazione CSS

Questo strumento di formattazione CSS vi permette di inserire del codice CSS e formattarlo per una migliore leggibilità. Rimuove i commenti, gli spazi e le tabulazioni inutili, e aggiunge un'indentazione appropriata per le regole e le proprietà CSS.

Come usare lo strumento di formattazione CSS

Per usare lo strumento di formattazione CSS, seguite questi semplici passaggi:

  1. Inserite il vostro codice CSS nel campo previsto a tal scopo.
  2. Cliccate sul pulsante "Formatta". Lo strumento formatterà il codice CSS per una migliore leggibilità.
  3. Copiate il codice CSS formattato per usarlo nei vostri progetti.

Esempio di utilizzo dello strumento di formattazione CSS

Ecco un esempio di codice CSS prima e dopo la formattazione: 


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

Domande frequenti

Qual è la differenza tra un formattatore CSS, un minificatore e un beautifier?

Un formattatore CSS (o beautifier) riscrive un file compatto in versione indentata e leggibile. Un minificatore fa il contrario: rimuove spazi, ritorni a capo e commenti per ridurre la dimensione del file servito in produzione. Il nostro strumento si concentra sulla formattazione: prende un foglio CSS minificato o mal indentato e lo rimette in forma con un'indentazione coerente, proprietà per proprietà.

La formattazione conserva i commenti CSS?

I commenti /* ... */ sono preservati così come sono per default. I commenti di licenza in testa al file (/*! ... */) così come le annotazioni utilitarie (TODO, FIXME) restano intatti, sulla loro propria riga. Se volete rimuoverli per produrre un file di produzione, passate piuttosto da un minificatore dedicato.

I prefissi vendor (-webkit-, -moz-) sono gestiti?

Sì. I prefissi vendor sono trattati come proprietà ordinarie: sono indentati e allineati sul resto del blocco. Il formattatore non genera né rimuove prefissi: si limita a mettere in forma ciò che viene fornito. Per aggiungere automaticamente i prefissi mancanti, usate Autoprefixer nella vostra pipeline di build.

Il formattatore gestisce le media query e le regole nidificate?

Sì. Le @media, @supports, @keyframes e altre at-rule sono indentate con le loro regole nidificate all'interno delle graffe. L'annidamento CSS nativo (& in una regola padre) è anche riconosciuto e formattato correttamente, come i blocchi SCSS o Less compatibili con la sintassi CSS standard.

Posso formattare SCSS, Less o Stylus?

Lo strumento mira al CSS standard. Le sintassi estese (mixin SCSS, variabili Less con @, sintassi senza graffe di Stylus) non sono comprese dal parser e possono produrre un risultato degradato. Per questi linguaggi, usate piuttosto sass --style=expanded, lessc o un formattatore dedicato come Prettier con il plugin giusto.

Il formattatore valida la sintassi CSS?

Il formattatore effettua un'analisi sintattica minima: identifica i blocchi, i selettori e le dichiarazioni. Segnala gli errori grossolani (graffa non chiusa, punto e virgola mancante a fine blocco) ma non valida i nomi di proprietà né i valori. Per una validazione completa, usate il servizio del W3C CSS Validator.

Esempio di richiesta

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

Schema di input

Campo Tipo Richiesto Predefinito
input text ✓ –

Endpoint

  • GET https://cdrn.fr/api/v1/tools - elenca tutti gli strumenti disponibili
  • GET https://cdrn.fr/api/v1/tools/css-formatter - recupera lo schema di questo strumento
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - esegue questo strumento con un payload JSON