CDRN

Formátovať a odsadiť CSS

  • Dashboard
  • Dokumentácia
  • API
formátuje vaše CSS pravidlá, aby boli čitateľné a zrozumiteľné, uľahčuje vývoj a údržbu

Prečo používať CSS formátovací nástroj?

Formátovanie CSS kódu je pre vývojárov nevyhnutné na udržanie čistého a čitateľného kódu. Tento nástroj zjednodušuje proces tým, že umožňuje rýchlo a presne formátovať CSS kód, čo uľahčuje údržbu a spoluprácu na projektoch.

Charakteristiky CSS formátovacieho nástroja

Tento CSS formátovací nástroj vám umožňuje zadať CSS kód a formátovať ho pre lepšiu čitateľnosť. Odstraňuje zbytočné komentáre, medzery a tabulátory a pridáva vhodné odsadenie pre CSS pravidlá a vlastnosti.

Ako používať CSS formátovací nástroj

Pre použitie CSS formátovacieho nástroja nasledujte tieto jednoduché kroky:

  1. Zadajte váš CSS kód do vyhradeného poľa.
  2. Kliknite na tlačidlo "Formátovať". Nástroj sformátuje CSS kód pre lepšiu čitateľnosť.
  3. Skopírujte sformátovaný CSS kód pre použitie vo vašich projektoch.

Príklad použitia CSS formátovacieho nástroja

Tu je príklad CSS kódu pred a po formátovaní: 


Pred formátovaním:
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;}

Po formátovaní:
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;
}

Často kladené otázky

Aký rozdiel medzi CSS formátorom, minifikátorom a beautifierom?

CSS formátor (alebo beautifier) prepisuje kompaktný súbor na odsadenú a čitateľnú verziu. Minifikátor robí opak: odstraňuje medzery, zlomy riadkov a komentáre pre redukciu veľkosti súboru servovaného v produkcii. Náš nástroj sa zameriava na formátovanie: berie minifikovaný alebo zle odsadený CSS stylesheet a uvádza ho do formy s koherentným odsadením, vlastnosť po vlastnosti.

Zachováva formátovanie CSS komentáre?

/* ... */ komentáre sú defaultne zachované tak, ako sú. Licenčné komentáre v hlavičke súboru (/*! ... */) ako aj utility anotácie (TODO, FIXME) zostávajú nedotknuté, na vlastnom riadku. Ak ich chcete odstrániť pre produkciu, použite dedikovaný minifikátor.

Sú vendor prefixy (-webkit-, -moz-) spravované?

Áno. Vendor prefixy sú spracovávané ako bežné vlastnosti: sú odsadené a zarovnané so zvyškom bloku. Formátor negeneruje ani neodstraňuje prefixy: uspokojí sa s formátovaním toho, čo je poskytnuté. Pre automatické pridávanie chýbajúcich prefixov použite Autoprefixer vo vašom build pipeline.

Spravuje formátor media queries a vnorené pravidlá?

Áno. @media, @supports, @keyframes a ostatné at-rules sú odsadené so svojimi vnorenými pravidlami vnútri zložených zátvoriek. Natívne CSS vnorenie (& v rodičovskom pravidle) je tiež rozpoznané a správne formátované, ako SCSS alebo Less bloky kompatibilné so štandardnou CSS syntaxou.

Môžem formátovať SCSS, Less alebo Stylus?

Nástroj cieli štandardný CSS. Rozšírené syntaxe (SCSS mixiny, Less premenné s @, Stylus syntax bez zložených zátvoriek) nie sú parserom pochopené a môžu produkovať degradovaný výsledok. Pre tieto jazyky použite radšej sass --style=expanded, lessc alebo dedikovaný formátor ako Prettier so správnym pluginom.

Validuje formátor CSS syntax?

Formátor vykonáva minimálnu syntaktickú analýzu: rozpoznáva bloky, selektory a deklarácie. Signalizuje hrubé chyby (neuzavretá zátvorka, chýbajúca bodkočiarka na konci bloku), ale nevaliduje názvy vlastností ani hodnoty. Pre kompletnú validáciu použite W3C CSS Validator service.

Ukážka požiadavky

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

Vstupná schéma

Pole Typ Povinné Predvolené
input text ✓ –

Koncové body

  • GET https://cdrn.fr/api/v1/tools - vypíše všetky dostupné nástroje
  • GET https://cdrn.fr/api/v1/tools/css-formatter - získa schému tohto nástroja
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - spustí tento nástroj s JSON payloadom