Od jakiegoś czasu grzebię sobie po GitHubie. Pomyślałem, że rozpocznę cykl opisów skryptów, które wzbudziły moją ciekawość lub wg mnie mogą być dosyć przydatne dla webmasterów. Na pierwszy ogień idzie CSS Crush — narzędzie do automatycznego zmniejszania wielkości plików CSS.
Zapewne każdy kto szukał kiedyś możliwości zaoszczędzenia nieco transferu natknął się na różne programy do miniaturyzacji skryptów. Chyba najpopularniejsze narzędzie to YUI Compressor, które przyjmuje pliki JavaScript lub CSS i próbuje powyrzucać trochę „niepotrzebnych” znaków. Minusem w/w programu jest to, że jest napisany w Javie. Co prawda powstał port w JavaScript, ale powiedzmy, że szukamy wygodniejszego rozwiązania, które daje się rozszerzać.
CSS Crush to właściwie jedna klasa plus kilkanaście funkcji (makr) rozbudowujących. To trochę dziwna klasa, bo WSZYSTKO mamy statyczne. Nawet mnie się to nie podoba, no ale niech będzie. Widocznie autor ma ważne podstawy żeby tak robić.
Używa się tego bajecznie prosto. Gdzieś wcześniej żądamy dołączenia pliku CSS_Crush.php, a następnie w sekcji head gdzie linkujemy nasz kod CSS wystarczy wpisać
<link rel="stylesheet" type="text/css" href="<?php echo CSS_Crush::file('/styles/style.css'); ?>">
i właściwie tyle. Skrypt sam sobie utworzy zminimalizowany plik i zwróci do niego ścieżkę dostępu. Jest to na tyle sprytne, że jeżeli nie wprowadzaliśmy żadnych zmian do pliku źródłowego CSS, to skrypt nie będzie mielił go ponownie.
Proces miniaturyzacji pliku przebiega w zasadzie zgodnie z tym co robi YUI Compressor, czyli m.in. wywalanie zbędnych enterów, spacji, średników, nadmiarowych zer i zamianę kolorów podanych w rgb na hexy.
CSS Crush można również rozszerzać o makra. Aktualnie dostępne są ułatwiacze w stylu automatycznego dodawania -moz-
i -webkit-
oraz dodawanie kilku hacków.
Programem można sterować poprzez dodanie mu tablicy asocjacyjnej jako drugiego argumentu przy CSS_Crush::file
. Są to booleany 'macros'
, 'comments'
, 'minify'
i 'versioning'
. Jako swego rodzaju mankament można uznać formułkę, która wyświetla się na początku każdego zmielonego pliku. Zaproponowałem autorowi dodanie opcji 'boilerplate'
, za pomocą której wywalimy nagłówek pliku.
Chyba jest o co walczyć, skoro plik CSS Gazety.pl z 77,6 KB zmniejszył się do 67 KB. Ta wartość razy kilkaset tysięcy odwiedzin jakieś oszczędności na transferze nam zapewni.