Formater CSS
Działa w całości w Twojej przeglądarce. Twoje pliki i dane nigdy nie opuszczają Twojego urządzenia.
O tym narzędziu
Wklej arkusz stylów albo fragment CSS, a narzędzie sformatuje go ze spójnymi wcięciami albo ściśnie do jednej gęstej linii. Nawet niepoprawny CSS z niezamkniętymi klamrami czy urwanymi regułami zostanie sformatowany zamiast wywołać błąd, więc możesz uporządkować kod bez wcześniejszego naprawiania każdego problemu ze składnią.
Jak działa formatowanie i minifikacja?
Formatowanie opiera się na bibliotece js-beautify, w której możesz wybrać wcięcia po 2 spacje, 4 spacje albo tabulator. Działa na tokenach zamiast na ścisłym parserze, więc arkusz z brakującą klamrą zamykającą albo przypadkowym średnikiem i tak wyjdzie sensownie wcięty zamiast zgłosić błąd. Ma to znaczenie, gdy porządkujesz CSS skopiowany z narzędzi deweloperskich przeglądarki albo z niedokończonego pliku. Minifikacja idzie w przeciwną stronę: usuwa komentarze, zwija białe znaki i pozbywa się zbędnych spacji wokół { } ; : , >, zostawiając nietkniętą zawartość cudzysłowów i wywołań url(...), dzięki czemu ścieżka albo nazwa czcionki ze spacją przetrwa bez zmian.
Minifikator to zestaw operacji na wyrażeniach regularnych, a nie pełny parser CSS, więc ma parę znanych przypadków brzegowych: url() zawierający dosłowny nawias zamykający wewnątrz cudzysłowu nie zostanie obsłużony poprawnie, a zwijanie spacji przed dwukropkiem może połączyć kombinator potomka z następującą pseudoklasą (zamieniając a :hover w a:hover, co zmienia znaczenie selektora). Oba przypadki są rzadkie w prawdziwym kodzie CSS, a narzędzie akceptuje to niewielkie ryzyko w zamian za to, że nigdy nie zawiesza się na niechlujnych danych wejściowych.
Czy mój CSS jest gdzieś wysyłany?
Nie. Formatowanie i minifikacja odbywają się całkowicie w przeglądarce dzięki dołączonej bibliotece, nic nie trafia na żaden serwer. Zastrzeżone arkusze stylów, praca dla klienta czy zeskrobane fragmenty z prawdziwą treścią zostają na twoim komputerze, co jest przydatne, gdy CSS pochodzi z wewnętrznego kodu firmy, którego wolisz nie wklejać do przypadkowego formularza w sieci.
Typowe zastosowania: porządkowanie zminifikowanego arkusza zapisanego przez „pokaż źródło”, zmniejszanie pliku CSS przed publikacją albo przeformatowanie stylów komponentu na spójną szerokość wcięć przed code review. Zobacz dokumentację składni CSS na MDN, żeby przypomnieć sobie, jak selektory, deklaracje i reguły at-rule łączą się w całość.