Uporządkuj arkusz stylów lub go zminifikuj i zobacz zaoszczędzony rozmiar
Działa w przeglądarce. Wpisane dane nie są nigdzie wysyłane.Formatowanie CSS dodaje wcięcia, dzięki którym arkusz stylów da się czytać, a minifikacja usuwa każdą spację i każdy komentarz na potrzeby produkcji. Zaoszczędzone bajty są pokazywane, więc zysk na pliku 2 KB widać przed podjęciem decyzji. Wszystko działa w przeglądarce i nic nie jest wysyłane.
Ta strona została przetłumaczona maszynowo z angielskiego oryginału. Tłumaczenie nie zostało jeszcze sprawdzone przez człowieka, dlatego wiążąca jest wersja angielska. Przeczytaj angielski oryginał
Wklej arkusz stylów w pole CSS lub kliknij Wypróbuj przykład.
Zostaw Formatuj, aby mieć jedną deklarację w wierszu, lub wybierz Minifikuj, aby uzyskać najmniejszy plik.
Przy Formatuj wybierz 2 spacje, 4 spacje lub Tab w sekcji Wcięcie.
Kliknij Kopiuj lub Pobierz, aby zabrać wynik.
To narzędzie do formatowania CSS ma dwa tryby. Formatuj układa arkusz stylów z jedną deklaracją w wierszu, równymi wcięciami i spójnymi odstępami wokół dwukropków i nawiasów klamrowych. Minifikuj usuwa komentarze i białe znaki, skraca kolory i jednostki oraz może scalać reguły o tym samym bloku, a potem pokazuje rozmiar przed, rozmiar po i procent oszczędności.
Przydaje się na obu końcach pracy. Na początku arkusz stylów przychodzi zminifikowany z CDN lub z wyniku builda i trzeba przeczytać regułę, która psuje układ. Na końcu jest ręcznie napisany plik i potrzebna jest najmniejsza wersja do wdrożenia. Tutaj jedno i drugie to wklejenie i jedno kliknięcie.
Do minifikacji służy csso. Opcja restrukturyzacji to część agresywna: scala reguły o identycznych blokach, usuwa deklaracje nadpisywane przez późniejszą regułę i zmienia kolejność tam, gdzie jest to bezpieczne. Zwykle daje kilka procent więcej, a wynik jest równoważny, ale przy przeglądaniu diffa lub gdy CSS zależy od kolejności w kodzie w sposób, którego narzędzie nie widzi, należy ją wyłączyć: wtedy znikają tylko białe znaki i komentarze. Komentarze zaczynające się od wykrzyknika, w których umieszcza się nagłówki licencji, można zachować.
Nad wynikiem widać liczbę reguł, selektorów, deklaracji i reguł @. Jeśli nawias klamrowy, komentarz lub cudzysłów zostanie otwarty, pojawia się wiersz i kolumna, w których się zaczął, oraz informacja, co dodać, zamiast surowego komunikatu parsera. Wszystko działa w przeglądarce, więc arkusz stylów z niewydanego projektu nigdy nie jest nigdzie wysyłany.
Tak. Bez rejestracji, bez limitu rozmiaru pliku i bez limitu liczby przetwarzanych arkuszy stylów. Stronę utrzymuje kilka reklam wyświetlanych poza narzędziem i nigdy nie wpływają one na wynik.
Nie. Formatowanie i minifikacja działają w przeglądarce za pomocą JavaScriptu. Arkusz stylów z niewydanego projektu lub wewnętrznego panelu administracyjnego nigdy nie opuszcza urządzenia i nic nie zostaje zapisane po zamknięciu karty.
Ręcznie napisany arkusz stylów z komentarzami i wcięciami zwykle traci od 15 do 30 procent, a restrukturyzacja dodaje kilka punktów, scalając zduplikowane reguły. Strona pokazuje dokładną liczbę bajtów przed i po, więc nie trzeba zgadywać.
Restrukturyzacja scala reguły o identycznych blokach, usuwa deklaracje nadpisywane przez późniejszą regułę i zmienia kolejność selektorów tam, gdzie jest to bezpieczne. Dodatkowa oszczędność to zwykle kilka procent ponad zwykłą minifikację. Należy ją wyłączyć, gdy mają zniknąć tylko białe znaki i komentarze, na przykład gdy potrzebny jest czytelny diff między dwoma buildami.
Tak. Wybierz Formatuj i wklej zminifikowany plik. Wraca z jednym selektorem w wierszu, jedną deklaracją w wierszu i media queries wciętymi wewnątrz swojego bloku. Nazwy selektorów, wartości i kolejność pozostają dokładnie takie, jak były.
Minifikacja nie powinna zepsuć poprawnego arkusza stylów. csso naprawdę parsuje CSS zamiast zastępować tekst, więc ciągi znaków, data URI i właściwości niestandardowe pozostają nietknięte. Jeśli pliku nie da się sparsować, pojawia się wiersz i kolumna zamiast zepsutego wyniku i nic nie jest kopiowane.
Nadal coś nie działa? Zapytaj o narzędzie Formatowanie i minifikacja CSS a odpowiedzieć może każdy, kto zna odpowiedź. Konto nie jest potrzebne.