Etsi sivuiltani:

	Aihepiiriluettelo > CSS-oppaan etusivu > Oppaan lisäsivut > O Millaisia CSS-totetusvirheitä on MS IE -selaimissa

O Millaisia CSS-totetusvirheitä on MS IE -selaimissa

Aiheet

• Yleistä
• MS IE 4.x Windows
• MS IE 5.5 Windows
  • Mokia ja puuttuvia piirteitä
  • Epästandardi CSS
• MS IE 6.0+ Windows
• MS IE 5.0+ Mac
• Ohitukset

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

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.

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

MS IE 5.5 Windows

Mokia ja puuttuvia piirteitä

Havaitsin MS IE 5.5:ssä seuraavia positiivisia seikkoja:

• Table-layout:fixed toimii hienosti. Se vähentää merkittävästi viiveaikaa ennen kuin mitään näkyy näytöllä.
• Selain tukee :first-letter ja :first-line näennäisluokkia.
• Rivinsisäiselementeille määriteltyihin reunuksiin liittyvät mokat on melkein korjattu. Sanoilla "Rivinsisäiselementeille määriteltyihin reunuksiin" on nätit reunukset. Tosin ominaisuus height aiheuttaa virhekäyttäytymisen kuten tapahtui vanhemmillakin versioilla (esimerkki).

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

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:

• Clear ja Opera 5.12 (Netscape 6.2 näyttää samalla tavalla).
• Clear and MS IE 6.0 (Mozilla 0.9 (Netscape 6.1 level) renders at the same way).
• Ominaisuuden float virhetoteutus MS IE 6.0:ssa.

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:

• Selain hyväksyy virheellistä CSS:ää. Listaan nämä virheet toisessa listassa (kohdat 2-5) ja virheet koskevat seuraavia sivuja sec11, sec14, sec15 and sec71.
• Jotkut marginaali-, täyte- ja asemointiominaisuudet eivät toimi oikein: sec412, sec43, sec44.
• Jotkut elementille HTML annetut ominaisuudet eivät toimi: sec45.
• Arvo small-caps ei toimi oikein: sec524.
• Sanavälistys ei toimi: sec541.
• Osittainen display:list-item toteutus (lohkolaatikko on ok, mutta mutta neliön muotoinen listamerkki puuttuu): sec561.
• Osittainen white-space toteutus (white-space:pre ei toimi): sec562.

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

CSS2-toteutuksesta puuttuu ainakin seuraavat piirteet:

• Monet display ominaisuuden arvot (run-in | compact | marker | table | inline-table | table-row-group | table-row | table-column-group | table-column | table-cell | table-caption). Kaikki CSS1-tason arvot on toteutettu ainakin joten kuten, mutta ei ole mahdollista luoda XML-dokumenteille HTML 4.x:n taulukkorakennetta CSS:n avulla koska puuttuu joidenkin olennaisten display ominaisuuden arvojen tuki. Tämä on erityisen haitallista siksi, että Opera 4.x+ ja Netscape 6.x+ -selaimet antavat mahdollisuuden luoda XML-dokumenteille taulukkorakenteen CSS:n avulla - katso esimerkki. Opera 5.x tukee ainakin display-ominaisuuden arvoja: inline | block | list-item | run-in | compact | table | inline-table | table-row | table-cell | table-caption | none.
• Muutamat CSS2:n taulukkomalliin (CSS2 table model) liittyvät ominaisuudet ja niihin liittyvät arvot (caption-side, empty-cell, visibility:collapse). Puuttuvat piirteet eivät ole kovin olennaisia.
• Jotkut sivutettuun mediaan (paged media) liittyvät ominaisuudet ja niihin liittyvät arvot (page, size, marks) ja yksittäiset arvot (esim. avoid). Puuttuvat piirteet eivät ole peruspiirteitä.
• Max-height, min-height, max-width ja min-width. Nämä ominaisuudet tekisivät mahdolliseksi määritellä joustavat leveys- ja korkeusarvot. On todella huono asia, että MS IE ei tue näitä ominaisuuksia, sillä ominaisuuksien tuki tekisi mahdolliseksi hyvin yksinkertaiset sivurakenteet. Tosin MS IE -selaimille on mahdollista luoda JavaScript-koodauksella toiminnallisuus, joka muistuttaa max-width ominaisuutta (käsittelen tätä asiaa eräällä toisella lisäsivu).
• position:fixed.
• Erillisten taulukkosolujen malli (separate borders model) toimii vain osittain (esim. border-collapse: separate; border-spacing: 15pt; ei toimi).
• caption-side.
• Attribuuttivalitsimien tuki puuttuu kokonaan (esim. a[target="_top"] {background-color:#ffc} ei toimi).
• Selaimessa on vain CSS1-tason hahmontunnistus ja siitä puuttuu kaikki CSS2-tason (esim.Netscape 6.x+ -selaimissa on kunnon hahmontunnistustuki ja ne lukevat kaiken CSS:n jota olen laittanut virhetestisivulle. It has a special test for pattern matching).

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. Alla on linkki eräälle Web-sivulle, jossa kommentoidaan tätä asiaa.

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

• CSS1-toteutus on melkein täydellinen, koska seuraavat ominaisuudet/ominaisuuksien arvo, jotka eivät toimineet/toimivat bugisesti MS IE 5.5 -selaimessa toimivat nyt W3C's CSS1 Test Suite -testisarjassa: margin, padding, font-variant:small-caps, word-spacing, display:list-item ja white-space:pre.
• Ominaisuudet float ja clear toimivat samalla lailla virheellisesti kuin MS IE 5.5 -selaimessa (W3C:n testi ei paljasta kaikkia virheitä).
• Ominaisuus width ei toimi aina oikein. body {width:100%} aiheuttaa toisinaan turhia vaakavierityspalkkeja. Ominaisuus ei toimi oikein taulukoissa.
• Jos selain toimiin standard-compliant -moodissa ei hyväksy useimpia CSS-syntaksivirheitä, joita MS IE 5.5 hyväksyy. MS IE 6.0 hylkää standard-compliant -moodissa toisinaan virheellisesti koko kuvauksen, kun vain osa siitä on virheellistä, esim. border:1p solid black (1p on virheellinen ominaisuuden arvo). Mutta toisinaan se korvaa tuntemattoman arvo ominaisuuden oletusarvolla. Esim. tilanteessa border:3px solid double; border-bottom-style:inherit selaimen pitäisi ohittaa sille tuntematon arvo border-bottom-style:inherit eikä korvata inherit oletusarvolla none. MS IE 6.0.n käytös on tässä suhteessa.

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 tämä CSS täytyy antaa jotta tavallisille rivinsisäiselementeille saa. Viittaa ominaisuuteen mikä merkitys on web-standardeillalla, joka käsittelee CSS2-spesifikaation ongelmia.

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

• Se ei tue @media. Mediatyypit täytyy antaa media-attribuutin avulla.
• Se ei tue sivutettua mediaa.
• MS IE Mac tukee position:fixed, jota käsittelen sivulla 11.
• DTD-kytkin vaikuttaa ominaisuuteen width myös taulukoissa.
• DTD-kytkin ei vaikuta fonttikokoihin xx-small-xx-large. MS IE Mac näyttää eri ne lailla (katso mallisivu).

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

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