Jak použít
- Vložte CSS do vstupního editoru.
- V nastavení Odsazení vyberte 2 mezery, 4 mezery nebo Tabulátor.
- V nastavení Závorky vyberte Na stejném řádku nebo Na novém řádku.
- Zkopírujte naformátovaný kód z výstupního editoru.
Příklady
Zpřehlednění minifikovaného CSS e-shopu
Vstup
.produkt{display:flex;gap:16px}.cena{color:#b32025;font-weight:700}.kosik{padding:12px 24px;border-radius:4px}Výstup
.produkt {
display: flex;
gap: 16px;
}
.cena {
color: #b32025;
font-weight: 700;
}
.kosik {
padding: 12px 24px;
border-radius: 4px;
}Vnořená pravidla s tabulátory a závorkami na novém řádku
Vstup
@media (min-width:768px){.nabidka{display:grid;grid-template-columns:repeat(3,1fr);&:hover{background:#f5f5f5}}}Výstup
@media (min-width:768px)
{
.nabidka
{
display: grid;
grid-template-columns: repeat(3, 1fr);
&:hover
{
background: #f5f5f5;
}
}
}Řazení A–Z: vlastní vlastnosti první, bezpečná výjimka u margin, licenční komentář zůstane
Vstup
/*! Licence MIT */
/* Karta článku */
.clanek{padding:16px;color:#333;--barva:#1264a3;background:#fff}
.nadpis{margin-top:8px;margin:0;color:var(--barva)}Výstup
/*! Licence MIT */
.clanek {
--barva: #1264a3;
background: #fff;
color: #333;
padding: 16px;
}
.nadpis {
margin-top: 8px;
margin: 0;
color: var(--barva);
}Tipy
- Pro SCSS nebo LESS použijte Formátování kódu.
- Potřebujete co nejmenší soubor? Minifikujte CSS.
- Porovnejte stav před a po v nástroji Porovnání textů.
Časté dotazy
Odesílá se moje CSS na server?
CSS se zpracovává ve vašem prohlížeči a nástroj ho na server neodesílá. Neukládá ani vložený kód; v localStorage si pamatuje pouze nastavení voleb.
Proč se místo výsledku zobrazí chyba?
Při chybě syntaxe se výstup vymaže a zobrazí se číslo řádku a sloupce. Zvýrazněný řádek ve vstupu vám pomůže najít například chybějící složenou závorku } nebo dvojtečku.
Můžu zde formátovat SCSS nebo LESS?
Tento nástroj je určený pro běžné CSS. Pro SCSS a LESS použijte nástroj Formátování kódu.
Jaké soubory můžu použít?
Přijímají se soubory s příponou .css nebo .txt. Soubor větší než 10 MB rozdělte na menší části.
Proč se větší CSS neformátuje při psaní?
Automatické formátování při psaní funguje jen do 100 KB vstupu. U většího vstupu spusťte formátování klávesovou zkratkou Ctrl+Enter nebo Cmd+Enter.