Minifikator i formatator CSS

Czym jest to narzędzie?

Minifikator CSS przerabia arkusz stylów tak, by był jak najmniejszy, nie zmieniając przy tym sposobu jego renderowania: usuwa komentarze i spacje, skraca wartości kolorów oraz jednostki o wartości zerowej tam, gdzie jest to bezpieczne, łączy zduplikowane reguły i usuwa zbędne średniki.

Narzędzie to opiera się na bibliotece clean-css – optymalizatorze CSS, który faktycznie analizuje arkusz stylów, tworząc drzewo AST, zamiast korzystać z wyrażeń regularnych. Dzięki temu może bezpiecznie obsługiwać skrajne przypadki, które sprawiają kłopoty prostym narzędziom do minifikacji — niestandardowe właściwości CSS (--main-color: ...), treść zawarta w ciągach znaków oraz złożone selektory i zapytania o media — wszystko to jest przetwarzane poprawnie.

Dlaczego warto go używać?

• Minifikacja oparta na AST (clean-css), a nie na wyrażeniach regularnych — bezpieczna w przypadku właściwości niestandardowych, ciągów znaków i zagnieżdżonych zapytań o media.
• Optymalizacje poziomu 2 łączą i upraszczają reguły, co pozwala uzyskać dodatkowe oszczędności wykraczające poza zwykłe usuwanie spacji.
• Sprawdź dokładnie, ile bajtów i jaki procent udało Ci się zaoszczędzić.
• Tryb formatowania przekształca zminimalizowany arkusz stylów z powrotem w czytelny kod CSS z jednolitym wcięciem.
• W 100% lokalne przetwarzanie — autorskie lub niepublikowane style nigdy nie opuszczają Twojej przeglądarki.

Jak używać

1. Wklej swój kod CSS do pola wprowadzania danych lub kliknij „Załaduj przykład”, aby wypróbować przykład z niestandardową właściwością i zapytaniem o media.
2. Kliknij „Minifikuj”, aby skompresować kod, lub „Formatuj”, aby sformatować go z wcięciem o szerokości dwóch spacji.
3. Sprawdź komunikat wyświetlany pod polami — tryb minifikacji pokazuje zmniejszenie rozmiaru; w przypadku nieprawidłowego kodu CSS wyświetlany jest wyraźny komunikat o błędzie, zamiast generowania nieprawidłowego wyniku bez żadnego ostrzeżenia.
4. Kliknij „Kopiuj”, aby skopiować wynik.

Przykład

Wejście

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Wynik

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

Właściwości niestandardowe, zapytania o media oraz kolejność kaskadowa pozostają zachowane — usuwane są jedynie spacje, komentarze i zbędne znaki.

Praktyczne wskazówki

• Minifikuj kod w trakcie kompilacji lub wdrażania, a nie podczas tworzenia oprogramowania — edytuj czytelny kod źródłowy, a to narzędzie (lub Twój proces kompilacji) niech wygeneruje wersję przeznaczoną do dystrybucji.
• Jeśli próbujesz ustalić, dlaczego strona wygląda inaczej w środowisku produkcyjnym, sformatowanie najpierw zminifikowanego pliku CSS znacznie ułatwi odczytanie różnic w porównaniu z kodem źródłowym.
• Właściwości niestandardowe pozostają zachowane po minifikacji, więc arkusze stylów oparte na tokenach projektowych (wykorzystujące opcje --spacing, --color-* itp.) można bez obaw przetwarzać za pomocą tego narzędzia.
• Jeśli w ramach Twojego projektu wszystkie pliki są przechowywane osobno przed wydaniem, skorzystaj z poniższych narzędzi do minifikacji kodu HTML i JS.

Jak to się wpisuje w rzeczywiste procesy robocze

CSS to jeden z elementów, których minifikacja przynosi największe korzyści, ponieważ arkusze stylów domyślnie blokują renderowanie — każdy bajt usunięty z arkusza stylów może nieznacznie skrócić czas pierwszego wyświetlenia (first paint), zwłaszcza przy wolniejszych połączeniach. Korzyść jest mniejsza niż w przypadku optymalizacji obrazów, ale po wbudowaniu tego procesu w etap kompilacji nie wiąże się to praktycznie z żadnymi dodatkowymi kosztami.

Opcja „Formatuj” przydaje się w przypadku odwrotnego problemu: analizy arkusza stylów konkurencji lub starszego arkusza produkcyjnego, który został dostarczony w postaci zminifikowanej, w celu zrozumienia jego struktury przed napisaniem nadpisania lub przeprojektowaniem.

→ Minifikator HTML · Minifikator JS

Typowe zastosowania

• Kompresja arkusza stylów przed wdrożeniem strony statycznej lub strony docelowej.
• Przekształcenie zminimalizowanego pliku CSS pobranego z działającej witryny w celu przeanalizowania jego struktury.
• Porządkowanie kodu CSS wyeksportowanego z narzędzia do projektowania, który często zawiera nadmierną liczbę komentarzy i spacji.
• Szybkie sprawdzenie, czy ręcznie napisany fragment kodu CSS jest poprawnie przetwarzany, ponieważ nieprawidłowy kod CSS powoduje wyświetlenie wyraźnego błędu.

Najczęściej zadawane pytania