Mechanizm korzysta ze skanera rozpoznającego składnię, zamiast dzielić kod bez namysłu przy każdym nawiasie klamrowym i średniku. Śledzi ciągi znaków, komentarze, funkcje, selektory atrybutów i zagnieżdżone bloki, dlatego interpunkcja wewnątrz adresu URL lub wartości w cudzysłowie pozostaje bez zmian.
Darmowe formatowanie CSS
Działa w całości w przeglądarce - bez wysyłania plików i bez rejestracji.
Wejściowy CSS
Sformatowany CSS
Wklej CSS do sformatowania
Na czym polega formatowanie CSS?
Formatowanie CSS zmienia skompresowany lub nierówno zapisany arkusz stylów w czytelny kod ze spójnymi wcięciami i podziałem na wiersze. Wklej CSS, wybierz dwie spacje, cztery spacje albo tabulator, a następnie skopiuj lub pobierz wynik. Całość działa w przeglądarce i zachowuje kolejność deklaracji.
Jak korzystać
- 1Wklej CSS. Dodaj do pola wejściowego arkusz stylów, blok selektorów albo fragment skompresowanego CSS.
- 2Wybierz wcięcia. Ustaw dwie spacje, cztery spacje lub tabulator. Sformatowany wynik odświeży się od razu.
- 3Sprawdź stan. Przejrzyj statystyki struktury albo popraw niedomknięty separator, komentarz bądź ciąg znaków.
- 4Skopiuj lub pobierz. Skopiuj sformatowany CSS do schowka albo zapisz go jako formatted.css.
Dla kogo
- Programiści front-end mogą rozwinąć produkcyjny CSS, aby łatwiej go przejrzeć i znaleźć błąd.
- Osoby wykonujące code review mogą ujednolicić wcięcia przed porównaniem arkusza stylów lub fragmentu z pull requestu.
- Osoby uczące się CSS szybciej rozpoznają strukturę zagnieżdżonych media queries, selektorów i bloków deklaracji.
- Zespoły wsparcia i QA mogą uporządkować CSS skopiowany z narzędzi przeglądarki przed dodaniem go do zgłoszenia.
Najczęstsze pytania
Czy formatowanie CSS jest darmowe?
Tak. Możesz formatować tyle CSS, ile przeglądarka jest w stanie wygodnie obsłużyć. Nie trzeba zakładać konta ani niczego instalować, nie ma też limitu użycia. Wynik pojawia się od razu.
Czy mój CSS jest wysyłany na serwer?
Nie. Formatowanie odbywa się lokalnie w przeglądarce. Wklejony CSS pozostaje w edytorze na stronie i nie trafia do API, więc narzędzie nadaje się także do prywatnego kodu projektu.
Jak duży arkusz CSS mogę sformatować?
Nie ma stałego limitu znaków. Bardzo duże, automatycznie wygenerowane arkusze nadal zależą od pamięci urządzenia i możliwości przeglądarki, ale typowy CSS strony, komponentu lub wiadomości e-mail powinien zostać przetworzony szybko.
Czy formatowanie zmienia działanie CSS?
Formatter zmienia odstępy i podział na wiersze, zachowując selektory, deklaracje, komentarze, ciągi w cudzysłowie oraz ich kolejność. Przed publikacją sprawdź wynik, zwłaszcza gdy kod korzysta z eksperymentalnej składni lub sekwencji ucieczki wrażliwych na odstępy.
Czy narzędzie sprawdza poprawność właściwości CSS?
Nie. Kontroluje wyłącznie równowagę nawiasów klamrowych, kwadratowych i okrągłych, komentarzy oraz ciągów znaków. Nie ocenia, czy każda właściwość, wartość albo funkcja konkretnej przeglądarki jest poprawna semantycznie.
Czy można formatować media queries i zagnieżdżony CSS?
Tak. Bloki w regułach takich jak media, supports, container, layer i keyframes otrzymują wcięcie zgodne z poziomem zagnieżdżenia. Nowoczesne selektory zagnieżdżone także są porządkowane bez zmiany ciągów i argumentów funkcji.