CSS:n ideasta ja mahdollisuuksista

CSS, Cascading Style Sheet, eli kaskadiset tyyliohjeet on merkintäkieli, jota voidaan käyttää minkä tahansa XML-dokumentin esitystyylin määrittelemiseen. Yleisintä CSS:n käyttö on XHTML- ja HTML-dokumenttien, eli käytännössä www-sivujen yhteydessä. CSS:n käyttäminen mahdollistaa sisällön rakenteen ja ulkoasun erottamisen toisistaan siten, että dokumentin lukeminen on mahdollista sille määriteltyjen tyyliohjeiden lisäksi kokonaan ilman tyyliohjeita (selaimen oletustyylit) tai vaikkapa käyttäjän itse määrittelemillä tyyliohjeilla.

Tässä näytekansiossa esittelen hiukan CSS:n hyötyjä ja ongelmia sekä sen käyttötapoja. Sivulle on mahdollista valita tyylitiedosto kolmesta eri vaihtoehdosta tai valita käyttöön oman selaimen oletustyylit. Oletustyylien käyttämiseksi sivu valitsee tyhjän tyylitiedoston (eityylia.css). Kulloinkin käytössä olevan tyylitiedoston sisältöä voi tarkastella täällä. Lisäksi olen koonnut sivulle joitain hyödyllisiä CSS-aiheisia linkkejä (lähteet ja muuta materiaalia.)

Tyylitiedostojen lataus tapahtuu kahdella pienellä JavaScript-funktiolla Ensimmäinen on tehty kurssilla esillä olleen Ajax-esimerkin pohjalta. Koodi löytyy suoraan tämän sivun lähdekoodista. Funktio kirjoittaa parametrina saamansa elementin sisään innerHTML-funktiolla esimuotoiltuna tekstinä toisena parametrina saamansa tiedoston sisällön. Toinen funktio vaihtaa sivun käytettävän tyylitiedoston valitsemalla vaihtoehtoisista tyylitiedostoista parametrina saamansa nimen mukaisen tiedoston. Koodi on kopioitu A List Apart Magazinen sivuilta. (Sivuston koodit ovat vapaasti käytettävissä).

Toiminnallisuus vaatii selaimelta JavaScriptin käyttöä. Sivu on optimoitu Mozilla Firefox 1.5 -selaimelle. Se toimii mainiosti myös Opera 9 selaimella ja on luettava (joskaan ei kovin kaunis) Internet Explorer 6 -selaimella. Sivu on validi XHTML 1.0 Transitional-sivu ja CSS-tiedostot ovat valideja CSS-tyylitiedostoja. Validointimerkinnöissä on linkit sekä sivun XHTML-validointitulokseen että kullakin hetkellä käytössä olevan CSS-tiedoston validointitulokseen. Koska linkit muiden tyylitiedostojen validointituloksiin on piilotettu tyylimäärittelyn avulla, näkyvät ne kaikki ilman tyylitiedostojen käyttöä.

CSS:n käyttö

CSS-tyylimäärittelyt voidaan liittää sivuun kolmella tavalla. Tyylimäärittelyjä voidaan kirjoittaa suoraan (X)HTML-koodin sekaan määriteltävän tagin kohdalle. Esimerkiksi otsikko h4 voidaan määritellä vihreäksi, pistekoolle 20 ja alleviivatuksi (X)HTML-määrittelyjen
<h4><font-color="green" font-size="20"><u>Otsikko 4</u></font></h4>
sijaan kirjoittamalla
<h4 style"font-color:green; font-size:20; text-decoration:underline;>Otsikko 4</h4>
Tällainen käyttö ei kuitenkaan hyödynnä läheskään täydellisesti CSS:n mahdollisuuksia rakenteen ja ulkoasun irrottamiseen toisistaan. Määrittelyt joudutaan lisäksi kirjoittamaan erikseen jokaisen elementin kohdalle, mikä vaikeuttaa sivun ylläpitoa.

