Etsi sivuiltani:

	Aihepiiriluettelo > CSS-oppaan etusivu > Oppaan lisäsivut > N Millaisia CSS-totetusvirheitä selaimissa on (introjakso)

N Millaisia CSS-totetusvirheitä selaimissa on

Aiheet

Tämä sivu on jaettu jaksoihin, jotka sisältävät seuraavia aiheita:

• Yleistä (introjakso)
• Selainkohtaisia seikkoja (jakso 1)
  • Microsoft Internet Explorer
  • Netscape Navigator
  • Opera
  • Muutamia demonstraatioita joistakin selainten puutteista
• Vanhimpien selainten CSS-virheitä (jakso 2)
  • Havaitsemani virheet
  • Netscape 4.04:n virheet
  • W3C:n virheellisiä testisivuja
  • MS IE:n virheet
  • Opera-selainten virheitä
  • Netscape 6.0:n virheitä
  • Virheiden ohituskeinoja

Yleistä

Selaimet tekevät virheitä ja niistä puuttuu ominaisuuksia. En tässä yhteydessä käy lävitse yksityiskohtaisesti selainten virheistä. Voit lukea myös toisen sivun, joka käsittelee selainten virheitä.

Olennaista on myös itse välttää virheitä. MS IE 4.x-5.5 Windows sallii melko paljon virheellisiä määreitä. Tämä on ongelmallista, sillä toiset selaimet eivät niitä samassa määrin salli. Ylipäätänsä tulevaisuuden selaimet sallivat aikaisempaa vähemmän virheitä. CSS-määrittelyt kannattaa tarkistuttaa W3C organisaation koodintarkastusohjelmalla (validator).

Vaikka kaikki uudet selaimet eivät juuri hyväksy virheitä jopa selaimet, joiden tulisi toimia tietyillä DTD:llä ns. standard(-compliant) -moodissa tiukasti spesifikaatioiden mukaisesti, hyväksyvät epäkelpoa/ selaimelle tuntematonta CSS:ää (jos ne eivät toimi standard(-compliant) -moodissa ne hyväksyvät enemmän virheitä). Näillä selaimilla on ns. "DTD-kytkin". Olen havainnut seuraavia virheitä epäkelvon tai tuntemattoman CSS:n hyväksymisessä:

• Netscape 6.2.1 hyväksyy #-abc {...} ja #-abc {...}.
• MS IE 6.0 Windows ei tue position:fixed, mutta se tunnistaa sen ja muuttaa arvon fixed arvoksi static. Jos selain ei tue jotain arvoa, sen tulisi käsitellä sitä ikään kuin laittomana arvona eikä asettaa tilalle oletusarvoa. MS IE 6.0 hylkää kuitenkin position:fixes, mikä osoittaa, että epäkelpojen arvojen hylkääminen osittain toimii.
• MS IE 6.0 Windows ei tue arvoa inherit, mutta se asettaa joissakin tilanteissa sen tilalle oletusarvon. MS IE saattaa vaihtaa myös kokonaan epäkelvon arvon oletusarvoon. Alla olevissa tapauksissa se vaihtaa kokonaan epäkelvon arvon inherits oletusarvoon none vaikka sen tulisi vain hylätä jälkimmäinen ominaisuus:

  MS IE 6.0 windows lukee sekä
  <div style="border: 3px solid green">ulompi<div style="border: 3px double blue; border-bottom-style:inherits;">sisempi</div>ulompi</div>
  että
  <div style="border: 3px solid green">ulompi<div style="border: 3px double blue; border-bottom-style:inherit;">sisempi</div>ulompi</div>
  ikään kuin
  <div style="border: 3px solid green">ulompi<div style="border: 3px double blue; border-bottom-style:none;">sisempi</div>ulompi</div>

Opera 7.x -selaimissa on MS IE:tä suppea-alaisempi kytkin ja vanhemmista kytkin puuttuu kokonaan. Siksi Opera-selainten täytyy tehdä joitakin kompromisseja, koska Web-suunnittelijoilla on pahoja tapoja suosia epäkelpoa CSS:ää erityisesti JavaScript-koodauksissa. Opera hyväksyy ainakin seuraavat virheet (mainitsen myös sen, voisiko Opera Software mielestäni muuttaa selaimen käytöstä):

• Opera 6.0 hyväksyy #-abc {...}. Opera Software voisi muuttaa tässä kohdin selaimen käytöstä.
• Opera 6.0 hyväksyy yksiköttömiä arvoja, esim. position:absolute; top:10; left: 10. Operan täytyy hyväksyä näitä koska ne ovat niin yleisiä. Jotta Opera voisi toimia edes joskus 100% CSS2-spesifikaation mukaan, selain tarvitsisi tässä kohdin DTD-kytkimen (toinen asia, jossa Opera tarvitsisi DTD-kytkintä on fonttikoot xx-small-xx-large; ks. Model8c.html).
• Opera 6.0 saattaa vaihtaa epäkelvon arvon oletusarvoon seuraavankaltaisissa tilanteissa: border:1p solid black. Opera hylkää kuitenkin border:some solid black, mikä osoittaa että lukuun ottamatta epäkelpojen yksiköiden vaihtamista oletusarvoihin, epäkelvon CSS:n hylkääminen toimii yleisesti ottaen sangen hyvin. Opera Software voisi muuttaa tässä kohdin selaimen käytöstä. Se voisi tarvita tälle asialle DTD-kytkimen.

tyylisivut ja niiden säännöt tulisi organisoida erittäin systemaattisesti. Itselläni on ollut ongelmia, koska sivuni eivät alunperin niitä käyttäneet. organisointi on vähän niin ja näin, mistä johtuu toisinaan seuraavia ongelmia.:

• Pienet kirjoitusvirheet ovat vaikea löytää ja niillä voi olla iso merkitys.
• Yksi muutos voi vaikuttaa moneen paikkaan - eikä aina tajua, mihin kaikkeen se vaikuttaa.
• Vaikuttavien arvojen löytyminen voi olla vaikeaa.

Vihje. Tee kaikista käyttämistäsi CSS-tiedostoista index.css, jolloin voit tarkistaa ne kaikki kerralla! Katso malliksi testi CSS-tiedostoni lähdekoodi tekstitiedostona.

Aiemmilla sivuilla olen tuonut esille toimivia ratkaisuja ja englanninkielisellä sivullani niitä on lisää: Illegal definitions and hints to avoid problems.

Löydät tarkemman tiedon selainten virheistä Webstandards organisaation sivuilta. He antavat mm. ns. "Top ten" -listan selainten virheistä. Erään dokumentaation selainten CSS1-toteutus virheistä löydät Webreview-firman sivuilta.

Sivun jaksot:

Seuraava jakso

Viimeinen jakso