Jak używać
- Wklej kod CSS do edytora.
- W polu „Wcięcie” wybierz „2 spacje”, „4 spacje” lub „Tabulator”.
- W polu „Klamry” wybierz „W tej samej linii” lub „W nowej linii”.
Przykłady
Czytelne style karty produktu
.karta-produktu{background:#fff;padding:16px;border-radius:8px}.cena{color:#b42318;font-weight:700}.karta-produktu {
background: #fff;
padding: 16px;
border-radius: 8px;
}
.cena {
color: #b42318;
font-weight: 700;
}Zagnieżdżone style menu i klamry w nowej linii
@media (min-width:768px){.menu{display:flex;gap:16px;& a{color:#222;&:hover{color:#0057b8}}}}@media (min-width:768px)
{
.menu
{
display: flex;
gap: 16px;
& a
{
color: #222;
&:hover
{
color: #0057b8;
}
}
}
}Bezpieczne sortowanie A–Z i usuwanie komentarzy z zachowaniem /*! licencji */
/*! Licencja MIT */
/* Style sklepu */
.koszyk{padding:16px;color:#222;background:#fff;--akcent:#0057b8}.przycisk{margin-top:8px;margin:0;color:var(--akcent)}/*! Licencja MIT */
.koszyk {
--akcent: #0057b8;
background: #fff;
color: #222;
padding: 16px;
}
.przycisk {
margin-top: 8px;
margin: 0;
color: var(--akcent);
}Wskazówki
- Do SCSS lub LESS użyj narzędzia Formatowanie kodu.
- Potrzebujesz jak najmniejszego pliku? Minifikuj CSS.
- Porównaj przed i po w narzędziu Porównywarka tekstów.
FAQ
Czy mój kod CSS jest wysyłany na serwer?
Kod jest przetwarzany w przeglądarce i nie jest wysyłany na serwer przez narzędzie. CSS nie jest zapisywany; zapamiętywane są tylko ustawienia opcji.
Jak znaleźć błąd składni w CSS?
Przy błędzie składni narzędzie podaje numer linii i kolumny oraz podświetla problematyczną linię w edytorze. Wynik jest wtedy pusty; popraw wskazany fragment kodu.
Dlaczego duży kod CSS nie formatuje się automatycznie?
Automatyczne formatowanie działa do 100 KB danych wejściowych. Przy większym kodzie pojawia się przycisk „Formatuj CSS”. Możesz też użyć skrótu Ctrl+Enter lub Cmd+Enter na Macu.
Jakie pliki CSS mogę wczytać?
Możesz wczytać pliki z rozszerzeniem .css lub .txt. Pliki większe niż 10 MB są odrzucane; podziel je na mniejsze części.
Czy można tu formatować SCSS i LESS?
To narzędzie jest przeznaczone do zwykłego CSS. Do SCSS i LESS użyj narzędzia „Formatowanie kodu”. Jeśli parser wykryje błąd i rozpozna taką składnię, wyświetli odpowiednią wskazówkę. Prosty SCSS, np. „$a: 1;”, może zostać sformatowany bez błędu.