CSS-opas

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2008!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

CSS-tyylimäärittelyjen käytöstä johtuvia etuja ja haittoja

CSS on kuten mikä tahansa työkalu web-kehittäjän työkalupakissa. Muiden työkalujen tapaan CSS itsessään ei takaa parempaa lopputulosta, ainoastaan mahdollistaa sen. Hyviä lopputuloksia saavutetaan vasta kun CSS-tyylejä hyödynnettävä oikeaoppisesti ja oikeanlaisessa toimintaympäristössä. Vastaavasti jos CSS-tyylejä hyödynnetään väärällä tavalla tai vääränlaisessa ympäristössä, on lopputulos hyvin usein negatiivinen.

CSS on tehokkaampi tapa kuvata dokumentin ulkoasu kuin HTML tai XHTML

Voisitko kuvitella käyttäväsi Muistiota (NotePad) Microsoft Office Wordin sijasta työhakemuksen ja CV:n kirjoittamiseen? Tämä kuvastaa sitä eroa, joka HTML/XHTML ja CSS-tekniikoiden välillä on kun tehtävälistalla on web-dokumentin ulkoasun määrittely.CSS on helposti laajennettavissa myös perinteisen näytöllä tapahtuvan esityksen ulkopuolelle hyödyntämällä nk. mediatyyppi-määrittelyjä.

Käytännön työskentelyssä oman rajoituksensa CSS:n tehokkuudelle asettavat selainkohtaiset bugit / toteutusvirheet niin CSS-valitsinten kuin CSS-ominaisuuksien osalta.

CSS tekee sivuston hallinnasta helpompaa

CSS- ja XHTML-kielen olemassaolon perimmäisiä syitä on halu eriyttää web-dokumenttien sisältöön liittyvä merkintä ulkoasuun liittyvästä merkinnästä.

Ensimmäinen hyöty saavutetaan siistimpänä HTML / XHTML-merkintänä, joka kuvaa vain ja ainoastaan dokumentin rakennetta ja sisällön semanttista painoarvoa. Samalla myös kaikki dokumentin ulkoasuun ja esittämiseen liittyvä informaatio on siirtynyt CSS-tiedostoihin. Siistimpi ja järjestäytyneempi merkintätapa tarkoittaa hyvin usein myös pienempää koodimäärää (yleensä 30-40% tavallista HTML-sivua vähemmän), joka näkyy mm. helpompana koodin hallintana sekä nopeampina latausaikoina.

Toinen hyöty tästä piirteestä saavutetaan tilanteissa, joissa sivuston ulkoasua halutaan päivittää. Jos CSS-tyylimäärittelyjen käyttö on hallittua / suunniteltua, voidaan koko sivuston ulkoasu päivittää ainoastaan CSS-tiedostoa muuttamalla.

CSS-koodin kierrätys säästää aikaa, energiaa, ja parantaa toimintavarmuutta

Ammattikäytössä (ts. mainostoimistot, web-suunnittelijat) suurin hyöty saavutetaan kierrättämällä CSS-koodipohjia.

Käytännössä web-sivun yleisen ulkoasupohjan / asettelumallin voi rakentaa hyvin tarkkaan määrätyllä lukumäärällä tapoja (horisontaalinen vs. vertikaalinen, vai yhdistelmä? 1,2,3... kolumnia / tasoa? jne). Tallentamalla tämän mukaisen asettelumallin (XHTML+CSS), voidaan luoda uudelleenkierrätettäviä template-pohjia, joihin tarvitsee vaihtaa ainoastaan asiakaskohtaisesti määriteltävät piirteet (värit, taustakuvat jne).

Käytännössä yksinkertaisen HTML / XHTML-sivuston toteutukseen käytettävää aikaa voi leikata jopa 70% perinteiseen suunnitteluprosessiin verrattuna. Kierrätettävyys parantaa usein myös koodin laadua / toimintavarmuutta, sillä mitä pitempään samaa koodipohjaa hyödynnetään, sitä todennäköisempää on että siitä ei löydetä virheitä.

CSS tarjoaa mahdollisuuden rikkaampaan ja saavutettavaan käyttäjäkokemukseen

Perinteiset staattiset web-dokumentit kärsivät kieltämättä tietynasteisesta puisevuudesta verrattuna mm. Adobe / Macromedia Flash-pohjaisiin ratkaisuihin. CSS:n tehokkaalla hyödyntämisellä tilannetta on kuitenkin mahdollista parantaa huomattavasti.

Mediakohtaiset määrittelyt mahdollistavat dokumentin esittämisen useissa eri medioissa, esim. näytöllä tai paperilla, esitysmediaan mukautuen. Erikoisryhmät (esim. näkövammaiset) puolestaan hyötyvät mm. dokumenttien paremmasta saavutettavuudesta ja laajasta esitysmediatuesta (mm. braille-laitteet ja puhesyntetisaattorit).

Yhdistämällä CSS ja JavaScript toisiinsa on mahdollista saavuttaa toiminnallisuutta / tehosteita, jotka normaalisti ovat saavutettavissa vain aidoissa multimediaympäristöissä (jos niissäkään).

Tutustu artikkelin muihin osiin:
»»» CSS »»»CSS:n käytöstä aiheutuvia hyötyjä ja haittoja, osa 1
»»» CSS »»»CSS:n käytöstä aiheutuvia hyötyjä ja haittoja, osa 2