TAAT — CCSS

CCSS — Skompresowane pliki CSS

Uwaga: ten projekt został rozszerzony. Jego nowsza wersja to CSS&JSS.

CCSS: Compressed Cascading Style Sheets — Skompresowane Kaskadowe Arkusze Stylów

Co to jest CCSS?
Zalety CCSS
Deklaracja stałych w CSS
Zasada działania
Jak korzystać z CCSS?
Jak to zrobić?
Pobierz i używaj
Uwagi końcowe

Co to jest CCSS?

Pewno już się przekonałeś o tym, że warto swoje pliki CSS kompresować. Można dzięki temu zaoszczędzić nawet do 60% transferu i cennego czasu ładowania strony. Polska wersja CSSTidy pokaże Ci w jakim stopniu możesz odchudzić swoje pliki CSS.

Ale, ten sposób ma też minusy: pliki po kompresji są nieczytelne, pozbawione komentarzy, więc dodatkowo trzeba jeszcze gdzieś przechowywać oryginał, aby móc na nim pracować. Do tego, po każdej zmianie znowu trzeba plik na nowo skompresować.

Poniżej znajdziesz opis jak stworzyć rozwiązujący te problemy, prosty system dynamicznej kompresji plików CSS przy pomocy:

CSSTidy (darmowy kompresor plików CSS)
mod_rewrite (serwerowy przepisywacz adresów)
PHP

Zalety CCSS

serwujesz pliki skompresowane oszczędzając transfer i czas
serwowane skompresowane pliki nie są przetwarzane przez PHP
pracujesz na swoich oryginalnych plikach CSS
dodaje funkcjonalność deklaracji stałych w CSS
nie obciąża serwera
nie musisz dostosowywać kodu strony
możesz uruchomić CCSS w dowolnym momencie, nawet na działającym już serwisie
w każdej chwili możesz wyłączyć/włączyć przez modyfikację w .htaccess

Deklaracja stałych w CSS

A dlaczego nie pójść jeszcze dalej? Skoro i tak kompresja odbywa się w PHP, można dodać do pliku CSS funkcjonalności jakie daje PHP.

Jedną z rzeczy, której najczęściej mi brakuje w CSS, to możliwość zdefiniowania stałych. Można oczywiście zamienić kolory hurtem za pomocą opcji edytora, ale kolor można zadeklarować na kilka sposobów: black = #000 = #000000 = rgb(0, 0, 0) = rgb(0%, 0%, 0%). Kolory zdefiniowane na różne sposoby już nie tak łatwo zamienić.

CCSS pozwala na deklarację i wykorzystanie stałych:

/* deklaracja kolorów użytych w arkuszu */
$primary: #345868;
$secondary: #345868
$shadow: rgb(178, 178, 178);

/* użycie zadeklarowanych kolorów kiedy trzeba */
.element {
	background: $secondary;
	color: $primary;
	border-bottom: 2px solid $shadow;
}

Zasada działania

Zasada działania jest następująca:

serwer wysyła żądanie wyświetlenia pliku (np. /css/plik.css)
za pomocą mod_rewrite odsyłamy serwer do pliku skompresowanego (/css/cache/plik.php)
jeśli plik w cache nie istnieje, CSSTidy automatycznie skompresuje i zapisze w cache wersję spakowaną
dodatkowo zadeklarowane stałe są podmieniane w całym pliku
możliwe jest włączenie trybu developera, w którym cache i kompresja są wyłączone

Jak korzystać z CCSS?

Struktura katalogów powinna wyglądać mniej więcej tak:

/css/.htaccess
/css/twoj_plik-1.css
/css/twoj_plik-2.css
...
/css/cache/ (<-tu będą się pojawiały skompresowane pliki)
/css/ccss/index.php
/css/ccss/csstidy/
/css/ccss/csstidy/class.csstidy.php
/css/ccss/csstidy/class.csstidy_optimise.php
/css/ccss/csstidy/class.csstidy_print.php
/css/ccss/csstidy/data.inc.php

Swoje pliki CSS trzymasz w katalogu /css/ i w razie potrzeby je edytujesz.
Jeśli potrzebujesz nową wersję skompresowaną w cache, usuwasz starą wersję z foldera /css/cache/ i CSSTidy kompresuje ją automatycznie
Kompresuj wszystkie pliki CSS: http://example.com/css/compress/
Kompresuj jeden plik: http://example.com/css/compress/filename.css
Pokaż informacje o oryginalnym pliku CSS: http://example.com/css/show/filename.css
Pokaż informację o wersji z cache: http://example.com/css/cached/filename.css

Jak to zrobić?

