[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]

Selainkohtaisia seikkoja

Microsoft Internet Explorer

Arvioitsen MS IE 5.x -selaimet CSS2-tason mukaisesti, vaikka se ei edes lupaa täyttä tukea kaikille CSS2 tason ominaisuuksille. Yleisesti ottaen MS IE 5.x -selaimissa on vain keskinkertainen CSS-tuki ja selain on ollut minulle tässä suhteessa pettymys. Vain osa MS IE 4.01 olleista selkeistä CSS1 -tason virheistä on korjattu. Selaimista myös puuttuu tärkeitä CSS2-tason piirteitä. Ylipäätänsä siis CSS-tuen tason on vain osittainen.

Suurin ongelma on se, että Windows-selaimissa on perustavalaatuisia CSS-toteutusvirheitä (lue sivulta Miten CSS annetaan elementtien taustoille ja reunoille[S]).

Microsoft on kuitenkin tehnyt merkittäviä parannuksia 6.0-sarjaan (myös MS IE 5.0 Mac on hyvä selain). Selain toimii tietyillä DTD:llä tuettujen ominaisuuksien osalta hyvin pitkälle olemassa olevia standardeja noudattaen. Tarkempi analyysi virheistä ja korjauksista on erillissivulla.

Netscape Navigator

Netscape 4.0x -selaimissa on todella ikävän huono CSS-tuki - se on yksinkertaisesti kamalan huono selain tässä suhteessa (lue vihjeeni, miten Netscape 4.x -selaimen kanssa voi pärjätä[S][Pw]). Netscape 6.x+ -selaimissa on sangen hyvä CSS-toteutus! Selainten ydin on Mozilla Gecko esityskone (rendering engine) ja ytimeltään samoja selaimia saa eri nimillä (kuten esim. Mozilla, Galeon ja Phoenix). Mozilla Gecko -selaimissa on lähes virheetön CSS1-tason ominaisuuksien käsittely ja sangen laaja CSS2-tuki. Dynaamisen näennäisluokan :hover toteutus voi kuitenkin tuottaa web-dokumenttien tuottajille ongelmia, sillä Mozilla Gecko -selaimet (kuten myös uusimmat Opera-selaimet) toteuttavat sen laajemmin kuin monet muut selaimet (lue englanninkielinen kommentti sivulta CSS notes 1[S]).

Opera

Opera 5.02:ssa on sangen hyvin toimiva CSS2-tuki ja se toistaa kaikki CSS1-piirteet (Opera 4.02:sta puuttuu on :visited tukeminen). Opera antaa uskoa CSS:n toimivuuteen. Operan CSS-toteutuksessa ei ole lainkaan vakavia virheitä.

Uudemmat versiot toteuttavat enemmän CSS2:een liittyviä piirteitä, mutta standardien noudattamisen tarkkuudessa on pieniä puutteita. Joissakin suhteissa vanhemmat selaimet noudattavat paremmin speksejä kuin uudemmat. Spesifikaatioiden noudattamisen taso on kuitenkin yleisesti ottaen sangen hyvä.

Muutamia demonstraatioita joistakin selainten puutteista

Seuraavassa on pieni listaelementtitesti, jossa olen merkinnyt käytetyt tunnistettavat hahmot (matching patterns) ja valitsimet (selectors; nimien merkitys on selitetty sivulla Mikä on CSS:n prosessointijärjestys[S][Pw]. Testi selvittää myös osaako selain CSS2 tasoisesti määritellyn porrastetun valintajärjestyksen (cascading order). Niistä selaimista, joita olen testaillu vain Mozilla Gecko ja Opera 7.x+ -selaimet ovat selvittäneet testin virheettä (on mahdollista, että myös Safari ja Konqueror-selaimet selviäisivät yhtä hyvin):

Tälle kappaleelle on määritelty rivinsisäinen tyyli ja näiden sanojen ympärillä pitäisi olla reunukset. Mikäli näin ei ole, selain ei tue kunnolla rivinsisäisiä elementtejä. Jos MS IE -selainta yrittää "huiputtaa" antamalla lohkoelementeille kuuluvan ominaisuuden, lopputulos on ikävän näköinen. Reunustettu teksti ei pysy samalla korkeudella muuhun tekstiin nähden - kuten saatat havaita! Lohko-ominaisuuden lisääminen muuttaa tekstin toisinaan lähes normaalisti käyttäytyväksi lohkoelementiksi. Selain yrittää pitää tällöin tekstin aina yhtämittaisena. Mahdollisen rivikatkon sattuessa ei salli samalle riville muuta tekstiä. Käytös on siten toisinaan yleisten rivinsisäis- ja toisinaan lohkoelementtien (DIV ja SPAN) kaltainen - aina kuitenkin virheellinen. Erään s-postin mukaan MS IE käsittelee rivinsisäiselementtejä eräänlaisina erityislohkoina, mikä selittää tuota virhekäytöstä. MS pyrkii versiossa 6.0 korjaamaan asian. Seuraavassa jaksossa on aiemmin tekemäni sivu, jossa käsittelen hieman vanhempia selaimia.

W3C: CSS validator[Pw].
Muita sivustoja: Webstandards [Pw]; Webreview[Pw]: CSS1 Master Compatibility Chart, CSS2 Selectors Support Chart; CSS Enhancements in Internet Explorer 6 Public Preview.

[Alku]