Minifikator CSS

Jak tego używać

1. Wklej swój CSS, otwórz plik .css albo zacznij od przykładu.
2. Zminifikowany CSS pojawia się w trakcie pisania, z rozmiarem przed i po.
3. Skopiuj go albo pobierz jako styles.min.css.

Co robi

Minifikator CSS używa CSSO, które robi więcej niż usuwanie białych znaków i komentarzy:

• Skraca wartości: #ff0000 staje się red, 0px staje się 0, a padding: 0 16px 0 16px staje się padding: 0 16px.
• Łączy reguły o tym samym selektorze oraz selektory o tych samych deklaracjach.
• Usuwa deklaracje nadpisane przez późniejsze w tej samej regule.

Wprowadza tylko zmiany, które zachowują znaczenie arkusza, więc strony wyglądają tak samo.

Czy warto?

Arkusze stylów blokują wyświetlenie strony, dopóki się nie załadują, więc mniejszy CSS to szybsze pierwsze renderowanie. Minifikacja zwykle oszczędza kolejne 5–15% ponad kompresję gzip lub Brotli stosowaną przez hosting, więcej, gdy arkusz ma dużo komentarzy. Jeśli używasz narzędzia do budowania, takiego jak Vite, ono już minifikuje CSS na produkcję; ta strona jest dla arkuszy pisanych i publikowanych ręcznie.

Najczęstsze pytania

Czy minifikacja może zepsuć mój CSS?

Zmiany CSSO zachowują znaczenie poprawnego CSS. Hacki dla starych przeglądarek, oparte na niepoprawnej składni, mogą nie przetrwać. Trzymaj czytelną wersję jako źródło i minifikuj kopię.

Czy usuwa nieużywany CSS?

Nie: nie widzi, których selektorów używają Twoje strony. Robią to narzędzia takie jak PurgeCSS podczas builda.

Jak odzyskać czytelną wersję?

Zachowaj oryginał. Formatowanie CSS ponownie wcina zminifikowany CSS, ale komentarze znikają na zawsze.

Czy mój CSS jest wysyłany?

Nie. Jest minifikowany w Twojej przeglądarce.