Struktura katalogów

Utwórz strukturę katalogów jak poniżej:

/css/ (<- Twój folder z plikami CSS)
/css/cache/ (<- folder na skompresowane pliki CSS, z prawami do zapisu)
/css/ccss/csstidy/ (<- pliki CSSTidy)

Biblioteki CSSTidy

Pobierz pliki źródłowe CSSTidy i rozpakuj je do katalogu /css/ccss/csstidy/. Potrzebne są tylko cztery pliki:

class.csstidy.php
class.csstidy_optimise.php
class.csstidy_print.php
data.inc.php

Prawa do zapisu w `cache`

Przyznaj prawa do zapisu w folderze cache. W nim będą zapisywane pliki skompresowane przez CSSTidy i wyświetlane użytkownikom.

Przekierowania `mod_rewrite`

Teraz musimy przekierować zapytania o pliki CSS do plików w cache, a także aktywować skrypt obsługujący kompresję. Utwórz plik /css/.htaccess z następującą treścią:

RewriteEngine On
RewriteBase /
# ----------------------------------------------------------------------------------------
#   Kompresja i cache plików CSS
# ----------------------------------------------------------------------------------------
# Przekieruj wszystkie zapytania o pliki CSS do plików w cache
RewriteRule ^css/([^/]+\.css)$ /css/cache/$1
# Jeśli plik w cache nie istnieje, kompresuj oryginał
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^cache/([^/]+\.css)$ /css/ccss/index.php?file=$1 [L]
# Kompresuj wszystkie pliki CSS: http://example.com/css/compress/
RewriteRule ^compress/?$ /css/ccss/index.php?all=1 [L,NC,QSA]
# Kompresuj jeden plik: http://example.com/css/compress/filename.css
RewriteRule ^compress/([^/]+\.css)$ /css/ccss/index.php?&compress=1&file=$1 [L]
# Pokaż informacje o oryginalnym pliku CSS: http://example.com/css/show/filename.css
RewriteRule ^show/([^/]+\.css)$ /css/ccss/index.php?cached=0&file=$1 [L]
# Pokaż informację o wersji z cache: http://example.com/css/cached/filename.css
RewriteRule ^cached/([^/]+\.css)$ /css/ccss/index.php?cached=1&file=$1 [L]
# Tryb developera, bez kompresji, bez cache, stałe włączone: http://example.com/css/dev/filename.css
RewriteRule ^dev/([^/]+\.css)$ /css/ccss/index.php?cached=0&developer=1&constants=1&file=$1 [L]
# ----------------------------------------------------------------------------------------

Skrypt obsługujący kompresję

Utwórz plik /css/ccss/index.php i wklej do niego następujący kod źródłowy:

Ten krótki skrypt obsługuje wszystkie potrzebne nam operacje:

kompresuje pliki do cache jeśli ich jeszcze nie było
pozwala na żądanie skompresować wszystkie pliki
pozwala na żądanie skompresować wskazany plik
wyświetla informacje o oryginalnym pliku CSS
wyświetla informacje o cacheo’wanym pliku CSS
obsługuje stałe w CSS (w postaci $stała:wartość)
pozwala na włączenie trybu developera (wyłączone cache i kompresja)

Uwaga: Upewnij się, że w kodzie skryptu podajesz prawidłowe ścieżki, oraz że katalog cache ma prawa do zapisu.

Bezpieczeństwo

Jeśli nie chcesz, aby ktokolwiek miał dostęp do skryptu obsługującego kompresję lub oglądał oryginalne wersje Twoich plików CSS, zabezpiecz dostęp do katalogów hasłem.

Warto też użyć innych nazw katalogów i plików niż podano w powyższych przykładach.

Pobierz i używaj

Do pobrania wszystkie pliki: Pobierz CCSS

Upewnij się, że używasz najnowszej wersji CSSTidy.

Uwagi końcowe

Przedstawiony plik index.php jest tylko wersją przykładową. W zależności od konfiguracji Twojego serwera będziesz musiał przygotować plik odpowiadający jego potrzebom, pamiętając o odpowiednim zabezpieczeniu przed ingerencjami osób trzecich.

CSSTidy dostępny jest także w wersji C++, więc jeśli masz własny serwer, możesz przygotować szybciej działającą wersję.

Podobne rozwiązanie możesz zastosować dla skryptów JavaScript (np. używając Komresor JavaScript Deana Edwardsa zamiast CSSTidy), a nawet dla plików HTML.

Uwagi można zgłaszać na nasz adres e-mail. Subskrybuj kanał informacyjny aby być powiadamianym o nowych wersjach.