:: CSS-opas: Oppaan lisäsivut: N Millaisia CSS-totetusvirheitä selaimissa on: Selainkohtaisia seikkoja (jakso 1/2) ::

	Aihepiiriluettelo > CSS-oppaan etusivu > Oppaan lisäsivut > N Millaisia CSS-totetusvirheitä selaimissa on > Selainkohtaisia seikkoja (jakso 1/2)

Sivun jaksot:

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).

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ä ). 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).

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 . 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):

UL LI: Tämän listaelementin pitäisi olla oranssin värinen (pallo.gif; ).
1. UL LI OL>LI: Tämän listaelementin pitäisi olla decimal eli numero 1. Mikäli se ei ole, selain ei tue first-child -valitsinta.
2. Toinen first-child -tason listaelementti - tässä pitäisi olla numero 2.
  - UL LI OL UL LI:first-child: Tämän listaelementin pitäisi olla upper-roman eli kirjain I. Valinta koskee vain listan ensimmäistä elementtiä, sillä mukana on :first-child näennäisluokkavalitsin. Mikäli kyseistä lisävalitsinta ei olisi, tässä pitäisi olla lower-alpha eli kirjain a yleisemmän säännön UL LI OL UL LI perusteella.
  - UL LI OL UL LI: Tämän listaelementin pitäisi olla lower-alpha eli kirjain b.
- UL LI OL+UL LI : Tämän listaelementin pitäisi olla punainen (pallo-punainen.gif; ). Mikäli se ei ole, selain ei tue täysin adjacent sibling -valitsinta (määrittelyn kommentti .
  - .CssSite UL LI UL LI LI: Tämän listaelementin pitäisi olla kuva smile.gif (). Mikäli se ei ole, selain ei ymmärrä luokka-tarkennettuja tunnistettavia hahmoja.
1. [class="test"]: Tämän listaelementin pitäisi olla kuva ok.gif (), koska on käytetty täsmällistä attribuuttivalitsinta. Mikäli se on jokin muu, selain ei ymmärrä attribuuttivalitsimia.
2. #test: Tämän listaelementin pitäisi olla kuva plane.gif (), koska on käytetty id-valitsinta (id selector), joka ohittaa kaikki tunnistettavat hahmot.
3. body [id="test2"] ja #test2: Myös tämän listaelementin pitäisi olla kuva plane.gif (), koska on id-valitsin ohittaa myös sellaiset attribuuttivalitsimiin perustuvat tunnistettavat hahmot, jotka viittaavat samaan kohtaan kuin id-valitsin. Tunnistettava hahmo antaisi tähän kohtaan kuvan ok.gif ().

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

.
Muita sivustoja: Webstandards

; Webreview

: CSS1 Master Compatibility Chart, CSS2 Selectors Support Chart; CSS Enhancements in Internet Explorer 6 Public Preview.

Sivun jaksot: