Ab urbe condita
Każdy, kto porówna zwyczajny maszynopis napisany na tradycyjnej maszynie do pisania z tekstem opracowanym za pomocą komputerowego edytora, ujrzy zasadnicze różnice. Tam – jednakowa czcionka o stałej szerokości, tu – rozmaitość krojów i stylów czcionek proporcjonalnych. Tam – ubogie, wręcz prymitywne środki wyróżniania tekstu w postaci podkreślenia linią prostą lub falowaną (najczęściej rysowaną odręcznie…), tu – możliwość pochylenia, pogrubienia, zastosowania kolorów. Tam… Tych oczywistych przewag nie ma sensu dłużej wymieniać, natomiast warto powiedzieć sobie, dlaczego wyżej cenimy dokumenty, które graficznie oraz typograficznie są bogatsze i bardziej urozmaicone. To jasne – przede wszystkim są czytelniejsze – bowiem dysponując możliwością formatowania tekstu oraz jego graficznego uatrakcyjnienia mamy wpływ na to, co czytelnik odbierze jako informację ważną i istotną. Dostarczymy mu też przy okazji pewnej (może nawet nieuświadomionej) przyjemności płynącej z obcowania z pięknie uformowanym przekazem.
Porównanie maszynopisu z elektroniczną publikacją jest dobrym pomysłem, gdy chcemy dostrzec różnice między zwyczajną stroną WWW, na której zastosowano jedynie standardowe elementy języka HTML, a dokumentem wykorzystującym arkusze stylów. Choć jest to dzisiaj trudne, to spróbujcie: zaglądnijcie na któryś z akademickich serwerów WWW, najlepiej do fizyków, informatyków lub matematyków – być może ujrzycie tam kopalne przykłady, jak do niedawna jeszcze wyglądały strony WWW. Nie chcę ironizować – naukowcy mieli i wciąż mają swoje dobre powody, by dokumenty publikowane w Internecie tak właśnie się przedstawiały, ale trudno też odmówić racji tym, którzy twierdzą, że strony tego typu odznaczają się urodą rolki papieru toaletowego.
Obrońcy tradycji słusznie zresztą zauważą, że HTML od zawsze posiadał pewne środki, służące do tego, aby niektóre fragmenty tekstu były wyróżniane. Na przykład element <STRONG> oznaczał chęć silnego zaakcentowania danego fragmentu tekstu, a znacznik <EM> służył do wyróżnienia fragmentu z reszty komunikatu.
Rzecz w tym, że HTML nie definiuje, jak owo silne akcentowanie czy wyróżnienie ma się przedstawiać po stronie odbiorcy. W istocie rzeczy wyróżnienie tego typu ma charakter bardziej logiczny (to jest ważne!, to jest ważniejsze!) niż wizualny (czy dźwiękowy). Trzeba pamiętać, że HTML powstał w czasach, gdy nie istniały przeglądarki graficzne, a monitory były przeważnie monochromatyczne, zatem jedynym wizualnym wyróżnieniem tekstu oznaczonego takim logicznym elementem mogło być co najwyżej intensywniejsze wyświetlenie czcionki ekranowej. Gdy pojawiły się przeglądarki pracujące w środowiskach graficznych, ich twórcy dość arbitralnie zdecydowali o przypisaniu znacznikom logicznym, strukturalnym pewnych atrybutów czcionek stosowanych w graficznych interfejsach. Tak więc <STRONG> powoduje wyświetlenie tekstu za pomocą czcionki pogrubionej, <EM> – pochyłej, znacznik <H1> zazwyczaj reprezentowany jest przez czcionkę odpowiednio dużą i pogrubioną, zaś znacznik <CODE> używa którejś czcionki monotypicznej.
Przyzwyczajenia użytkowników systemów posiadających graficzny interfejs (np. MacOS czy Windows) sprawiły, że producenci przeglądarek wprowadzili do języka HTML nowe znaczniki, których zastosowanie ma jedynie taki cel, że zmieniają one wygląd dokumentu. Znacznik <I> pochyla tekst, znacznik <B> – pogrubia, ale żaden z nich nic nie mówi o funkcji wyróżnionego nim fragmentu dokumentu. To znaczy – owszem, użytkownikom graficznej przeglądarki działającej w systemie Windows być może przekazują dodatkową informację, ale wszystkie inne przeglądarki (tekstowe albo głosowe – dla niewidomych) zignorują te znaczniki. Podobne przeznaczenie ma znacznik <FONT> z atrybutami, który pozwala zastosować rozmaity krój, kolor i rozmiar czcionki na stronie WWW. Pojawiła się zatem tendencja do unikania znaczników strukturalnych – „Po co mam się męczyć, skoro zamiast <H1> można użyć pięknej, czerwonej czcionki, np. <FONT SIZE=”7″ COLOR=”#FF0000″>? Po co <STRONG>, skoro jest krótkie i oczywiste <B>?” – pytali początkujący projektanci stron, dla których standardowe paski narzędzi popularnych edytorów tekstowych stały się punktem odniesienia w kształtowaniu projektanckich umiejętności. Znacznik <FONT> „namieszał” dodatkowo przez to, że umożliwiał wykorzystanie na stronie dowolnej czcionki zainstalowanej w systemie projektanta, ale nie dostarczał żadnego mechanizmu gwarantującego, że odbiorca zobaczy to samo – a przecież mógł nie posiadać akurat takiej czcionki w swoim komputerze.
Niezły bałagan. Psucie podstawowych założeń języka HTML, „innowacje” producentów, wprowadzających specyficzne tylko dla ich przeglądarek znaczniki – jak to określił David Siegel (guru projektowania witryn internetowych) – sieci WWW zagroziła bałkanizacja.
Finis coronat opus
Ale tym, którzy koncentrowali się nie na logicznej strukturze, lecz na wizualnym wyrazie też przecież zależało na celu słusznym i zbawiennym: chcieli uczynić strony WWW atrakcyjniejszymi i ładniejszymi. I oto pojawiły się Cascading Style Sheets (tak naprawdę nie „i oto” – pomysł jest stary jak komputery, ale nie będziemy psuli efektu dramatycznego).
Koncepcja arkuszy stylów pozwala projektantom witryn internetowych wyjść z zamętu sprzecznych strategii, pogodzić logiczny rygoryzm tradycyjnego języka HTML z plastycznymi ambicjami projektantów. Co więcej: CSS opracowane zostały jako narzędzie uniwersalne, które potrafi uzupełnić nie tylko HTML o informacje „stylistyczne” – ale także inne języki, jak np. XML. Zasady przyświecające wykorzystaniu arkuszy stylów są następujące:
- Arkusz towarzyszy dokumentowi HTML (lub XML) bez nadmiernej ingerencji w kod źródłowy strony. Zmiana arkusza nie powinna powodować znaczących modyfikacji kodu strony.
- CSS są niezależne od przeglądarki, systemu i wykorzystywanych urządzeń wyjściowych, a ich zastosowanie ma uczynić dokumenty obecne w sieci WWW podobnie niezależnymi.
- Użycie CSS pozwala na łatwą konserwację istniejących witryn. Np. zmiana atrybutów domyślnej czcionki wykorzystywanej na wszystkich stronach witryny (a może ich być setki) powoduje konieczność modyfikacji zaledwie jednego zapisu w arkuszu stylów.
- Pisanie arkusza stylów jest proste, bo zawsze oparte na tej samej składni (będziemy o tym niedługo pisać), arkusz można rozszerzać bez konieczności modyfikowania już zdefiniowanych własności stylów.
- Arkusze stylów mogą skutecznie zastępować grafikę, odciążając w ten sposób zatłoczone sieci komputerowe.
- Wykorzystanie któregoś z języków skryptowych (np. JavaScript) pozwala dynamicznie modyfikować atrybuty wyświetlanych na ekranie elementów strony, co sprawia, że można tworzyć witryny zawierające treści aktywnie „reagujące” na zachowania odbiorcy.
- Własności opisane przez arkusze stylów możemy „aplikować” stronom WWW w rozmaity sposób: albo poprzez kojarzenie dokumentu HTML z zewnętrznym arkuszem stylów (zdefiniowanym jako domyślny w przeglądarce, zdefiniowanym przez projektanta strony lub przez użytkownika przeglądarki), poprzez osadzenie arkusza w nagłówku dokumentu HTML lub wreszcie przez zastosowanie stylowych atrybutów w głównym korpusie dokumentu HTML (szczegóły również znajdziecie wkrótce na tych stronach).
- Arkusze stylów pozwalają udostępniać dokumenty HTML poprzez różne media (wizualne, dźwiękowe, dotykowe) różnym odbiorcom – także niewidzącym.
- Wykorzystanie „stylowych” własności czcionek pozwala na eliminację graficznych namiastek napisów, co „uelastycznia” stronę, czyni ją mniej wrażliwą np. na zmianę rozdzielczości monitora i niezależną od jednego tylko – wizualnego – medium.
- Własności pozycjonowania stwarzają niezwykłe wręcz możliwości komponowania wyglądu stron, uwalniają projektanta od karkołomnych sztuczek z tabelami jako ramami kompozycyjnymi i z jednopikselowymi, przezroczystymi gifami.
Hm, dość powodów, żeby zainteresować się wykorzystaniem arkuszy stylów!