Jednorazowe wysłanie snippetu CSS inline w mailu HTML albo szablonie blogowym, gdzie chcesz zmniejszyć bajty, ale nie masz pipeline'u buildowego. Szybkie sprawdzenie, ile "tłuszczu" jest w stylesheecie, zanim zdecydujesz, czy warto podpiąć prawdziwy optymalizator. Wklejanie pretty-printed CSS od jakiegoś dostawcy, żeby go odchudzić do włączenia w widget zewnętrzny.

Wycina komentarze blokowe ( /* … */ ) — single-line // i tak nie jest poprawnym czystym CSS-em. Zwija białe znaki wokół { } : ; , i kombinatorów ( > ~ + ). Ucina końcowe średniki przed } . Wycina wiodące zera ( 0.5 → .5 ) i usuwa jednostki z zera ( 0px → 0 ). Skraca kolory hex, gdzie to bezstratne ( #aabbcc → #abc ).

To strukturalna minifikacja, nie pełny optymalizator. Nie zmerguje duplikatów selektorów, nie przegrupuje reguł ani nie przepisze shorthandów. Do tego użyj cssnano albo esbuilda w pipeline buildowym. Source mapy nie są generowane. Jeśli debugujesz zminifikowany CSS na produkcji, wysyłaj je osobno. Nie commituj zminifikowanego CSS-a. Commituj ładne źródło; minifikuj na buildzie/deployu. Mieszanie tych dwóch sprawia, że review diffów staje się męką. Nowoczesna kompresja dominuje. Brotli/gzip na drucie robi większość tego, co minifikacja. Największe oszczędności biorą się z usuwania nieużywanych reguł — to robota dla tree-shakingu, nie minifikacji.

Minifikator CSS

Usuń komentarze, białe znaki i nadmiarowość z CSS. Zobacz rozmiar przed/po i procent oszczędności.

Wejście

Wyjście

Do czego to służy?

CSS, który jest czytelny w źródle — z komentarzami, wcięciami i znaczącymi białymi znakami — pęcznieje plik, który ściągają twoi użytkownicy. Strukturalny minifikator wycina wszystkie kosmetyczne bajty (komentarze, ciągi białych znaków, redundantne zera, krótsze równoważne kody hex) bez zmiany znaczenia reguł. To narzędzie robi tę przejazdkę w przeglądarce i pokazuje rozmiar przed/po, żebyś zobaczył oszczędność.

Kiedy tego użyć

Jednorazowe wysłanie snippetu CSS inline w mailu HTML albo szablonie blogowym, gdzie chcesz zmniejszyć bajty, ale nie masz pipeline'u buildowego.
Szybkie sprawdzenie, ile "tłuszczu" jest w stylesheecie, zanim zdecydujesz, czy warto podpiąć prawdziwy optymalizator.
Wklejanie pretty-printed CSS od jakiegoś dostawcy, żeby go odchudzić do włączenia w widget zewnętrzny.

Co robi

Wycina komentarze blokowe (/* … */) — single-line // i tak nie jest poprawnym czystym CSS-em.
Zwija białe znaki wokół { } : ; , i kombinatorów (> ~ +).
Ucina końcowe średniki przed }.
Wycina wiodące zera (0.5 → .5) i usuwa jednostki z zera (0px → 0).
Skraca kolory hex, gdzie to bezstratne (#aabbcc → #abc).

Częste pułapki

To strukturalna minifikacja, nie pełny optymalizator. Nie zmerguje duplikatów selektorów, nie przegrupuje reguł ani nie przepisze shorthandów. Do tego użyj cssnano albo esbuilda w pipeline buildowym.
Source mapy nie są generowane. Jeśli debugujesz zminifikowany CSS na produkcji, wysyłaj je osobno.
Nie commituj zminifikowanego CSS-a. Commituj ładne źródło; minifikuj na buildzie/deployu. Mieszanie tych dwóch sprawia, że review diffów staje się męką.
Nowoczesna kompresja dominuje. Brotli/gzip na drucie robi większość tego, co minifikacja. Największe oszczędności biorą się z usuwania nieużywanych reguł — to robota dla tree-shakingu, nie minifikacji.