Minifikacja CSS w przeglądarce, od razu
Minifikacja CSS polega na usunięciu komentarzy, znaków nowej linii i każdej spacji, której przeglądarka nie potrzebuje. Wklej arkusz stylów powyżej, a odchudzona wersja pojawi się w ułamku sekundy, razem z dokładną liczbą zaoszczędzonych bajtów. Niczego nie instalujesz, nie potrzebujesz kroku budowania, a nic z tego, co wkleisz, nie jest nigdzie wysyłane: wszystko dzieje się online, w twojej przeglądarce.
Jak użyć tego CSS minifiera
- Wklej lub wpisz swój CSS w pole Surowy CSS.
- Chwilę po tym, jak przestaniesz pisać, poniżej pojawi się zminifikowany CSS z rozmiarem oryginału, nowym rozmiarem i zaoszczędzonym procentem. Nie ma żadnego przycisku do naciśnięcia.
- Stuknij Kopiuj do schowka, aby wkleić wynik do projektu, albo Pobierz .min.css, aby zapisać go jako plik.
Błędny CSS nigdy nie zawiesza narzędzia: kod jest przetwarzany tak daleko, jak da się go odczytać. Możesz więc wkleić niedokończony kod i poprawić go później.
Co usuwa CSS minify, a co zostawia
Każda reguła działa dokładnie tak jak wcześniej; znika tylko to, co jest tam dla ludzkich oczu. Komentarze znikają, białe znaki się skracają, spacje wokół nawiasów klamrowych, dwukropków i przecinków przepadają, a ostatni średnik przed zamykającym nawiasem jest usuwany. Ciągi w cudzysłowach, wartości url() i znaki ze znakiem ucieczki są kopiowane bez zmian, więc "a b" zachowuje swoją spację.
Przed: /* Buttons */ .btn { color: #fff; margin: 0 auto; }
Po: .btn{color:#fff;margin:0 auto}
O ile mniejszy będzie plik CSS?
To zależy od tego, ile komentarzy i białych znaków zawiera plik. Arkusze z dużą liczbą komentarzy i starannymi wcięciami często tracą od jednej czwartej do połowy objętości. Pod wynikiem widzisz rozmiar oryginału, rozmiar po minifikacji i dokładny procent oszczędności.
Mniejszy plik szybciej się pobiera, a strona wcześniej się wyświetla. Jeśli chcesz przesyłać jeszcze mniej danych, serwer WWW może dodatkowo wysyłać zminifikowany plik z gzip lub Brotli.
Zachowanie lub usunięcie komentarzy licencyjnych
Komentarze zaczynające się od /*! to zwykle licencja lub informacja o prawach autorskich biblioteki. Domyślnie zostają, bo wiele licencji wymaga, aby ta informacja szła razem z kodem.
Odznacz Zachowaj komentarze licencyjne pod polem wejściowym, aby usunąć także je i uzyskać możliwie najmniejszy plik.
Czy zminifikowany CSS jest bezpieczny na produkcji?
Tak: brakuje w nim tylko znaków, które nie wpływają na to, jak przeglądarka czyta arkusz stylów. Zachowaj czytelny plik jako źródło i publikuj wersję .min.css, na przykład style.css obok style.min.css.
Najczęściej zadawane pytania
Do czego służy CSS minifier?
Usuwa wszystko, czego przeglądarka nie potrzebuje do odczytania stylów: komentarze, znaki nowej linii, wcięcia, spacje wokół nawiasów klamrowych, dwukropków i przecinków oraz ostatni średnik w każdej regule. Wynik działa dokładnie tak jak oryginał, ale jest mniejszy, więc szybciej się pobiera.
Czy ten CSS minifier online wymaga instalacji?
Nie. Wklej CSS w pole „Surowy CSS”, a zminifikowana wersja pojawi się poniżej razem z liczbą zaoszczędzonych bajtów. Stuknij „Kopiuj do schowka”, aby wkleić ją do projektu, albo „Pobierz .min.css”, aby zapisać plik.
Czym różni się minifikacja CSS od kompresji gzip?
Minifikacja usuwa z tekstu zbędne znaki, a gzip lub Brotli dodatkowo kompresują plik podczas przesyłania przez serwer WWW. Najpierw zminifikuj arkusz tutaj, a potem możesz włączyć gzip lub Brotli na serwerze, by przesyłać jeszcze mniej danych.
Jak usunąć wszystkie komentarze z CSS?
Wklej swój CSS i odznacz „Zachowaj komentarze licencyjne”. Wtedy znikną wszystkie komentarze, także te zaczynające się od /*!. Jeśli zostawisz opcję zaznaczoną, zostaną tylko te informacje licencyjne.
Czy zminifikowany CSS jest bezpieczny na produkcji?
Tak. Usuwane są tylko znaki, które nie wpływają na to, jak przeglądarka czyta arkusz stylów. Ciągi znaków, wartości url() i znaki ze znakiem ucieczki są kopiowane dokładnie tak, jak je napisano. Zachowaj oryginał jako źródło, a na stronie używaj wersji .min.css.
Co to jest plik .min.css?
To zminifikowana kopia arkusza stylów, nazwana tak zwyczajowo, aby leżała obok czytelnego źródła, na przykład style.css i style.min.css. Edytuj czytelny plik, a na działającej stronie podłącz plik .min.css.
Czy da się przywrócić zminifikowany CSS do normalnej postaci?
Nie dokładnie, bo oryginalne formatowanie przepada, ale możesz znów uczynić kod czytelnym. Wklej zminifikowany kod do narzędzia Formatowanie kodu, aby ponownie dodać wcięcia. Usunięte komentarze nie wrócą, więc zawsze zachowuj źródło.
Co się stanie, jeśli mój CSS ma błędy?
Narzędzie się nie zawiesi. CSS zostanie przetworzony tak daleko, jak da się go odczytać, więc możesz wkleić niedokończony kod i poprawić go później.
Polecane
-
Składany stojak na laptopa Amazon BasicsPodnosi ekran na wysokość oczu, gdy porządkujesz swój kod.
-
Web Performance Fundamentals (Nadia Makarevich)Mniejszy CSS to dopiero początek: naucz się mierzyć i przyspieszać całą stronę.
-
Bezprzewodowa mysz Logitech MX Master 3SPrecyzyjna i cicha na długie dni pracy nad front-endem.
Pomaga utrzymać narzędzia za darmo. ✨
Zdjęcia poglądowe. Jestem Partnerem Amazon i otrzymuję wynagrodzenie z tytułu określonych zakupów dokonywanych za moim pośrednictwem.