Tyylimäärittelyt voidaan kirjoittaa myös (X)HTML-dokumentin header-osaan. Esimerkiksi edellä esitetty esimerkki kirjoitettaisiin tällöin
<style type="text/css">
h4 { font-color:green; font-size:20; text-decoration:underline; }
</style>
Samassa yhteydessä voidaan siis määritellä kaikki sivuilla käytettävät tyylimäärittelyt ja myös koodia lukevan on helppo ne löytää.

Etenkin, jos samoja tyylimäärityksiä käytetään useilla sivustoilla, on yksinkertaisinta linkittää sivut ulkoiseen tyylitiedostoon. Tällöin dokumenttien header-osaan sijoitetaan linkki tyylitiedostoon:
<link href="tyylitiedostoni.css" rel="stylesheet" type="text/css">
Tyylitiedoston pitää sijaita samassa kansiossa siihen linkittyvien dokumenttien kanssa tai href-attribuutissa pitää antaa siihen viittaavaa url-osoite. Tällä menettelyllä voidaan dokumenttiin linkittää periaatteessa mistä tahansa löytyvä tyylitiedosto. Koska käytettävästä tyylitiedostosta pitää löytyä dokumentissa käytetyille elementeille sopivat määrittelyt, ei toki mitä tahansa tyylitiedostoa ole järkevää käyttää minkä tahansa dokumentin kanssa.

CSS:n etuja ja ongelmia

CSS:n avulla on mahdollista vaihtaa koko sivun ulkoasu vain yhtä tekstitiedostoa vaihtamalla. Sivun ulkoasun muuttaminen käy helposti, eikä määrittelyjä tarvitse muuttaa (X)HTML-koodin sisällä jokaisessa kohdassa erikseen. Lisäksi CSS:n avulla itse (X)HTML-koodi pysyy selkeämpänä, kun sen avulla kuvataan pelkkä rakenne ja tyylimäärittelyt ovat erikseen. CSS-tyylimäärittelyjä käyttämällä on mahdollista myös määritellä elementtien ulkoasua huomattavasti tarkemmin kuin (X)HTML-tageilla. Samoin CSS:n avulla on mahdollista tehdä dokumentista selaimella katseltavan version lisäksi helposti esimerkiksi tulostettava tai vaikka Braille-näytöllä tai äänisyntetisaattorilla luettava versio vain tyylitiedostoa vaihtamalla.

Ongelmana etenkin ulkoisten tyylitiedostojen käytön kanssa on, että pienenkin, vaikka vain yhdessä kohtaa sivulla käytettävän tyylimäärittelyn tekeminen saattaa olla työlästä: ulkoinen tyylitiedosto pitää luoda, se pitää linkittää dokumenttiin ja joudutaan mahdollisesti tekemään vielä pseudoluokkia, jotta määritykset osuisivat oikeaan elementtiin. Siten etenkin vähän tyylejä hyödyntävillä sivuilla määrittelyjen sijoittaminen kunkin tagin kohdalle erikseen on houkuttelevaa. Lisäksi ulkoasun ja sisällön totaalinen irrottaminen toisistaan on illuusio: www-sivut on tarkoitettu katsottaviksi, jolloin sivun ulkoasu vaikuttaa siihen, miten se hahmotetaan ja esimerkiksi mitä sivulla pidetään tärkeänä.

CSS:n käytön suurin hankaluus on sen vaihteleva tuki eri selaimilla. Etenkin Internet Explorer -selainta varten joudutaan usein tekemään erillisiä määrittelyjä, jotta sivut toimisivat sillä kuten Firefoxilla tai Operalla. Tämä siksi, että Explorer toteuttaa monet CSS-komennot eri tavoin kuin standardia tiukemmin noudattavat selaimet. Kaikissa selaimissa toimivien sivujen tekeminen on vaikeaa ja vaatii hidasta testaamista monilla eri selaimilla. Pikselin tarkkuudella samanlaisten sivujen toteuttaminen eri selaimilla voi olla jopa mahdotonta.