TAAT Technologie Cyfrowe

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?

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:

  1. CSSTidy (darmowy kompresor plików CSS)
  2. mod_rewrite (serwerowy przepisywacz adresów)
  3. PHP

Zalety CCSS

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:

  1. serwer wysyła żądanie wyświetlenia pliku (np. /css/plik.css)
  2. za pomocą mod_rewrite odsyłamy serwer do pliku skompresowanego (/css/cache/plik.php)
  3. jeśli plik w cache nie istnieje, CSSTidy automatycznie skompresuje i zapisze w cache wersję spakowaną
  4. dodatkowo zadeklarowane stałe są podmieniane w całym pliku
  5. 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
  1. Swoje pliki CSS trzymasz w katalogu /css/ i w razie potrzeby je edytujesz.
  2. Jeśli potrzebujesz nową wersję skompresowaną w cache, usuwasz starą wersję z foldera /css/cache/ i CSSTidy kompresuje ją automatycznie
  3. Kompresuj wszystkie pliki CSS: http://example.com/css/compress/
  4. Kompresuj jeden plik: http://example.com/css/compress/filename.css
  5. Pokaż informacje o oryginalnym pliku CSS: http://example.com/css/show/filename.css
  6. 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:

  1. class.csstidy.php
  2. class.csstidy_optimise.php
  3. class.csstidy_print.php
  4. 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:

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.

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

Nawigacja

Ciekawe? Subskrybuj kanał RSS bo będzie więcej!

RSS ?