Tyylien hyödyt

Yleisesti voidaan todeta tyylien käytöstä aiheutuvien hyötyjen olevan huomattavasti suurempia kuin tyylien mukana tulevien haittojen. XHTML-dokumenteissa ensimmäiseen tyylien hyötyyn törmää jo dokumenttien tekovaiheessa. Tyylilomakkeita käyttämällä sivuston tekijän ei tarvitse juurikaan kiiinnittää huomiota sivujen ulkoasuun, vaan hän voi keskittyä kokonaan dokumenttien sisällön hiomiseen.

Suurilla organisaatioilla voi olla tiukat määräykset sivustonsa ulkoasusta, jolloin WWW-sivustolla on oma ylläpitäjä. Ulkoasun yhtenäisyys ja helppo muokattavuus on yksi huomattava etu tyylitiedostojen käytössä. Esimerkiksi yrityksillä tai organisaatioilla voi olla useita kymmeniä tai satoja WWW-sivuja, joiden on oltava yrityksen "näköisiä" pelkästään yrityksen imagon vuoksi. Esimerkiksi yrityksen tunnusvärien muuttuessa WWW-sivujen ulkonäkö täytyy luultavasti muuttaa toisenlaiseksi. Jos jokaista yrityksen WWW-sivuilla olevaa dokumenttia joudutaan muokkaamaan erikseen voi hommaan mennä jopa viikkoja. Tietenkin muutokset voidaan tehdä erillisellä ohjelmalla, mutta ohjelman rakentaminen ja sen tekemien virheiden korjaaminen varmasti kestää jonkin aikaa. Tyylien avulla värien muuttamiseen menee aikaa vain muutamia minuutteja. Toki sivuille tehtävät muutokset voivat olla huomattavasti suurempia kuin pelkän värin muuttaminen toiseksi.

Tyylilomakkeiden ainoana haittapuolena voidaan pitää selainten vaihtelevaa tukea tyyleille. Tyylien toimivuus vaihtelee selaimittain hyvin runsaasti selainten eri versioiden välillä, joten tyylilomakkeita käyttävät sivut on suunniteltava toimimaan myös ilman tyylejä. Jacob Nielsenin tekemän tutkimuksen perusteella ihmiset eivät kovin helposti asenna koneelleen uusinta selainta, jos vanha selain toimii heidän mielestään riittävän hyvin. Tämän vuoksi selainten ja niiden eri versioiden kirjo on hyvin laaja. Sivuston sisältö pitäisi olla saatavilla myös ilman tyylilomakkeiden käyttämistä, koska tyylilomakkeiden on tarkoitus kuvata vain ulkoasua. Tyylilomakkeita sisältävät sivut kannattaa suunnitella ja testata huolellisesti myös ilman tyylilomakkeita. Erilaisten lisäominaisuuksien käyttö ei saa häiritä käyttäjiä, jotka eivät pysty syystä tai toisesta käyttämään lisäominaisuuksia hyväkseen. Jotkut ihmiset eivät edes pysty käyttämään selaimia jotka tukevat tyylejä. Tällöin oleelliseksi tuleekin dokumentin hyvin määritelty rakenne, joka edesauttaa sivun toimimista kaikilla selaimilla. Yksinkertaisin esimerkki selaajasta, joka ei näe tyylejä on, google-hakupalvelun robotti, joka selaa läpi sivuja ja tallentaa niiden sisältöä tietokantaansa. Toinen esimerkki voisi olla näkövammainen henkilö.

Monimutkaisia tyylilomakkeita kirjoitettaessa sivusto kannattaa testata tärkeimmillä selaimilla. Paras CSS-tuki löytyy Mozillasta ja Operasta. Eniten käytetty Internet Explorer selain tulkitsee tyylejä monesti hieman väärin joten pelkästään sillä testaamiseen ei kannata luottaa.

Tyylilomakkeiden käyttämisessä kannattaa aina muistaa, että dokumentin tekijän määrittelemä tyylilomake on vain suositus käytettävästä ulkoasusta. Dokumentin lukija voi aina oman selaimensa asetuksilla ohittaa dokumenttiin liitetyn tyylilomakkeen määrityksiä, koska hän itse tietää parhaiten omat tarpeensa. Sivunsa tyylit kannattaakin suunnitella niin, että ne mukautuvat mahdollisimman hyvin käyttäjän selaimen asetuksiin. Ei siis kannata pakottaa tekstiä tietyn kokoiseksi vaan ennemmin ehdottaa, että käytetään käyttäjän selaimen tekstin oletuskokoa. Ei myöskään kannata pakottaa sivua tietyn levyiseksi koska pakotettu leveys on aina jollekin liian leveä tai kapea. Tyylimäärityksistään kannattaa tehdä mahdollisimman mukautuvia. WWW-sivujen ulkoasun suunnittelu eroaa hyvin suuresti perinteisestä paperiesitteiden tms. tulosteiden suunnittelusta. Paperi on aina tietyn kokoinen mutta WWW-sivun fyysistä kokoa ei voida tietää koska se vaihtelee käytettyjen ohjelmien ja ympäristöjen mukaan.

WWW:n selaamiseen käytettyjen päätelaitteiden ja ohjelmien kirjo kasvaa koko ajan. Tätä varten CSS2-suosituksessa otetaan erityisesti huomioon erilaisten päätelaitteiden ominaisuuksia. CSS2:n avulla on mahdollista määritellä oma ulkoasunsa esim. televisiota käyttävälle lukijalle, kännykän käyttäjälle, tekstiselaimen käyttäjälle tai ääniselaimen käyttäjälle. Kullakin laitteella on omat rajoituksensa kuten epätarkka näyttö, erittäin pieni näyttö, ei ollenkaan grafiikkaa jne. Nämä voidaan erikseen huomioida erilaisilla tyylilomakkeilla. Esim. sivu näytetäänkin erilaisella ja suuremmalla kirjasimella jos sitä katsellaan piirtoheittimellä. Ei tarvitakaan enää erillistä Powerpoint-esitystä. Kännykkäkäyttäjän näytöstä jätetään pois tilaa vievää grafiikkaa. Ääniselaimen käyttäjälle määritellään oma lukuääni otsikoille, linkeille ja leipätekstille.

Seuraavassa lyhyt esimerkki tyylilomakkeen oikeaoppisesta käyttämisestä XHTML-dokumentin ulkoasun määrittelemiseksi. Seuraavassa kuvassa ( Kuva 1) on yksinkertainen XHTML-dokumentti, jonka ulkoasu on määritelty ulkoisen tyylilomakkeen avulla.

appro.mit.jyu.fi:n etusivu tyylimääritysten kera
Kuva 1: Tyylilomakkeen avulla muotoiltu sivu.

Seuraavassa kuvassa ( Kuva 2) on edellä esitetyn kuvan (Kuva 1) XHTML-dokumentti, josta tyylilomake on poistettu käytöstä. Sivun ulkoasu ei enää korosta kahtiajakoa, mutta sivu on kuitenkin toimiva ja sivuilla oleva informaatio on luettavissa kokonaisuudessaan. Esimerkiksi merkkipohjaisilla selaimilla sivu näkyisi miltei kuvassa esityn kaltaisena.

appro.mit.jyu.fi:n etusivu ilman tyylimäärityksiä
Kuva 2: Edellisen kuvan (Kuva 1) XHTML-dokumentti ilman tyylilomaketta.

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/doc/tyovaline/css/index1.html
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2003-09-23 16:21:09
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto