Minifikator / Formater CSS

Minifikuj lub formatuj kod CSS natychmiast.

Programista

Wklej swój CSS w polu wejściowym. Kliknij Minifikuj, aby usunąć komentarze i zbędne białe znaki w celu zmniejszenia pliku, lub Upiększ, aby sformatować zminifikowany CSS z czytelnym wcięciem. Wynik jest wyświetlany poniżej z licznikiem znaków; możesz go skopiować do swojego projektu. Całe przetwarzanie odbywa się w przeglądarce.

Wynik pojawi się tutaj po minifikacji lub upiększeniu.

O minifikatorze / formatowaniu CSS

Minifikacja CSS polega na usunięciu komentarzy, zbędnych spacji i znaków nowej linii, aby plik był mniejszy i ładował się szybciej — bez zmiany sposobu interpretacji stylów przez przeglądarkę. Upiększanie robi odwrotnie: zamienia zminifikowany lub nieuporządkowany CSS w czytelny kod z przejrzystym wcięciem i podziałem na linie. Obie operacje działają w przeglądarce, więc Twój kod nigdy nie opuszcza urządzenia.

Jak używać

  1. Wklej swój CSS w pole CSS wejściowy (np. skopiuj z arkusza stylów lub narzędzi deweloperskich przeglądarki).
  2. Kliknij Minifikuj, aby uzyskać wersję jednoliniową bez komentarzy i zobaczyć, o ile zmniejszył się rozmiar; lub kliknij Upiększ, aby otrzymać sformatowaną, czytelną wersję.
  3. Użyj Kopiuj wynik, aby skopiować wynik, a następnie wklej go do projektu lub procesu budowania. Wyczyść resetuje oba pola.

Kiedy używać

  • Zmniejszanie rozmiaru pliku CSS dla produkcji w celu przyspieszenia ładowania strony
  • Przywracanie czytelności zminifikowanemu lub skopiowanemu CSS do debugowania lub edycji
  • Szybka jednorazowa minifikacja bez konfigurowania narzędzia budowania
  • Sprawdzanie, o ile mniejszy może być Twój CSS po usunięciu komentarzy i białych znaków

Szczegóły

Minifikacja usuwa komentarze /* ... */ i zwija białe znaki; wynik to poprawny CSS. Upiększanie dodaje wcięcia po {, ; i znaki nowej linii. W celu zaawansowanej optymalizacji (np. skracanie właściwości, usuwanie nieużywanych reguł) użyj dedykowanego narzędzia budowania, takiego jak PostCSS z cssnano.

Najczęściej zadawane pytania

Co robi minifikacja?
Minifikacja usuwa komentarze (/* ... */), zbędne spacje i znaki nowej linii z CSS, aby plik był mniejszy. Przeglądarki interpretują wynik identycznie; mniejsze pliki ładują się szybciej. Wynik to jedna linia (lub kilka) skompresowanego CSS.
Co robi upiększanie?
Upiększanie zamienia zminifikowany lub nieuporządkowany CSS w kod ze spójnym wcięciem i podziałem na linie: każda reguła i deklaracja jest w osobnej linii, a zagnieżdżone bloki mają wcięcia. Dzięki temu kod jest łatwiejszy do czytania i edycji.
Czy mój CSS jest wysyłany na serwer?
Nie. Minifikacja i upiększanie odbywają się w całości w przeglądarce za pomocą JavaScript. Twój CSS nigdy nie opuszcza urządzenia, więc możesz bezpiecznie przetwarzać poufne arkusze stylów.
Czy mogę użyć zminifikowanego CSS w produkcji?
Tak. Zminifikowany wynik to poprawny CSS. Używaj go w produkcji, aby zmniejszyć rozmiar pliku. Zachowaj upiększoną lub oryginalną wersję do prac deweloperskich. Dla jeszcze mniejszych plików rozważ narzędzie budowania (np. cssnano), które optymalizuje wartości i usuwa nieużywane reguły.