Darmowy Minimalizator CSS: Kompresuj i Optymalizuj Kod CSS Online

Czym jest minifikator CSS?

Minifikator CSS to narzędzie, które zmniejsza plik CSS (kaskadowych arkuszy stylów), usuwając znaki niepotrzebne przeglądarkom. Usuwa komentarze, dodatkowe spacje i podziały wierszy oraz skraca kilka typowych zapisów, nie zmieniając wyglądu strony. W rezultacie powstaje mniejszy plik, który przeglądarka może szybciej pobrać i przeanalizować.

Jak działa minifikacja CSS

Twórcy stron internetowych zapisują CSS z komentarzami, wcięciami i pustymi wierszami, ponieważ ułatwia to odczytywanie i edytowanie kodu. Przeglądarki ignorują całe to formatowanie. Minifikator usuwa je wraz z niewielką liczbą innych bajtów, które nie mają wpływu na wygląd, pozostawiając zwarty plik przeznaczony do użycia produkcyjnego, a nie do edycji.

To narzędzie wprowadza następujące zmiany:

• Usuwa komentarze. Każdy blok /* ... */ jest usuwany.
• Usuwa nadmiarowe białe znaki. Ciągi spacji, tabulatorów i podziałów wierszy między regułami są usuwane albo zastępowane pojedynczą spacją, gdy spacja ma znaczenie, na przykład między .parent a .child w selektorze potomka.
• Usuwa białe znaki wokół znaków interpunkcyjnych. Spacje obok znaków {, }, :, ; i , są usuwane.
• Usuwa dodatkowe średniki. Powtarzające się średniki są redukowane do jednego, a końcowy średnik przed zamykającym znakiem } jest usuwany.
• Skraca kolory szesnastkowe. Sześciocyfrowy kolor, taki jak #ffffff, staje się #fff, gdy każda para cyfr jest zgodna (czerwona, zielona i niebieska). Ośmiocyfrowy kolor z kanałem alfa, taki jak #ffaa00cc, jest skracany w ten sam sposób, gdy wszystkie cztery pary są zgodne.
• Usuwa jednostkę z wartości o długości równej zero. Wartości 0px, 0em i 0rem stają się wartością 0. Wartości procentowe pozostają bez zmian, ponieważ 0% nie zawsze można zastąpić zwykłym 0, na przykład w flex-basis lub w kroku @keyframes.
• Usuwa początkowe zero z liczb dziesiętnych. 0.5 staje się .5.

Aby uniknąć uszkodzenia pliku, narzędzie pozostawia bez zmian trzy rodzaje treści: tekst w cudzysłowach, wartość wewnątrz nieujętego w cudzysłowy url() oraz zawartość funkcji matematycznych, takich jak calc(), clamp(), min() i max(). Odstępy wewnątrz calc(100% - 20px) mają znaczenie dla przeglądarki, dlatego narzędzie zachowuje je dokładnie.

Narzędzie nie łączy zduplikowanych selektorów, nie usuwa pustych bloków reguł ani nie konwertuje kolorów rgb() na zapis szesnastkowy. Są to prawidłowe optymalizacje wykonywane przez inne narzędzia, ale ten minifikator koncentruje się na zmianach wymienionych powyżej.

Wzór na procent redukcji

Narzędzie podaje, o jaki procent zmniejszył się plik:

Obie długości są liczone w znakach. Wynik jest zaokrąglany do dwóch miejsc po przecinku.

Przykład obliczeniowy

Oryginalny CSS (193 znaków):

Zminifikowany wynik (129 znaków):

Po zastosowaniu wzoru: (193 − 129) / 193 × 100 = 33,16%. Komentarz zniknął, podobnie jak wcięcia i podziały wierszy, 0px stało się 0, a #ffffff/#000000 stało się #fff/#000.

Dokładny odsetek zależy od danych wejściowych. Starannie zapisany CSS z niewielką liczbą komentarzy zmniejsza się mniej. CSS z dużą liczbą komentarzy i głębokimi wcięciami może zmniejszyć się bardziej. Typowe arkusze stylów minifikowane tym narzędziem zmniejszają się o około 20% do 40%.

Jak korzystać z tego narzędzia

