CDRN

Formatarea și indentarea CSS

  • Panou de control
  • Documentație
  • API
formatează regulile dvs. CSS pentru a le face lizibile și de înțeles, facilitând dezvoltarea și mentenanța

De ce să utilizezi un instrument de formatare CSS?

Formatarea codului CSS este esențială pentru dezvoltatori pentru a menține un cod curat și lizibil. Acest instrument simplifică procesul permițând formatarea rapidă și precisă a codului CSS, facilitând astfel mentenanța și colaborarea pe proiecte.

Caracteristicile instrumentului de formatare CSS

Acest instrument de formatare CSS îți permite să introduci cod CSS și să-l formatezi pentru o mai bună lizibilitate. Elimină comentariile, spațiile și tab-urile inutile, și adaugă o indentare potrivită pentru regulile și proprietățile CSS.

Cum să utilizezi instrumentul de formatare CSS

Pentru a utiliza instrumentul de formatare CSS, urmează acești pași simpli:

  1. Introdu codul tău CSS în câmpul prevăzut în acest scop.
  2. Apasă pe butonul "Formatează". Instrumentul va formata codul CSS pentru o mai bună lizibilitate.
  3. Copiază codul CSS formatat pentru a-l utiliza în proiectele tale.

Exemplu de utilizare a instrumentului de formatare CSS

Iată un exemplu de cod CSS înainte și după formatare: 


Înainte de formatare:
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;}

După formatare:
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;
}

Întrebări frecvente

Care este diferența între un formatator CSS, un minificator și un beautifier?

Un formatator CSS (sau beautifier) rescrie un fișier compact în versiune indentată și lizibilă. Un minificator face inversul: suprimă spațiile, retururile la linie și comentariile pentru a reduce dimensiunea fișierului servit în producție. Instrumentul nostru se concentrează pe formatare: ia o foaie CSS minifiată sau prost indentată și o pune în formă cu o indentare coerentă, proprietate cu proprietate.

Formatarea păstrează comentariile CSS?

Comentariile /* ... */ sunt păstrate ca atare implicit. Comentariile de licență din capul fișierului (/*! ... */) precum și adnotările utilitare (TODO, FIXME) rămân intacte, pe propria linie. Dacă vrei să le elimini pentru a produce un fișier de producție, treci mai degrabă printr-un minificator dedicat.

Prefixele de furnizor (-webkit-, -moz-) sunt gestionate?

Da. Prefixele de furnizor sunt tratate ca proprietăți obișnuite: sunt indentate și aliniate cu restul blocului. Formatatorul nu generează și nu suprimă prefixe: se mulțumește să pună în formă ceea ce este furnizat. Pentru a adăuga automat prefixele lipsă, utilizează Autoprefixer în pipeline-ul tău build.

Formatatorul gestionează media queries și regulile imbricate?

Da. @media, @supports, @keyframes și alte at-rules sunt indentate cu regulile lor imbricate în interiorul acoladelor. Imbricarea CSS nativă (& într-o regulă părinte) este de asemenea recunoscută și formatată corect, ca blocurile SCSS sau Less compatibile cu sintaxa CSS standard.

Pot formata SCSS, Less sau Stylus?

Instrumentul vizează CSS-ul standard. Sintaxele extinse (mixins SCSS, variabile Less cu @, sintaxa fără acolade din Stylus) nu sunt înțelese de parser și pot produce un rezultat degradat. Pentru aceste limbi, utilizează mai degrabă sass --style=expanded, lessc sau un formatator dedicat precum Prettier cu plugin-ul potrivit.

Formatatorul validează sintaxa CSS?

Formatatorul efectuează o analiză sintactică minimală: identifică blocurile, selectorii și declarațiile. Semnalează erorile grosolane (acoladă neînchisă, punct și virgulă lipsă la sfârșitul blocului) dar nu validează numele proprietăților nici valorile. Pentru o validare completă, utilizează serviciul W3C CSS Validator.

Exemplu de cerere

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

Schema de intrare

Câmp Tip Obligatoriu Implicit
input text ✓ –

Puncte de acces

  • GET https://cdrn.fr/api/v1/tools - listează toate instrumentele disponibile
  • GET https://cdrn.fr/api/v1/tools/css-formatter - obține schema acestui instrument
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - execută acest instrument cu un payload JSON