CSS Minifier — Minifikator CSS

Co robi minifikator CSS

To narzędzie zmniejsza arkusze stylów za pomocą CSSO (CSS Optimizer) – minifikatora, który rozumie CSS, zamiast traktować go jak zwykły tekst. W pierwszym przebiegu wykonuje bezpieczne porządki: usuwa białe znaki i komentarze, skraca kolory (#ff0000 zmienia się w red, a #ffffff w #fff), usuwa jednostki z wartości zerowych, pozbywa się zbędnych cudzysłowów i średników oraz zapisuje liczby w najkrótszej postaci. Wynikiem jest w pełni równoważny CSS, który jest wyraźnie mniejszy.

Po włączeniu opcji restructure (restrukturyzacja) CSSO idzie dalej i optymalizuje strukturę arkusza. Reguły z tym samym selektorem są scalane, selektory o identycznych deklaracjach są grupowane, właściwości nadpisywane dalej w tej samej regule są usuwane, a rozpisane deklaracje, takie jak osobne marginesy, mogą zostać połączone w zapis skrócony. CSSO dba o zachowanie kaskady: przenosi lub scala reguły tylko wtedy, gdy nie może to zmienić, która deklaracja wygrywa.

Jak czytać wyniki

Plakietki pokazują rozmiar danych wejściowych i wyjściowych w UTF-8 oraz procent oszczędności. Ręcznie pisany CSS z komentarzami i wcięciami często kurczy się o 20–50%. Kod generowany przez frameworki, który jest już zwarty, zyska mniej, natomiast arkusze powtarzające te same deklaracje w wielu selektorach najbardziej korzystają na restrukturyzacji. Serwery zwykle stosują dodatkowo gzip lub Brotli, więc minifikacja i kompresja uzupełniają się, a nie konkurują ze sobą.

Prywatnie i bezpiecznie

Minifikator działa w całości w Twojej przeglądarce – nic nie jest wysyłane, logowane ani zapisywane. Dzięki temu przydaje się do inline’owego krytycznego CSS, szablonów e-mail, osadzanych widżetów lub szybkich poprawek na komputerze bez Twoich zwykłych narzędzi do budowania. Zachowaj komentarze /*! ... */, jeśli arkusz zawiera licencje zewnętrzne, które muszą pozostać. W przypadku stron produkcyjnych dodaj minifikator do procesu budowania, aby każde wdrożenie było optymalizowane automatycznie, i zawsze sprawdzaj wynik wizualnie, gdy Twój CSS korzysta z hacków przeglądarkowych lub nietypowej składni.