Jak używać

Wklej CSS do pola wejściowego, otwórz plik .css lub wypróbuj przykład.
Wybierz Upiększ, aby uzyskać czytelny kod, lub Minifikuj, aby uzyskać najmniejszy wynik.
Podczas upiększania wybierz 2 spacje, 4 spacje lub tabulatory.
Skopiuj wynik lub pobierz go jako plik .css. Jeśli nawiasy klamrowe lub cudzysłowy są niesparowane, błąd pokaże wiersz i kolumnę.

Jak to działa

Formatter najpierw dzieli arkusz stylów na tokeny: ciągi w pojedynczych lub podwójnych cudzysłowach, wartości url(…), komentarze, nawiasy klamrowe i średniki. Ponieważ ciągi i url() są pojedynczymi tokenami, średnik wewnątrz identyfikatora data URI ani nawias klamrowy w treści content: "{ }" nigdy nie zaburza struktury, a ich zawartość jest kopiowana dokładnie.

Beautify umieszcza każdy selektor z listy selektorów w osobnej linii, dodaje spacje wokół kombinatorów dziecka, rodzeństwa i bezpośredniego rodzeństwa (>, ~, +) oraz zapisuje każdą deklarację jako „właściwość: wartość;” w osobnej linii. Bloki wewnątrz @media, @supports, @layer, @container i natywnego zagnieżdżania CSS są wcinane o jeden poziom na każdą głębokość. Brakujący średnik po ostatniej deklaracji bloku jest dodawany. Komentarze pozostają na swoim miejscu.

Minify usuwa komentarze (z wyjątkiem informacji licencyjnych /*! … */), zwija białe znaki, usuwa spacje wokół nawiasów klamrowych, dwukropków, średników, przecinków i kombinatorów selektorów oraz pomija średnik przed każdym zamykającym nawiasem klamrowym. Spacje, które zmieniają znaczenie, są zachowywane: kombinator potomny w „.a .b”, spacja w „a :focus” oraz spacje wewnątrz wartości, np. calc(100% - 2px). „! important” jest normalizowane do „!important”.

Narzędzie nie przepisuje wartości: kolory, jednostki i zera pozostają zapisane tak jak były, a reguły nie są scalane ani zmieniane w kolejności. Pliki SCSS lub Less ze zwykłym zagnieżdżaniem zwykle działają, ale ich własna składnia, taka jak komentarze // lub mixiny, nie jest rozpoznawana.

Przykłady

Czytanie zminifikowanego pliku frameworka

Wklej jednoliniowy fragment bootstrap.min.css i wybierz Beautify z 2 spacjami, aby zobaczyć każdą regułę, zapytania medialne i ich zagnieżdżone reguły w osobnych, wciętych wierszach.

Wdrażanie ręcznie napisanego arkusza stylów

Zminifikuj arkusz stylów o wielkości 12 KB z komentarzami i wcięciami, zanim dodasz go inline do szablonu e-maila lub do sekcji head strony. Podsumowanie pokazuje liczbę znaków przed i po.

Znajdowanie brakującego nawiasu klamrowego

Arkusz stylów przestaje działać w połowie. Formatter zgłasza „Ten { nigdy nie jest zamknięty pasującym }” wraz z wierszem reguły, w którym brakuje zamykającego nawiasu klamrowego.

Często zadawane pytania

Czy zminifikowany CSS z tego narzędzia jest bezpieczny w użyciu produkcyjnym?

Usuwa tylko komentarze i białe znaki, które CSS ignoruje, więc reguły działają tak samo. Nie wykonuje głębszych optymalizacji typowych dla narzędzi do budowania, takich jak scalanie reguł czy skracanie kolorów, dlatego wynik może być nieco większy niż w ich przypadku.

Dlaczego spacja jest zachowywana w „a :focus”?

W selektorze spacja jest kombinatorem potomka. „a :focus” oznacza element z fokusem wewnątrz łącza, a „a:focus” oznacza łącze z fokusem. Usunięcie tej spacji zmieniłoby, które elementy pasują.

Czy można formatować SCSS lub Less?

Zwykłe reguły zagnieżdżone są formatowane poprawnie. Składnia dostępna tylko w preprocesorach, taka jak komentarze //, miksiny z argumentami lub bloki @if, nie jest rozpoznawana i może zostać sformatowana dziwnie, więc sprawdź wynik.

Czy komentarze licencyjne są usuwane podczas minifikacji?

Komentarze zaczynające się od /*! są zachowywane, co jest typową konwencją dla informacji o licencji i prawach autorskich. Wszystkie inne komentarze są usuwane.

Prywatność

Twój CSS jest przetwarzany tylko w Twojej przeglądarce. Nic nie jest wysyłane, przechowywane ani uwzględniane w analityce.