Minifikator CSS

Wklej arkusz stylów, aby usunąć białe znaki i komentarze, skrócić wartości, np. #ff0000 → red, i scalić zduplikowane reguły dzięki strukturalnym optymalizacjom CSSO.

Działa w przeglądarceBez rejestracjiNic nie jest wysyłane

Zminifikowany wynik

Jak używać: Minifikator CSS

  1. Wklej CSS lub otwórz plik .css.
  2. Pozostaw włączoną Restrukturyzację, aby scalać reguły i deklaracje, lub wyłącz ją dla bezpiecznego przebiegu usuwającego tylko białe znaki.
  3. Pozostaw włączone Zachowaj komentarze licencyjne, aby zachować informacje /*! … */.
  4. Porównaj rozmiar oryginalny, po minifikacji i po gzip.
  5. Skopiuj wynik lub pobierz output.min.css.

Jak działa minifikacja CSS

To narzędzie używa CSSO (CSS Optimizer), który parsuje arkusz stylów do drzewa składni i zapisuje go z powrotem w najkrótszej równoważnej postaci. Poza usuwaniem białych znaków i komentarzy stosuje bezpieczne przepisania wartości:

  • #ffffff → #fff, #ff0000 → red
  • 0px → 0, 0.90 → .9
  • margin: 8px 16px 8px 16px → margin:8px 16px
  • Puste reguły i zduplikowane deklaracje są usuwane

Co robi „restrukturyzacja”?

Restrukturyzacja analizuje cały arkusz stylów: reguły z identycznymi deklaracjami są scalane w jedną listę selektorów (.a,.b{color:red}), a powtarzające się selektory łączone. Na prawdziwych arkuszach często daje to dodatkowe 5–15% oszczędności. CSSO scala reguły tylko wtedy, gdy kolejność kaskady pozostaje taka sama, ale jeśli polegasz na nietypowych nadpisaniach, możesz ją wyłączyć dla czysto składniowej minifikacji.

Po co minifikować CSS?

CSS blokuje renderowanie: przeglądarka nie może narysować strony, dopóki arkusze stylów w <head> nie zostaną pobrane i sparsowane. Mniejszy CSS oznacza szybszy First Contentful Paint i lepsze Core Web Vitals, co pomaga zarówno użytkownikom, jak i pozycjom w wyszukiwarce. Połącz minifikację z gzip lub Brotli na serwerze, aby uzyskać najlepszy efekt.

Najczęściej zadawane pytania

Czy minifikacja CSS jest bezpieczna?
Tak. Białe znaki i komentarze nie wpływają na renderowanie CSS, a przepisania wartości w CSSO są równoważne zgodnie ze specyfikacją. Restrukturyzacja zachowuje kolejność kaskady; wyłącz ją, jeśli chcesz najbardziej zachowawczego wyniku.
Czy obsługuje nowoczesny CSS, np. custom properties, zagnieżdżanie i @layer?
Tak. Custom properties (--var), @media, @supports, @layer, @container i składnia grid są zachowywane.
Czy mogę później cofnąć minifikację CSS?
Zminifikowany CSS można ponownie sformatować dowolnym formaterem, ale usuniętych komentarzy nie da się odzyskać. Zachowaj oryginalny plik źródłowy i traktuj zminifikowany plik jako wynik builda.
Czy mój arkusz stylów jest gdzieś wysyłany?
Nie. Minifikacja działa w przeglądarce; nic nie trafia na serwer.

Powiązane narzędzia

Minifikator JavaScript Kompresuj i skracaj JS z Terser, ze statystykami rozmiaru i gzip. Minifikator HTML Usuń komentarze i białe znaki, zminifikuj osadzony CSS/JS. Formater SQL Formatuj lub minifikuj SQL dla PostgreSQL, MySQL, T-SQL, BigQuery i innych. Formater JSON Formatuj, minifikuj i waliduj JSON z błędami linia/kolumna.