Usuń komentarze i białe znaki z CSS

Programiści webowi minifikują CSS, gdy przygotowują zwarty arkusz stylów do wdrożenia lub kontrolowanego porównania.

Usuń komentarze i zbędne białe znaki z CSS, aby otrzymać zwarty kod. Działa bezpłatnie w przeglądarce, bez zakładania konta.

Jak używać

Upuść arkusz stylów do obszaru wprowadzania lub zaimportuj plik, który chcesz skompresować, zamiast wklejać go ręcznie.
Uruchom minifikator: komentarze znikną, a białe znaki niemające roli składniowej zostaną usunięte.
Porównaj rozmiar wyniku z oryginalnym plikiem, aby zobaczyć, ile ten przebieg faktycznie zaoszczędził.
Skopiuj kompaktowy kod do swojego projektu i odśwież stronę, aby potwierdzić, że układ się nie przesunął.
Zachowaj czytelną wersję w bezpiecznym miejscu, ponieważ spakowany plik jest przeznaczony do dostarczania, a nie do edycji.

Przykład

W przykładzie znajdują się dwie reguły zapisane w kilku wierszach, z rozłożonymi marginesami, tłem i dopełnieniem. Po przebiegu porównaj oba teksty obok siebie i sprawdź, czy każdy selektor, właściwość i wartość nadal występuje w wersji kompaktowej.

Dane wejściowe

body {
    color: #17211d;
    margin: 0;
}

.card {
    padding: 12px;
    background: #ffffff;
}

Wynik

body{color:#17211d;margin:0} .card{padding:12px;background:#ffffff}

Ograniczenia i formaty

Komentarze są usuwane, więc żadna notatka w nich pozostawiona nie wróci w wyniku.
Kompaktowy kod jest trudny do czytania i niewygodny do poprawiania, więc zachowaj oryginał na przyszłe zmiany.
Nieużywane reguły nie są wykrywane, a wartości nie są przepisywane, więc oszczędność wynika głównie z białych znaków i komentarzy.
Przetestuj wynik w przeglądarkach, które obsługujesz, zwłaszcza jeśli arkusz używa nietypowych selektorów lub komentarza, który nigdy nie został zamknięty.

Gdzie odbywa się przetwarzanie

Praca odbywa się w Twojej przeglądarce: wklejony CSS tam pozostaje, nie jest nigdzie wysyłany i znika po zamknięciu karty. Oznacza to, że możesz skompresować arkusz stylów klienta, nie wysyłając go z komputera.

Częste pytania

Czy zminifikowany plik będzie ładował się szybciej?

Waży mniej, ponieważ komentarze i zbędne białe znaki zniknęły, a mniejszy plik pobiera się szybciej. To, jak bardzo to odczujesz, zależy od rozmiaru arkusza stylów oraz od wszystkiego innego, co musi pobrać strona.

Czy mogę później cofnąć minifikację?

Nie z tej strony. Komentarze i oryginalne wcięcia przepadają w tym przebiegu, więc czytelnego układu nie da się odtworzyć. Pracuj na kopii albo trzymaj sformatowany plik w systemie kontroli wersji, zanim go zastąpisz.

Dlaczego w wyniku nadal występują spacje?

Spacje oddzielające dwie wartości, dwa selektory lub słowa wewnątrz właściwości są częścią składni. Usuwane są tylko białe znaki bez roli gramatycznej, dlatego skompresowany wynik nadal jest analizowany jako poprawny CSS.