[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]
AihepiiriluetteloCSS-oppaan etusivuOppaan lisäsivut > O Millaisia CSS-totetusvirheitä on MS IE -selaimissa

O Millaisia CSS-totetusvirheitä on MS IE -selaimissa

Aiheet

Yleistä

Erittäin hyödyllinen sovellus MS IE -selainten CSS-tuen tutkimiseen on Bradsofttin TopStyle (Lite-versio on ilmainen), joka listaa kaikki MS IE -selaimissa toteutetut CSS-ominaisuudet ja niiden arvot. Tosi mikään testaamani versiot ei mainitse at-sääntöjä kuten esim. @font-face. Sovellus antaa paljon toteutuksiin liittyviä vihjeitä.

Bradsoft: TopStyle.

En käsittele MS IE 4.x Windows vanhempia MS IE -selaimia koska en voi asentaa tätä vanhempia versiota tietokoneeseeni. Windows 98 mukana tulee MS IE 4.x -selain (tarkka versionumero on 4.76). On aina olemassa ihmisiä, jotka eivät koskaan päivitä käyttäjärjestelmän mukana tulevia selaimia, minkä vuoksi sivujen tekijöiden on jollakin tasolla otettava huomioon vanhoja selaimia.

[Alku]

MS IE 4.x Windows

MS IE 4.x esittää tavanomaisen CSS:n suhteellisen hyviä ja siinä on useimmat MS IE 5.5 Windows -selaimessa esiin tulevat mokat (käsitten niitä edempänä). Selaimiin liittyy kuitenkin seuraavia huomionarvoisia erityisseikkoja:

  1. Selaimet eivät tue @media at-sääntöä, mutta media attribuutti on tuettu.
  2. Siinä on erittäin vakavia clear ja float ominaisuuksien toteutusvirheitä:
    • Selaimet toteuttavat float monesti niin, että ne sijoittavat kelluvat elementit omille riveilleen vaikka rivillä olisikin tilaa. Tästä seuraa turhia rivinvaihtoja.
    • Jos samalla rivillä on monia kelluvia elementtejä selain ei osaa jakaa niitä useille riveille.
    • clear aiheuttaa yksinäisiä kelluvia elementtejä vaikka selaimet voisivat periaatteessa pitää elementit samalla rivillä. Tästä aiheutuu ylimääräisiä rivivaihtoja.
    • Kelluvat elementit saattavat kasvattaa emoelementin korkeutta.
  3. Virheellisten tunniste (id) ja luokkavalitsimen hyväksyminen eroaa uudemmista versioista (katso malli[S]).
  4. Ei tue pseudoelementtejä :first-letter ja :first-line (koskee myös MS IE 5.0 Windows).
  5. Marginaalien kanssa käytettynä ominaisuus width toimii huonommin kuin uudemmissa versioissa.
  6. display:block ole tuettu muute kuin vastakohtana display:none. Jos luonnostaan rivinsisäiselementteinä käyttäyvät elementit määritellään lohkoiksi, ne käyttäyvät aina rivinsisäiselementteinä.

Koska MS IE 5.0 Mac ei tue @media at-sääntöä vaan se ohittaa kaiken CSS:n, mikä on medialohkojen sisällä lisäämällä tuntemattoman mediatyypin voi luoda jaksoja, jotka vain MS IE 4.x lukee (esim. a test element):

@media MSIE401 {#testMSIE401 {color:red !important; text-decoration:none !important}}/* Tämä on tuntematon mediatyyppi ja tarkoitettu MS IE 4.x Windows -selaimille. Huomaa, että Opera 4.x+ tukee mediatyyppiä projection, joten älä käytä tät mediatyyppiä tähän tarkoitukseen. Jos tyylisivu käytää esimerkiksi mediatyypiä screen ja siihen lisätään mediatyyppi tty saadaan sama lopputulos. */
[Alku]

MS IE 5.5 Windows

Mokia ja puuttuvia piirteitä

Havaitsin MS IE 5.5:ssä seuraavia positiivisia seikkoja:

MS IE:ssä on vakavia CSS1 toteutusvirheitä. BODY ja HTML määriteltyjen reunusten toteutus on virheellinen. Lohkoelementeille määriteltyjen dimensioiden laskeminen on vakasti virhellinen. Käsittelen näitä mokia sivulla Miten CSS annetaan elementtien taustoille ja reunoille[S]).

