Minifikator CSS

Minifikator CSS to bezpłatne narzędzie, które usuwa zbędne znaki z kodu CSS i zwraca zminifikowany arkusz stylów wraz z liczbą znaków przed przetworzeniem i po nim.

Na czym polega minifikacja CSS?

Minifikacja CSS zmniejsza liczbę znaków w arkuszu stylów przez usunięcie formatowania, którego przeglądarki nie potrzebują. Zwykle obejmuje to wcięcia, podziały wierszy, komentarze oraz opcjonalne spacje wokół znaków interpunkcyjnych.

Przeglądarka nadal otrzymuje reguły CSS, selektory i wartości deklaracji. Zamierzony efekt wizualny powinien pozostać bez zmian, a plik przesyłany do przeglądarki jest mniejszy. Rzeczywiste korzyści z minifikacji arkusza CSS zależą od pliku źródłowego, kompresji HTTP i pamięci podręcznej przeglądarki. Jeśli arkusz jest już dobrze skompresowany, spadek liczby przesyłanych bajtów może być niewielki.

Minifikacja przydaje się przed wdrożeniem, podczas analizy zbyt dużych arkuszy CSS od zewnętrznych dostawców oraz do sprawdzenia, jak bardzo formatowanie używane podczas pracy zwiększa rozmiar pliku. Nie jest tym samym co optymalizacja polegająca na usuwaniu nieużywanych selektorów, łączeniu równoważnych reguł czy przepisywaniu deklaracji. To narzędzie nie wykonuje takich szerszych operacji.

Jak używać Minifikatora CSS?

Wklej arkusz stylów w polu CSS i uruchom narzędzie. Następnie skopiuj wynik z pola Zminifikowany CSS do odpowiedniego procesu kompilacji lub wdrażania. Zachowaj czytelny plik źródłowy CSS i nie zastępuj go trwale zminifikowaną kopią.

1. Zacznij od źródłowego kodu CSS używanego przez Twoją witrynę lub aplikację.
2. Przed minifikacją sprawdź, czy kod jest prawidłowo analizowany.
3. Wklej go w polu CSS i uruchom narzędzie.
4. Porównaj wartości Znaki CSS i Znaki zminifikowanego CSS.
5. Przetestuj wynik na stronie testowej, uwzględniając układy responsywne, style wydruku i komponenty interaktywne.

Minifikacja CSS odbywa się na serwerze. Przesłany kod CSS trafia na serwer przez HTTPS i nie jest przechowywany. Jeśli arkusz stylów zawiera poufne adresy URL, wewnętrzne nazwy hostów lub inne dane wrażliwe, sprawdź, czy przesyłanie go do narzędzia działającego po stronie serwera jest zgodne z zasadami przetwarzania danych w Twojej organizacji.

Jak odczytać wynik?

Wynik zawiera przekształcony kod CSS oraz dwie liczby znaków, dzięki czemu możesz sprawdzić rezultat i bezpośrednio ocenić redukcję. Znaki CSS to długość przesłanego tekstu, natomiast Znaki zminifikowanego CSS oznaczają jego długość po minifikacji.

Liczby znaków są obliczane za pomocą funkcji długości obsługującej znaki wielobajtowe. Nie należy traktować ich jako dokładnej prognozy rozmiaru danych przesyłanych przez sieć. Znaki UTF-8 mogą zajmować więcej niż jeden bajt, a kompresja Brotli lub gzip może znacznie zmienić rozmiar danych wysyłanych przez HTTP.

To narzędzie nie udostępnia osobnego pola z wynikiem walidacji ani błędami. Nie należy więc używać go jako walidatora CSS. Typowe problemy, takie jak niedomknięte nawiasy klamrowe, brak dwukropka, niedomknięty ciąg znaków, nieprawidłowe komentarze czy błędne zagnieżdżenie, trzeba sprawdzić za pomocą narzędzi deweloperskich przeglądarki, lintera lub walidatora zgodnego ze standardami. Nieprawidłowy CSS może wyglądać na poprawnie zminifikowany, ale nie działać zgodnie z oczekiwaniami.

Proste przykłady minifikacji CSS

Standardowa minifikacja usuwa formatowanie, zachowując samą regułę.

CSS

p { color: red; }

Zminifikowany CSS

p{color:red}

W tym przykładzie czytelny kod wejściowy ma 17 znaków, a wersja zwarta 12. Spacje i znaki interpunkcyjne znajdujące się wewnątrz ciągów ujętych w cudzysłowy muszą pozostać częścią wartości.

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

Zminifikowany CSS

