Minifikator CSS
Zmniejsz pliki CSS i zobacz dokładnie, ile udało się zaoszczędzić.
Działa w przeglądarce. Nic, co wpiszesz, nie jest nigdzie wysyłane.
- Pokazuje zaoszczędzone bajty
- Usuwa komentarze
- Nic nie jest wysyłane
Jak zminifikować CSS
- Wklej swój CSS.
- Sprawdź zaoszczędzony rozmiar w wierszu statystyk.
- Skopiuj albo pobierz zminifikowany CSS.
Co zostaje usunięte
- Komentarze zapisane jako /* ... */
- Białe znaki i podziały wiersza między regułami a deklaracjami
- Średnik na końcu tuż przed klamrą zamykającą
- Zduplikowane albo zbędne reguły, tam gdzie csso może je bezpiecznie połączyć
- Nadmiarowe średniki i puste bloki reguł bez żadnych deklaracji w środku
Typowe oszczędności rozmiaru
| Punkt startowy | W przybliżeniu ile mniej |
|---|---|
| Ręcznie pisany CSS z komentarzami | 20 do 30 procent |
| Już zwięzły CSS | 5 do 10 procent |
| CSS wygenerowany przez preprocesor | 10 do 20 procent |
Kiedy minifikować, a kiedy nie
- Minifikuj tuż przed wdrożeniem, a nie podczas aktywnej edycji, bo czytelny arkusz stylów dużo szybciej się debuguje.
- Pomiń minifikację pliku, który już jest serwowany skompresowany gzipem i mały, gdzie różnica rozmiaru nie jest warta dodatkowego kroku budowania.
Kiedy minifikacja daje największą różnicę
- Arkusze stylów współdzielone przez wiele stron, bo zaoszczędzone bajty mnożą się przy każdym wczytaniu strony.
- Duże systemy projektowe albo biblioteki komponentów z mnóstwem powtarzających się, łączalnych reguł.
- Strony bez procesu budowania, gdzie ręcznie pisany CSS jest serwowany bezpośrednio, bez żadnego innego kroku minifikacji.
- Framework CSS okrojony tylko do klas narzędziowych faktycznie używanych na stronie.
Minifikator CSS: najczęstsze pytania
O ile zmniejszy się mój CSS?
Zwykle o 10 do 30 procent, więcej, jeśli oryginał ma dużo komentarzy i białych znaków, mniej, jeśli już jest zwięzły.
Czy minifikacja zmienia wygląd mojej strony?
Nie. Minifikacja usuwa tylko białe znaki, komentarze i zbędną składnię. Reguły stosowane na twojej stronie zostają takie same.
Czy to łączy zduplikowane reguły?
Tak, tam gdzie jest to bezpieczne, co może zmniejszyć plik bardziej niż samo usunięcie białych znaków.
Czy powinienem zachować oryginalny plik?
Tak. Zachowaj czytelną wersję do edycji i używaj zminifikowanej tylko na produkcji.
Jakiego minifikatora to używa?
csso, tego samego minifikatora CSS, którego używa kilka wtyczek bundlerów. Łączy też niektóre zduplikowane i zbędne reguły, wykraczając poza samo usuwanie białych znaków.
Czy zminifikowany CSS nadal bezpiecznie wkleić do arkusza stylów?
Tak, to standardowy CSS z usuniętymi białymi znakami. Każda przeglądarka albo narzędzie budujące odczyta go dokładnie tak samo jak oryginał.
Czy to usuwa prefiksy producentów, których wciąż potrzebuję, jak -webkit-?
Nie. Właściwości i wartości z prefiksami producentów zostają dokładnie takie, jak zapisano. Minifikacja usuwa tylko białe znaki, komentarze i bezpiecznie łączalne reguły, nigdy właściwość, którą twój CSS faktycznie deklaruje.
Co się dzieje ze zmiennymi CSS (custom properties)?
Zostają bez zmian, razem z ich nazwami -- i wartościami, bo minifikacja nie zmienia nazw ani nie rozwiązuje zmiennych.