Myös float ja clear ominaisuudet toimivat virheellisesti (koskee myös MS IE 6.0 Windows; MS IE 4.x for Windows on enemmän virheitä). Jos ominaisuutta clear on käytetty, MS IE saattaa muuttaa sisällössä edempänä olevat kelluvat elementit aiempien kelluvien elementtien yläpuolelle. Arvoilla left ja right ominaisuus float pitäisi siirtää elementti mahdollisimman ylös (kuitenkin niin, etteivät kelluvat elementit mene aiempien kelluvien elementtien yläpuolelle), mutta MS IE siirtää elementit usein hieman alaspäin. MS IE saattaa kopioida/siirtää osan kelluvan elementin sisältöä elementin ulkopuolelle. Mokista huolimatta ominaisuus float on käyttökelpoiinen. Seuraava kuvakaappaus osoittaa clear ja float ominaisuuksiin liittyviä ongelmia:

CSS1-toteus oli pettymys, sillä oletin että MS IE 5.5 olisi selvinnyt W3C:n CSS1 Test Suite yhtä hyvin kuin Opera 4.x ja Netscape 6.0, jotka selvisivät testistä melkein virheettömästi (ainakin selkeästi paremmin kuin MS IE 5.5). MS IE 5.5 ei näyttänyt ainakaan seuraavia testisivuja virheettömästi:

W3C: CSS1 Test Suite.

MS IE 5.5 pitäisi hylätä virheellinen CSS, mutta se hyväksyy seuraavan virheellisen CSS:n:

  1. Hyväksyy virheellisiä ominaisuuksien arvoja:
    • MS IE esittää esim. seuraavan elementin ikään kuin sen reunukselle olisi määritelty arvo 1px (style="border: 1p solid #636"):
      reunustettu rivinsisäiselementti.
      CSS2.n perusteella sen tulisi hylätä virheellinen arvo 1p ja näyttää reunat oletusarvon perusteella eli MS IE:n pitäisi esittää reunat seuraavasti (border: medium solid #636):
      reunustettu rivinsisäiselementti.
    • Se hyväksyy virheellisiä fonttikokoja, esim. {font-size:15} ja näyttää ilman arvoja annetun fonttikoo ikään kuin fonttikoko olisi annettu pikseleinä ({font-size:15px}). Look at an example[S][Pw].
  2. Se hyväksyy heksadesimaalisia väriarvoja ilman että arvo alkavat merkillä #.
  3. Se hyväksyy @import at-säännön, vaikka sääntö ei olisi tyylisivun alussa.
  4. Se hyväksyy virheellisiä id ja class attribuuttien nimiä.
  5. Tuleviin versioihin liittyvä yhteensopivuus (forward compatible parsing) ei toimi.

Huomautus. On todella huono asia, että MS IE 5.5 hyväksyy paljon virheellistä CSS:ää, sillä Netscape- ja Opera-selaimet eivät hyväksy yhtä paljon virheellisiä määrityksiä. Sivujen tekijä saattaa luoda CSS:ää, joka toimii vain MS IE -selaimissa. Itse asiassa olisi toivottavaaa, jos selaimet voisivat tarkistaa CSS:n ja huomauttaa koodausvirheistä. Tämä olisi paljon parempi ratkaisu kuin virheellisen CSS:n hyväksyminen (virheellisen CSS:n hyväksymisestä seuraa ongelmia myös tuleviin versioihin liittyvien yhteensopivuusseikkojen kanssa).

Myös MS IE 5.5:n CSS2-toteutus oli pettymys. MS IE 5.5 ei ole todellinen XML + CSS selain, sillä se ei tue eräitä tärkeitä piirteitä (käsittelen niitä myös sivulla Miten XML-dokumenttien kanssa voi käyttää CSS:ää[S].

CSS2-toteutuksesta puuttuu ainakin seuraavat piirteet:

Lisäksi huomautan, että MS IE 5.5 tukee ominaisuutta overflow sangen hyvin, mutta overflow:auto tulisi luoda vierityspalkit vain kun se on ehdottoman välttämätöntä. Moka on kuitenkin sangen pieni.

Yleisesti ottaen MS IE 5.5:ssä on suhteellisen keskinkertainen, ei missään nimessä hyvä CSS-tuki.

Epästandardi CSS

Microsoftin tuotesuunnittelun ikävä piirre on ollut se, että firma on keskittynyt epästandardien ratkaisujan luomiseen sen sijaan että olisi tehnyt kunnollisen olemassa olevien standardien toteutukset. Käsittelen epästandardia CSS:ää erillisellä sivulla[S]. Alla on linkki eräälle Web-sivulle, jossa kommentoidaan tätä asiaa.

Webreference, Webstandars.
[Alku]

MS IE 6.0+ Windows

MS IE 6.0:ssa ei ole paljon uusia CSS-toteutuksia. Koskien CSS2:een mutta ei CSS1:n liittyviä piirteitä Microsoft ilmoittaa, että vain min-height tuki taulukkoelementeille on lisätty (ominaisuus ei toimi tavanomaisilla lohkoilla). Yleisesti ottaen MS IE 6.0:sta puuttuu samat CSS2-piirteet kuin MS IE 5.5:täkin. Sen sijaan Microsoft on tosissaan yrittänyt toteuttaa CSS1:n kokonaan ja saada olemassa olevan CSS2-toteutuksen vastaamaan CSS2-spesifikaatiota.

Microsoft on onnistus tässä sangen hyvin. Muutamista mokista huolimatta MS on todella yrittänyt luoda standardin mukaisen CSS-toteutuksen kun standard-compliant -moodi on käytössä niin sanotun DTD-kytkimen avulla[S]. CSS2-spesifikaation toteutusyritykset koskevat pääosin tilanteita, joissa selain toimii standard-compliant -moodin mukaisessa. Standard-compliant -moodissa MS IE 6.0 tukee tulevia ehdotelmia mutta ei epästandardeja laajennuksia.

DTD-kytkin luo myös ongelmia, sillä MS IE 6.0 Windows saattaa näyttää sivut melko eri lailla kuin MS IE 5.5 Windows. Asiat, joita käsittelen sivulla 8[S] ja jotka koskevat dimensio-ongelmia on syytä ottaa huomioon. Seuraamalla ohjeitani on mahdollista, MS IE 5.5 Windows, MS IE 6.0 Windows, MS IE 5.0 Mac and uudet Opera and Netscape/Mozilla Gecko -selaimet näyttävät sivut suunnilleen samoin tavoin kaikkia dokumenttityyppejä käytettäessä.

Selain tekee myös standard-compliant -moodissa maininnan arvoisi virheitä. Melkein kaikki CSS1-tason mokat/puuttuvat piirteet on korjattu/lisätty. Alla on lyhyt CSS1-spesifikaatioon liittyvä lista:

Huomautus. Koska MS IE 5.5 toteuttaa virheellisesti height ja width tavanomaisille rivinsisäiselementeille (esim. STRONG), MS IE 6.0 tukee CSS3:een kuuluvaa näyttötyyppiä display:inline-block. Jos selain toimii standard-compliant -moodissa[S] tämä CSS täytyy antaa jotta tavallisille rivinsisäiselementeille saa. Viittaa ominaisuuteen mikä merkitys on web-standardeillalla, joka käsittelee CSS2-spesifikaation ongelmia[S].

W3C: CSS1 Test Suite.
Microsoft: CSS Enhancements in Internet Explorer 6 Public Preview.
[Alku]

MS IE 5.0+ Mac

MS IE 5.0 for Mac eroaa monessa suhteessa MS IE 5.5 ja MS IE 6.0 Windows -selaimista. MS IE 5.0 Mac -selaimessa on DTD-kytkin[S] kuten MS IE 6.0 Windows -selaimessa. MS IE 5.0 Mac saattaa siten näyttää sivut niin, että lopputulos on joko lähempänä MS IE 5.5 Windows tai uusia Opera ja Netscape/ Mozilla Gecko -selaimia.

Yleisesti ottaen siinä on parempi CSS2-toteutus kuin MS IE 5.5 Windows -selaimessa. Sitä tulee siksi verrata pikemminkin MS IE 6.0 Windows kuin MS IE 5.5 Windows -selaimeen. MS IE 5.0 Mac eroaa MS IE 6.0 -selaimesta ainakin seuraavissa kohdissa:

[Alku]

Ohitukset

On tilanteita, joissa jokin yhteinen CSS-tiedosto ei sovi kaikille MS IE versioille. Selainten erilainen @media tuki antaa mahdollisuuden ohittaa jokin selain. Jos sama ohitus tarvitaan sekä MS IE 4.x Windows että MS IE 5.0 Mac -selaimille, sama CSS täytyy antaa useaan kertaan.

Ominaisuuksien antaminen tuntematonta mediatyyppiä käyttäen voidaan antaa yksilöllinen CSS MS IE 4.x -selaimille:

/* MS IE 5.0 Mac ei lue mitään medialohkon sisällä olevaa sääntöä, mutta MS IE 5.+ Windows hylkää vain tuntemattomat mediatyypit. */
@media tty {
foo {} /* MS IE 4.x Windows ohittaa tämän säännön ja lukee vain tätä sääntöä seuraaat säännöt. */
#IE4 {...}
}

Tämä soveltuu myös uudemmille selaimille kuin MS IE 5.0 Mac sillä Microsoft on lopettanut Mac-selainten kehittämisen. Järkevin tapa räätälöidä CSS erilaisille MS IE versioille on tehdä yksi iso yhteinen CSS-tiedosto, joka soveltuu ainakin jollakin tasolla kaikille selaimille (katso mallilähdekoodikatkelma[S]). Jos on tarpeen jotkin versiot saavat omat CSS-tiedostot, joissa on selainkohtaisia muutoksia.

Ohitukset voi hoitaa myös selainkohtaisilla kommenteilla, jotka muut selaimet tulkitsevat tavallisina kommentteina ja siksi ne toimivat MS IE 5.x+ -selaimissa, esim:


<!--[if IE 5]>
...
<![endif]-->
Msdn: About Conditional Comments.

Huomautus. Jos tarkoituksena on antaa Opera 4.x+ -selaimille kokokuvaruutumoodissa sama CSS kuin uusille MS IE -selaimille, on syytä noudatta ohjeita, joita annan Operaa[S] käsittelevällä sivulla. On myös syytä ottaa huomioon ohjeet, joita annan käsitellessäni dynaamisia valikoita[S].

[Alku]
   
Copyright Tapio Markula 1999-2003, Salo (kotisivu, s-posti - lisää s-postiosoiteeseen pisteellä erotettuna nimeni, Tapio Markula) (@dnainternet.net) - ei julkiskäyttöön ilman sopimusta.
Get Expression!
Editori, jolla saa luotua standardit täyttäviä HTML ja XML dokumentteja. Tämän sivuston sivut on useimmissa tapauksissa tarkastettu Dave Raggetin (W3C) tekemällä HTML-Tidy apuohjelmalla ja satunnaisesti W3C-organisaation virallisella koodintarkastusohjelmalla. Useimpien sivujen syntaksin pitäisi olla sopusoinnussa W3C:n XHTML 1.0 spesifikaation kanssa. Testaa tämä sivu!
Informaatiota selaimista, jotka näyttävät tai tulostavat tämän sivuston parhaiten.
[Hae Opera] [Hae Mozilla!]
CSS-opasta on viimeksi muutettu 20.12.2004