CDRN

Formátovat a odsadit CSS

  • Dashboard
  • Dokumentace
  • API
formátuje vaše CSS pravidla, aby byla čitelná a srozumitelná, usnadňuje vývoj a údržbu

Proč používat nástroj pro CSS formátování?

Formátování CSS kódu je zásadní pro developery k udržení čistého a čitelného kódu. Tento nástroj zjednodušuje proces tím, že umožňuje rychle a přesně formátovat CSS kód, čímž usnadňuje údržbu a spolupráci na projektech.

Vlastnosti nástroje pro CSS formátování

Tento nástroj pro CSS formátování vám umožňuje zadat CSS kód a formátovat ho pro lepší čitelnost. Odstraňuje komentáře, mezery a zbytečné tabulátory, a přidává vhodné odsazení pro CSS pravidla a vlastnosti.

Jak používat nástroj pro CSS formátování

Pro použití nástroje pro CSS formátování postupujte podle těchto jednoduchých kroků:

  1. Zadejte svůj CSS kód do pole k tomu určeného.
  2. Klikněte na tlačítko "Formátovat". Nástroj formátuje CSS kód pro lepší čitelnost.
  3. Zkopírujte formátovaný CSS kód pro použití ve svých projektech.

Příklad použití nástroje pro CSS formátování

Zde je příklad CSS kódu před a po formátování: 


Před formátování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átování:
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

Jaký je rozdíl mezi CSS formátorem, minifikátorem a beautifierem?

CSS formátor (nebo beautifier) přepisuje kompaktní soubor do indentované a čitelné verze. Minifikátor dělá opak: odstraňuje mezery, zalomení řádků a komentáře pro snížení velikosti souboru servírovaného v produkci. Náš nástroj se soustředí na formátování: bere minifikovanou nebo špatně indentovanou CSS šablonu stylů a dává ji do formy s konzistentním odsazením, vlastnost po vlastnosti.

Zachovává formátování CSS komentáře?

Komentáře /* ... */ jsou ve výchozím nastavení zachovány jak jsou. Licenční komentáře v hlavičce souboru (/*! ... */) stejně jako utilitární anotace (TODO, FIXME) zůstávají nedotčeny, na vlastním řádku. Pokud je chcete odstranit pro produkci, použijte raději dedikovaný minifikátor.

Jsou vendor prefixy (-webkit-, -moz-) spravovány?

Ano. Vendor prefixy jsou ošetřeny jako běžné vlastnosti: jsou indentovány a zarovnány s ostatkem bloku. Formátor negeneruje ani neodstraňuje prefixy: jen formátuje to, co je poskytnuto. Pro automatické přidání chybějících prefixů použijte Autoprefixer ve vašem build pipeline.

Spravuje formátor media queries a vnořená pravidla?

Ano. @media, @supports, @keyframes a další at-rules jsou indentovány se svými vnořenými pravidly uvnitř složených závorek. Nativní CSS vnořování (& v rodičovském pravidle) je také rozpoznáno a správně formátováno, jako SCSS nebo Less bloky kompatibilní se standardní CSS syntaxí.

Mohu formátovat SCSS, Less nebo Stylus?

Nástroj cílí na standardní CSS. Rozšířené syntaxe (SCSS mixiny, Less proměnné s @, Stylus syntaxe bez složených závorek) nejsou parserem chápány a mohou produkovat degradovaný výsledek. Pro tyto jazyky použijte raději sass --style=expanded, lessc nebo dedikovaný formátor jako Prettier s vhodným pluginem.

Validuje formátor CSS syntaxi?

Formátor provádí minimální syntaktickou analýzu: identifikuje bloky, selektory a deklarace. Signalizuje hrubé chyby (nezavřená složená závorka, chybějící středník na konci bloku), ale nevaliduje názvy vlastností ani hodnoty. Pro kompletní validaci použijte službu W3C CSS Validator.

Ukázka požadavku

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é Výchozí
input text ✓ –

Koncové body

  • GET https://cdrn.fr/api/v1/tools - vypíše všechny dostupné nástroje
  • GET https://cdrn.fr/api/v1/tools/css-formatter - získá schéma tohoto nástroje
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - spustí tento nástroj s JSON payloadem