Minifikacja i formatowanie CSS

Wklej arkusz stylów i kliknij „Minifikuj”, aby usunąć zbędne komentarze, spacje i znaki nowej linii, albo „Formatuj”, aby zamienić skompresowany CSS w czytelny kod z wcięciami. Wszystko dzieje się w Twojej przeglądarce.

Co robi minifikator?

Usuwa wszystko, czego przeglądarka nie potrzebuje: komentarze, wcięcia, znaki nowej linii, spacje wokół nawiasów klamrowych, dwukropków, przecinków i kombinatorów oraz ostatni średnik każdego bloku. Wynik jest zwykle o 15–30% mniejszy i działa dokładnie tak samo.

Nie ruszamy tego, czego nie wolno zmieniać: zawartości łańcuchów (content: "…"), ścieżek w url(), wymaganych spacji w calc() i zapytaniach o media oraz komentarzy zaczynających się od /*!, które zgodnie z konwencją zawierają licencje i należy je zachować.

Minifikacja na produkcji

Mniej bajtów to szybsze pobieranie i lepsze wskaźniki Core Web Vitals, zwłaszcza na telefonach. Oprócz minifikacji włącz na serwerze kompresję gzip lub Brotli, która zmniejsza CSS znacznie bardziej, i serwuj pliki z długim czasem przechowywania w pamięci podręcznej.

W projektach z etapem budowania (Vite, webpack, PostCSS…) minifikację wykonują automatycznie cssnano lub Lightning CSS; to narzędzie przydaje się przy prostych stronach, szablonach lub do odczytania (sformatowania) zminifikowanego CSS innej strony.