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

Periytyminen ja valitsimet

Valitsinten toimitivuus eri selaimilla

Vaikka valitsimet tarjoavatkin erittäin tehokkaan työkalun dokumentin ulkoasun hallintaan, tulee niiden käyttämisessä hyödyntää tiettyä varovaisuutta. Vaikka kaikkien moderneimpien selainten (Opera 9, Firefox 2, IE 7) tuki valitsimille onkin jo erittäin monipuolinen, on käytössä edelleenkin paljon vanhempia päätelaitteita, joissa valitsintuki on hyvinkin puutteellinen.

Käytännössä valitsinten toimimattomuuden vanhemmilla selaimilla pystyy kiertämään mm. ID- ja class-attribuutteja hyödyntämällä, mutta kokonaisvaltaisesti tämä on hyvin työläs tapa ratkaista pientä yleisöä koskeva ongelma. Jos haluaa olla varovainen ja varma siitä, että sivuston ulkoasu taittuu oikein kaikissa eri tilanteissa, tulisi hyödyntää ainoastaan seuraavia valitsimia:

elementtivalitsin (E)
ryhmittelyvalitsin (E,F)
class-attribuuttivalitsin (E.a)
ID-attribuuttivalitsin (E#a)
Linkkeihin liittyvät pseudoluokat

Huom! ao. taulukossa "Ei toimi "(punainen ruksi) tarkoittaa, että valitsin ei toimi ollenkaan tai sen toiminnassa on huomattavia virheitä. "Toimii" (vihreä ruksi) tarkoittaa, että valitsin toimii virheettä tai sen toiminnassa on vähäisiä, lähinnä syntaksin tulkintaan liittyviä virheitä. Pseudoluokissa :active ja :hover tarkastelun lähtökohtana on ollut toimivuus vain linkki-elementillä a, muilla elementeillä tuki voi olla puutteellinen (etenkin IE6 ja vanhemmat).

Internet Explorer

Internet Explorerin markkinaosuus keväällä 2007: noin 70% selainmarkkinoista. IE6 on edelleen hallitseva selain noin 50% osuudella, IE7 noin 15% osuus.

Ominaisuus	IE 4	IE 5	IE 5.5	IE 6	IE 7
*
E
E F
E,F
E > F
E + F
E.a
E#a
E [a]
E[a="b"]
E[a~="b"]
E[a\|="b"]
E:after
E:before
E:first-letter
E:first-line
E:first-child
E:lang(a)
E:link
E:visited
E:active
E:hover
E:focus

Gecko-pohjaiset selaimet ja muut

Gecko-pohjaisten selainten markkinaosuus keväällä 2007: noin 28% selainmarkkinoista. Firefox on hallitseva selain noin 25% osuudella, Safarin osuus noin 2%.

Ominaisuus	NS 4.x	NS 6.x	FF 1.0	FF 2.x	Safari
*
E
E F
E,F
E > F
E + F
E.a
E#a
E [a]
E[a="b"]
E[a~="b"]
E[a\|="b"]
E:after
E:before
E:first-letter
E:first-line
E:first-child
E:lang(a)
E:link
E:visited
E:active
E:hover
E:focus

Opera

Opera-pohjaisten selainten markkinaosuus keväällä 2007: noin 2% selainmarkkinoista. Opera 9.x on hallitseva versio. Operan markkinaosuus on todennäköisesti jonkun verran isompi, sillä jotkin sen versiot tunnistavat itsensä mm. IE:nä.

Ominaisuus	Opera 5	Opera 6	Opera 7	Opera 8	Opera 9
*
E
E F
E,F
E > F
E + F
E.a
E#a
E [a]
E[a="b"]
E[a~="b"]
E[a\|="b"]
E:after
E:before
E:first-letter
E:first-line
E:first-child
E:lang(a)
E:link
E:visited
E:active
E:hover
E:focus

Tutustu artikkelin muihin osiin:
»»» CSS »»»Periytyminen
»»» CSS »»»CSS:n valitsimet - yleisesti ja listaus
»»» CSS »»»CSS:n valitsimet - esimerkit ja tarkempi esittely
»»» CSS »»»CSS:n valitsimet - pseudovalitsimet
»»» CSS »»»CSS:n valitsimet - toimivuus eri selaimilla