1. Wklej kod CSS do pola wejściowego po lewej stronie.
2. Zminifikowana wersja pojawi się automatycznie po prawej stronie, bez konieczności naciskania przycisku.
3. Sprawdź procent redukcji wyświetlony nad wynikiem.
4. Wybierz opcję „Copy to Clipboard”, aby skopiować zminifikowany CSS, a następnie wklej go do pliku projektu.
5. Wybierz opcję „Clear”, aby wyczyścić oba pola i rozpocząć od nowa.

Żadne dane wpisane do narzędzia nie są wysyłane na serwer; minifikacja odbywa się w przeglądarce.

Kiedy minifikować CSS

Zespoły programistyczne często minifikują CSS jako etap procesu budowania, korzystając z narzędzi takich jak Webpack lub skryptów npm, dzięki czemu zmiana zachodzi automatycznie przed każdym wdrożeniem. Czytelny plik źródłowy z komentarzami pozostaje w systemie kontroli wersji; minifikowana jest tylko wersja produkcyjna. Typowe miejsca użycia zminifikowanego CSS to:

• Duże witryny, takie jak sklepy internetowe, gdzie mniejszy arkusz stylów oznacza szybsze ładowanie strony.
• Aplikacje jednostronicowe tworzone za pomocą bibliotek takich jak React lub Vue, w których CSS jest dołączany razem z JavaScriptem.
• Mobilne strony internetowe, których użytkownicy częściej korzystają z wolniejszego połączenia.
• Wiadomości e-mail w formacie HTML, które często mają ścisłe limity rozmiaru.

Minifikacja CSS a szybkość strony

Mniejszy plik CSS pobiera się i analizuje szybciej, co może skrócić czas do wyświetlenia strony. Google stwierdziło, że szybkość strony jest jednym z sygnałów używanych w rankingu wyszukiwania, więc szybsza strona może być jednym z wielu niewielkich czynników wpływających na pozycję witryny w wynikach wyszukiwania. Sama minifikacja nie gwarantuje zmiany pozycji; jest jedną z kilku optymalizacji, obok kompresji obrazów i skrócenia czasu odpowiedzi serwera.

Minifikator CSS a upiększacz CSS

Minifikator kompresuje kod na potrzeby produkcji. Upiększacz robi coś przeciwnego: bierze skompresowany CSS i ponownie formatuje go za pomocą wcięć oraz podziałów wierszy, aby można go było odczytać. Upiększacz nie może przywrócić komentarzy ani oryginalnych nazw zmiennych usuniętych podczas minifikacji, ponieważ po usunięciu te informacje przepadają.

Często zadawane pytania

O ile zmniejsza się CSS po minifikacji? Za pomocą tego narzędzia zwykle o 20% do 40%, w zależności od liczby komentarzy, pustych wierszy i wcięć w oryginalnym pliku. Plik, który od początku ma niewiele formatowania, zmniejszy się mniej.

Czy minifikacja CSS zmienia wygląd strony? Nie. Minifikacja usuwa tylko znaki ignorowane przez przeglądarki, takie jak komentarze i dodatkowe białe znaki, oraz przepisuje kilka równoważnych wartości, na przykład #ffffff na #fff. Wygląd wyrenderowanej strony pozostaje taki sam.

Czy CSS należy minifikować podczas tworzenia? Nie. Podczas pisania i debugowania kodu zachowaj czytelną wersję z komentarzami. Minifikuj tylko kopię wysyłaną na serwer produkcyjny, zwykle jako automatyczny etap procesu budowania.

Czy można przywrócić zminifikowany CSS do oryginalnego pliku? Upiększacz może ponownie sformatować zminifikowany CSS za pomocą wcięć, ale nie może odzyskać usuniętych komentarzy ani przywrócić opisowych nazw, których nie było w zminifikowanej wersji. Zachowaj oryginalny plik źródłowy.

Czy to narzędzie konwertuje kolory rgb() na zapis szesnastkowy albo łączy zduplikowane selektory? Nie. Skraca kolory szesnastkowe i usuwa niepotrzebne znaki, ale nie przepisuje wartości rgb()/hsl() ani nie łączy powtarzających się selektorów. Niektóre inne minifikatory wykonują te dodatkowe operacje.

Czy minifikacja jest tym samym co kompresja gzip? Nie. Minifikacja usuwa niepotrzebne znaki z samego kodu źródłowego. Kompresję gzip (lub Brotli) stosuje serwer internetowy podczas wysyłania pliku, korzystając z osobnego algorytmu. Zastosowanie obu metod razem daje najmniejszy plik przesyłany przez sieć.