.notice,.warning{color:#c00;margin:0 1rem}

Bezkrytyczne usuwanie wszystkich spacji nie jest bezpieczne. Biały znak może oznaczać kombinator potomka, a operatory arytmetyczne w funkcjach takich jak calc() podlegają określonym wymaganiom dotyczącym odstępów. Ciągi znaków, adresy URL danych, selektory ze znakami ucieczki oraz wartości właściwości niestandardowych również wymagają przetwarzania z uwzględnieniem składni.

Znaki diakrytyczne i znaki spoza alfabetu łacińskiego mogą występować w ciągach znaków, a zgodnie z regułami identyfikatorów CSS także w selektorach. Liczby, separatory dziesiętne, wartości procentowe i jednostki są elementami składni, a nie ozdobnym tekstem, dlatego nie można ich skracać bez zrozumienia deklaracji. Pusty arkusz stylów nie zawiera kodu CSS, który można zminifikować. W przypadku bardzo dużych arkuszy zwykle łatwiej jest wielokrotnie stosować i kontrolować minifikator działający podczas kompilacji niż kopiować kod do formularza online.

Kiedy minifikacja CSS nie ma sensu?

Ponowna minifikacja zwykle nie ma sensu, jeśli plik jest już zminifikowany albo został wygenerowany jako zwarty zasób produkcyjny. Drugi przebieg minifikacji CSS może przynieść znikomą oszczędność lub nie dać jej wcale, a jednocześnie dodaje kolejne przekształcenie do procesu wydania.

• Nie formatuj, a następnie ponownie nie minifikuj kodu CSS, który będzie odczytywany wyłącznie przez przeglądarkę lub system kompilacji.
• Nie traktuj minifikacji jako zamiennika usuwania nieużywanych reguł frameworka lub powielonych deklaracji.
• Nie oczekuj, że zmniejszenie liczby znaków ujawni żądania blokujące renderowanie, problemy z pamięcią podręczną lub wolne wczytywanie czcionek.
• Nie usuwaj sformatowanego kodu źródłowego, szczególnie jeśli debugujesz specyficzność selektorów, warstwy kaskady lub zapytania medialne.

Jeśli CSS jest automatycznie łączony w pakiety, używaj minifikatora w tym samym procesie, aby każde wydanie korzystało z identycznych ustawień. Przy ręcznym wdrażaniu powiązanych zasobów Minifikator HTML i Minifikator JS pozwalają wykonać analogiczną operację na plikach tych typów.

Najczęściej zadawane pytania

Czy minifikacja CSS zmienia specyficzność selektorów?

Prawidłowa minifikacja nie zmienia specyficzności selektorów, ponieważ ich elementy i kolejność powinny pozostać takie same. Mimo to dokładnie porównaj złożone selektory, jeśli kod źródłowy używa znaków ucieczki, nowszych pseudoklas lub wygenerowanej składni, której starszy minifikator może nie rozumieć.

Czy można minifikować właściwości niestandardowe CSS?

Właściwości niestandardowe można uwzględnić w minifikacji, ale ich wartości mogą zachowywać tokeny i odstępy potrzebne podczas późniejszego podstawiania za pomocą var(). Deklaracje zawierające obliczenia, wartości zapasowe lub osadzone ciągi znaków przetestuj w przeglądarkach obsługiwanych przez projekt. Nie zakładaj, że każdą widoczną spację można usunąć.

Czy narzędzie tworzy mapę źródeł?

Narzędzie nie udostępnia mapy źródeł. Jeśli debugowanie wersji produkcyjnej wymaga powiązania zwartego kodu CSS z plikiem Sass, Less lub innym źródłem, wygeneruj zminifikowany plik i jego mapę źródeł w kompilatorze lub narzędziu pakującym, które zna pierwotną strukturę plików.

Czy komentarze licencyjne pozostaną w wyniku?

Nie zakładaj, że komentarze CSS zostaną zachowane. Jeśli licencja zależności wymaga dołączenia informacji do rozpowszechnianego kodu, przechowuj ją osobno lub sprawdź wygenerowany wynik przed wydaniem.

Czy minifikacja może naprawić uszkodzony CSS?

Nie. Minifikacja usuwa zbędne znaki, ale nie naprawia nieprawidłowego selektora, nieobsługiwanej właściwości, brakującego zasobu ani błędnej kaskady. Najpierw usuń ostrzeżenia dotyczące analizy składni i regresje wizualne w kodzie źródłowym.

Co sprawdzić przed wdrożeniem?

Zapisz zminifikowany wynik jako osobny zasób produkcyjny, sprawdź, czy adresy URL i treści ujęte w cudzysłowy pozostały nienaruszone, a następnie wczytaj go na stronie testowej przy otwartej konsoli przeglądarki. Porównaj reprezentatywne strony przy wąskim i szerokim obszarze wyświetlania. Na koniec upewnij się, że serwer stosuje oczekiwany typ zawartości, zasady pamięci podręcznej i kompresję HTTP.