TanodTools
PL

Minifikuj i upiększaj CSS

Wklej arkusz stylów, aby go zmniejszyć na potrzeby produkcji albo czytelnie sformatować, i zobacz, ile bajtów zaoszczędzisz.

Działa w całości w Twojej przeglądarce

Tryb
Komentarze

Dane wejściowe do około 10 MB. Usuwa tylko białe znaki i komentarze; nie scala reguł, nie przepisuje wartości i nie usuwa nieużywanego CSS.

Jak zminifikować lub upiększyć CSS

  1. Wklej CSS w polu albo naciśnij Wstaw przykład.
  2. Wybierz Minifikuj, aby go skompresować, albo Upiększ, aby sformatować go z wybranym wcięciem. Przy minifikacji zaznacz lub odznacz opcję komentarzy licencyjnych.
  3. Sprawdź zaoszczędzony rozmiar, a potem skopiuj wynik lub pobierz go jako plik .css.

Minifikacja CSS bez psucia

Minifikacja arkusza stylów to usunięcie wszystkiego, co przeglądarka ignoruje: komentarzy, wcięć, podziałów wierszy i spacji wokół znaków interpunkcyjnych. Mniejsze pliki szybciej się pobierają i parsują, a dla dużego arkusza oszczędność wynosi często od jednej czwartej do połowy rozmiaru przed kompresją. Reguły i ich kolejność pozostają dokładnie takie, jak zapisano.

Trudność polega na rozpoznaniu, które białe znaki przeglądarka ignoruje. Spacja między dwoma selektorami, jak w nav a, to kombinator oznaczający „dowolny potomek”, więc nav a i nava to różne rzeczy. Wewnątrz calc(1rem + 2px) spacje wokół + są wymagane, a calc(1rem+2px) jest nieprawidłowe. Tekst w cudzysłowach i wewnątrz url() to dane, a nie składnia. Minifikator zbudowany na wyrażeniach regularnych często myli się w jednym z tych przypadków; ten odczytuje arkusz jako ciąg tokenów i usuwa białe znaki tylko tam, gdzie gramatyka czyni je opcjonalnymi.

Upiększanie to kierunek przeciwny: jedna deklaracja w wierszu, wcięta wewnątrz nawiasów klamrowych, dzięki czemu zminifikowany plik z CDN staje się czymś, co można czytać i porównywać.

Wskazówki

Najczęstsze pytania

Czy mój CSS jest przesyłany?

Nie. Minifikacja działa w przeglądarce, a biblioteka upiększania jest ładowana z tej strony tylko wtedy, gdy wybierzesz Upiększ. Twój arkusz stylów nigdy nie jest nigdzie wysyłany.

Co dokładnie zmienia Minifikuj?

Usuwa komentarze oraz białe znaki wokół nawiasów klamrowych, średników, przecinków i kombinatorów (>, ~, +) i pomija ostatni średnik w każdym bloku. Zachowuje spację w a b (kombinator potomka), w and (min-width: ...) oraz wokół + i - wewnątrz calc(), clamp(), min() i max(), gdzie jej usunięcie zepsułoby wartość.

Czy rusza ciągi znaków i url()?

Nie. Wszystko w cudzysłowach, także tekst wyglądający jak komentarz lub nawias klamrowy, oraz zawartość url() są kopiowane znak po znaku.

Czy skraca kolory lub liczby?

Nie. Wartości takie jak #336699, 0.5em i 0px zostają tak, jak je zapisano. Takie przepisywanie oszczędza niewiele i niesie pewne ryzyko, więc usuwane są tylko białe znaki i komentarze.

Skąd wiem, że zminifikowany CSS jest bezpieczny?

Po każdym uruchomieniu strona parsuje oryginał i wynik własnym parserem CSS przeglądarki i porównuje to, co odczytał. Jeśli się różnią, nad wynikiem pojawia się komunikat. Zgodność oznacza, że przeglądarka widzi te same reguły.

Czym są komentarze licencyjne?

Komentarze zaczynające się od /*! są zwyczajowo zachowywane przez minifikatory, bo zawierają informacje o prawach autorskich lub licencji, które licencja może wymagać zachować. Wyłącz opcję, aby je także usunąć.