Formatowanie i minifikacja CSS

Jak sformatować lub zminifikować CSS

1. Wklej arkusz stylów albo kliknij Otwórz plik, aby wczytać plik .css (do 10 MB).
2. Wybierz Wcięcie (2 spacje, 4 spacje lub tabulator) i zdecyduj, czy chcesz Pusty wiersz między regułami.
3. Kliknij Formatuj (upiększ), aby otrzymać czytelny kod, albo Minifikuj, aby uzyskać najmniejszą wersję.
4. Przy minifikacji zostaw zaznaczone Scalaj reguły przy minifikacji, by uzyskać najlepszy wynik, oraz Zachowaj komentarze /*! */, aby nie stracić nagłówków licencji.
5. Skopiuj lub pobierz wynik. Wiersz stanu pokazuje rozmiar przed i po (w bajtach) oraz procent oszczędności.

Jeśli brakuje nawiasu klamrowego, narzędzie zatrzymuje się i wskazuje wiersz, w którym jest niezamknięty { lub nadmiarowy }, zamiast generować uszkodzony kod.

Formatowanie: czytelny i spójny CSS

Formatuj (upiększ) korzysta z js-beautify, formatera wbudowanego w wiele edytorów kodu. Umieszcza każdą deklarację w osobnym wierszu, wcina zawartość każdej reguły i reguł @, takich jak @media i @supports, zapisuje każdy selektor z grupy w osobnym wierszu i dodaje spację po dwukropku w każdej deklaracji. Istniejące puste wiersze są zachowywane (najwyżej jeden pod rząd), więc logiczne sekcje pliku pozostają widoczne. Formater nigdy nie zmienia wartości, kolejności reguł ani znaczenia selektorów – zmienia wyłącznie białe znaki.

Przydaje się to do czytania zminifikowanego CSS ze strony internetowej, przeglądania arkusza wygenerowanego przez jakieś narzędzie albo uporządkowania pliku edytowanego przez kilka osób o różnych nawykach.

Minifikacja: mniejszy CSS dzięki csso

Minifikuj używa csso (CSS Optimizer), minifikatora strukturalnego. Oprócz usuwania białych znaków i komentarzy przepisuje arkusz do równoważnej, krótszej postaci:

• skraca kolory (#ff0000 zmienia się w red, #ffffff w #fff);
• upraszcza jednostki i zera (0px staje się 0, 0.5em – .5em);
• usuwa zdublowane deklaracje i scala właściwości skrótowe, gdy jest to bezpieczne;
• z opcją Scalaj reguły przy minifikacji grupuje reguły o identycznych deklaracjach (a{color:red} b{color:red} staje się a,b{color:red}) i usuwa nadpisane deklaracje.

Restrukturyzacja jest bezpieczna dla zwykłych arkuszy stylów, ale przenosi deklaracje. Jeśli twój CSS opiera się na bardzo konkretnej kolejności kaskady, np. na hackach dla przeglądarek, odznacz tę opcję: csso skompresuje wtedy każdą regułę w miejscu.

Komentarze są usuwane, z wyjątkiem „ważnych” komentarzy zaczynających się od /*!, których zwykle używa się do licencji. Odznacz Zachowaj komentarze /*! */, aby usunąć także je.

Rozmiar przed i po

Wiersz stanu porównuje rozmiar danych wejściowych i wyniku w bajtach UTF-8. Sformatowany kod jest zazwyczaj większy od oryginału, a minifikacja ręcznie pisanego CSS daje zwykle 20–50% oszczędności. Pamiętaj, że serwery dodatkowo kompresują pliki za pomocą gzip lub Brotli, więc zysk przy przesyłaniu jest mniejszy niż surowa liczba, ale minifikacja i tak skraca parsowanie i zmniejsza pliki w pamięci podręcznej.