Przejdź do treści
TextArray
100% lokalnie

Formatowanie CSS

Sformatuj zminifikowany lub nieuporządkowany CSS na czytelne, wcięte reguły.

Wejście
Wynik

Formatowanie CSS

Wklej zminifikowany lub ręcznie zaplątany CSS, a narzędzie rozwinie go w czysty, czytelny arkusz: jedna deklaracja w wierszu, selektor z otwierającym nawiasem klamrowym w jednym wierszu, nawias zamykający w osobnym i pusty wiersz między regułami najwyższego poziomu. Bloki zagnieżdżone, takie jak @media, @supports oraz zagnieżdżone selektory, są wcięte o jeden poziom głębiej, więc struktura arkusza jest jasna na pierwszy rzut oka.

Narzędzie czyta CSS znak po znaku, a nie dzieli go zgrubnie według wzorców, więc nie zawiesza się nawet na trudnej zawartości. Ciągi zachowują dokładną treść, więc content: "a{b}" przetrwa razem z nawiasami w środku. Zawartość url() jest kopiowana dosłownie, więc URI danych z własnymi średnikami i dwukropkami — url(data:image/png;base64,...) — pozostaje zupełnie nietknięte. Komentarze zostają słowo w słowo w osobnym wierszu z bieżącym wcięciem.

Wynik dostrajają trzy opcje. Wcięcie przełącza między dwiema spacjami, czterema spacjami a tabulatorem. Każdy selektor w osobnym wierszu umieszcza każdy selektor listy oddzielonej przecinkami w oddzielnym wierszu, co przydaje się przy długich zgrupowanych regułach i czystszych różnicach. Pusty wiersz między regułami można wyłączyć, gdy chcesz mieć arkusz bardziej zwarty. Licznik na żywo podczas pisania sumuje reguły, deklaracje i wiersze wyniku, przy czym liczba reguł jest wyróżniona.

To odpowiednik minifikatora CSS: użyj go, aby ponownie uczynić skompresowany plik produkcyjny edytowalnym, ujednolicić niespójny kod od wielu autorów albo po prostu przeczytać arkusz, którego nie pisałeś. Wszystko działa wyłącznie w twojej przeglądarce — twój CSS nie jest nigdzie wysyłany.

Częste pytania

Czy zmienia moje wartości CSS lub nazwy właściwości?
Nie. Dodaje i normalizuje jedynie odstępy i podziały wierszy. Selektory, właściwości, wartości, kolory, jednostki, zawartość url() i komentarze pozostają dokładnie tak, jak zostały napisane.
Czy nawiasy w ciągach lub url() zepsują formatowanie?
Nie. Skaner znaków śledzi stan ciągów, komentarzy i url(), więc content: "a{b}" oraz url(data:...;base64,...) są kopiowane dosłownie i nigdy nie są traktowane jako struktura.
Co robi opcja „Każdy selektor w osobnym wierszu"?
Umieszcza każdy selektor listy oddzielonej przecinkami w osobnym wierszu, więc h1, h2, h3 staje się trzema wierszami nad otwierającym nawiasem. Przecinki wewnątrz :is() lub selektorów atrybutów nigdy się nie dzielą.
Czy potrafi naprawić nieprawidłowy CSS?
Formatuje najlepiej jak potrafi i nigdy nie zgłasza błędu na wadliwym wejściu, ale nie waliduje ani nie naprawia CSS. Brakujące nawiasy lub luźne znaki rozkłada tak, jak pozwala struktura.
Czy mój CSS jest gdzieś wysyłany?
Nie. Formatowanie działa wyłącznie w twojej przeglądarce, a twój CSS nigdy nie opuszcza twojego urządzenia.