Bezpłatny Minifikator CSS Online
Kompresuj CSS do produkcji natychmiast — działa w przeglądarce, bez przesyłania.
Wejściowy CSS
Zminifikowany CSS
Przykłady minifikacji CSS
Sformatowany CSS jest czytelny; zminifikowany CSS jest zwięzły do produkcji. Przykład:
Style kontenera i przycisku
Wejście sformatowane:
Wyjście zminifikowane:
Użyj Przykład powyżej, aby załadować więcej przykładowych danych.
Czym jest Minifikator CSS?
Pliki CSS używają białych znaków, komentarzy i wcięć dla czytelności. W produkcji mniejsze pliki ładują się szybciej. Minifikator CSS usuwa zbędne białe znaki, komentarze i skraca wartości tam, gdzie jest to bezpieczne, aby zmniejszyć rozmiar pliku. Specyfikacje W3C CSS definiują język; minifikacja zachowuje zachowanie przy mniejszej liczbie bajtów.
To narzędzie analizuje CSS i zwraca zwartą wersję. Minifikacja odbywa się całkowicie w przeglądarce. Nic nie jest wysyłane na serwer. Do formatowania zminifikowanego CSS użyj Formatera CSS. Do walidacji użyj Walidatora CSS.
Jak używać tego narzędzia
Wklej lub wczytaj CSS
Skopiuj CSS i wklej go do lewego edytora. Możesz też kliknąć Wczytaj, aby załadować plik .css. Przycisk Przykład ładuje przykładowe dane. Nieprawidłowy CSS wyświetli błąd.
Sprawdź zminifikowane wyjście
Prawy panel pokazuje zwięzły CSS. Białe znaki i komentarze są usuwane. Wyjście jest prawidłowym CSS – zachowanie jest zachowane. Nieprawidłowy CSS wyświetli błąd w wyjściu.
Kopiuj lub pobierz
Użyj Kopiuj, aby umieścić wynik w schowku, lub Pobierz, aby go zapisać. Dla SCSS lub Less skompiluj najpierw za pomocą SCSS do CSS lub Less do CSS, a następnie minifikuj.
Jak działa Minifikator
Narzędzie usuwa białe znaki, podziały linii i komentarze z CSS. Wartości mogą być skracane tam, gdzie jest to bezpieczne (np. 0px do 0, #ffffff do #fff). Wyjście pozostaje prawidłowe zgodnie ze specyfikacją W3C CSS. Narzędzia do budowania takie jak cssnano czy PostCSS oferują bardziej agresywną optymalizację; to narzędzie zapewnia szybką minifikację w przeglądarce.
Kiedy minifikacja CSS pomaga
Witryny produkcyjne zyskują na mniejszych plikach CSS. Minifikacja zmniejsza rozmiar ładuneku, poprawia czasy ładowania i oszczędza przepustowość. Narzędzia do budowania takie jak Webpack, Vite czy Parcel często minifikują automatycznie, ale to narzędzie jest przydatne dla pojedynczych plików, szybkich sprawdzeń lub gdy krok budowania nie jest dostępny.
Szablony e-mail, osadzone style lub CSS hostowany na CDN często wymagają ręcznej minifikacji. Przepuszczenie arkusza stylów przez to narzędzie daje wyjście gotowe do produkcji. Aby dodać prefiksy vendor przed minifikacją, użyj Prefiksera CSS. Aby sformatować zminifikowany CSS z powrotem do czytelnej postaci, użyj Formatera CSS.
Często zadawane pytania
Czy minifikacja psuje CSS?
Nie. Usuwane są tylko białe znaki i komentarze. Selektory, właściwości i wartości pozostają takie same. Wyjście jest prawidłowym CSS. Niektóre minifikatory mogą skracać wartości (np. 0px do 0) – zachowanie jest zachowane.
Czy moje dane są prywatne?
Tak. Minifikacja odbywa się całkowicie w przeglądarce. Żadne dane nie są wysyłane na żaden serwer.
Co z mapami źródeł?
To narzędzie nie generuje map źródeł. W przypadku kompilacji produkcyjnych z mapami źródeł użyj narzędzia do budowania takiego jak PostCSS, cssnano lub minifikatora swojego bundlera.
Czy obsługuje SCSS lub Less?
To narzędzie minifikuje zwykły CSS. Dla SCSS lub Less skompiluj najpierw za pomocą SCSS do CSS lub Less do CSS, a następnie minifikuj wyjście.
O ile staje się mniejszy?
Zwykle 20–40% mniejszy w zależności od białych znaków i komentarzy. CSS z dużą ilością komentarzy lub formatowania może przynieść większe oszczędności. Dokładna redukcja zależy od danych wejściowych.
Powiązane narzędzia
Specyfikacja CSS: W3C CSS. MDN CSS to punkt odniesienia. cssnano i PostCSS oferują zaawansowaną minifikację w czasie budowania.