Standarditila ja yhteensopivuustila

Internet, lauantaina 4.9.2004,

Käytän tässä kirjoituksessa termejä standarditila ja yhteensopivuustila englanninkielisten termien standards compliance mode ja quirks mode asemesta. Jos joku tietää paremmat suomenkieliset vastineet, niin älkööt turhaan pantatko tietoa.

Viime aikoina selainten nettisivujen tulkintatapa on ollut usein esillä, ainakin tässä blogissa. Standarditilan ja yhteensopivuustilan välinen ero jäi vaivaamaan minua Nytin sivuista kirjoittamani raapustuksen jälkeen. Asiaa pohdittuani ja nettiä koluttuani olen nyt hiukan viisaampi.

Tulkitsemistilojen yhteydessä muistetaan lähes aina tuoda esille se fakta, että Internet Explorer 6 suistuu heti yhteensopivuustilaan, jos sivun XML-prologissa on yhtään mitään tavaraa. Pelkkä tyhjä merkki tai rivinvaihtokin riittää. Jos nettisivujen suunnittelija haluaa käyttää oikeellista XHTML:ää olisi hänen hyvä käyttää myös XML-julistusta (XML declaration). Erään Internet Explorerin ominaisuuden takia näin ei kuitenkaan voi — tai ainakaan kannata — tehdä. IE:n standardinäkökulmasta katsoen nettisivun täytyy alkaa aina dokumentin tyyppimäärityksellä. Huhut kertovat, että myös Opera 7.02:ssa olisi samanlainen ominaisuus. Ainakaan versiossa 7.20 sitä ei enää ole.

Valtavirran selaimet — IE, Mozilla ja Opera — tulkitsevat standarditilan ja yhteensopivuustilan välistä eroa kaikki hieman eri tavalla. Selviä yhtäläisyyksiä toki löytyy, mutta niihin ei kannata luottaa. Helpommalla pääsee, kun suunnittelee sivut näytettäväksi standarditilassa. Elementtien ja tyylien käyttäytyminen on tällöin selvästi ennustettavampaa.

Kyvykkäät ihmiset jo tietävät, että Mozillassa selaimen tulkitseman tilan voi tarkistaa helposti valikoiden kautta: View › Page Info. IE:ssä ei tällaista ominaisuutta ole, mutta tällöin apuun säntääkin javascript. Seuraavan koodiesimerkin voi tallentaa esimerkiksi kirjanmerkkeihin ja tämän jälkeen tarkistella vastaantulevien sivujen tulkitsemistilaa. Varoituksen sana on paikallaan: siihen kehkeytyy himo.

if(document.compatMode == "CSS1Compat") alert("Standarditila"); else { alert("Yhteensopivuustila"); }

Javascript-koodi toimii myös Mozillassa ja Operassa, joskaan Mozillassa sitä ei tarvitse kuin osana muuta skriptausta. Komento document.compatMode palauttaa joko merkkijonon CSS1Compat, jos sivua tulkitaan standarditilassa tai BackCompat, jos sivua tulkitaan yhteensopivuustilassa. Skriptiä voi tietenkin mukauttaa omiin tarkoituksiin.

Sivun tulkitsemistilaa voi myös tutkailla käyttämällä jotain CSS-tyyliä, jonka toimiminen eroaa eri tiloissa. Klassinen esimerkki on jättää värien koodeista risuaita pois. Määre color: ff0000 toimii yhteensopivuustilassa ja color: #ff0000 taas standarditilassa (ja myös yhteensopivuustilassa). Jos ei ole ihan varma oman sivun tulkitsemistilasta, voi laittaa sivulle vaikka vale-elementin:

<span style="color: ff0000;">Tuleeko punaisella?</span>

Jos tekstin väri on punainen, tulkitaan sivua yhteensopivuustilassa. Tämä toteutus sai minut pohtimaan toiminnon toteutusta dynaamisessa yhteydessä. Jos sivulle luodaan elementtejä DOM:a käyttäen, totteleeko selain tällöinkin standardi- ja yhteensopivuustilaa? Asian testaamiseksi tein lyhyen skriptin, joka yksinkertaisesti luo sivulle kaksi uutta elementtiä ja määrittää niille värin risuaidalla ja ilman:

function luo_elementti(std) { var elementti = document.createElement("div"); var teksti = document.createTextNode("jotain tekstia"); elementti.insertBefore(teksti, null); if(std == 1) { elementti.style.color = "#0000ff"; } else { elementti.style.color = "0000ff"; } elementti.style.backgroundColor = "#eee"; elementti.style.position = "relative"; elementti.style.width = "100px"; elementti.style.font = "1em sans-serif"; elementti.style.border = "1px solid black"; document.body.insertBefore(elementti, null); }

Demonstraatiosivun olen tehnyt standarditilasta sekä yhteensopivuustilasta. Ero on siinä, että standardisivulla on doctype ja yhteensopivuussivulla ei.

Tulokset ovat tässä: Internet Explorer 6 ja Opera 7.20 värittävät luodun div:n tekstin sinisellä riippumatta käytetäänkö määrittelyssä risuaitaa vai ei (vahvennetut rivit). Mozilla 1.8 värittää tekstin vain risuaidan kanssa. En saanut Daniel Vinen iCapture-palvelua toimimaan, joten Safari on vielä arvoitus.

Tässä vaiheessa täytyy tunnustaa, etten tiedä mitä spesifikaatio sanoo skriptitoteutuksesta ?.style.color. Tästä johtuen myös Operan ja IE:n tapa voi olla määrittelyjen mukaista, vaikka ne ensialkuun tuntuisivatkin viallisilta. Mozillan tulkinta taas viittaisi vain yhteen oikeaan tapaan. Epäselvässä tilanteessa todetaan: In Mozilla we trust.

Lopuksi Henri Sivosen kirjoittama artikkeli Activating the Right Layout Mode Using the Doctype Declaration, jossa on listattu taulukkoon milloin millä dokumentin tyyppimäärityksellä mikä selain käyttää mitä tilaa. Oliko tarpeeksi epäselvästi sanottu?

Marjut ehdottaa, että seitsemän linkkiä per kirjoitus olisi passeli määrä. Tässä on 21 eli metsään mennään.