[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]

DTD-kytkimet

Eräällä tavalla selainkohtaisia piirteitä ovat myös ne, joissa spesifikaatioihin kuuluvien ominaisuuksien toteutukset ovat tahallaan spesifikaatioista poikkeavia. Uudet MS IE- ja Netscape/Mozilla- ja Opera-selaimet käyttävät DTD-kytkimiä, jolloin ilman DTD:tä tai tietyillä DTD:llä uudet selaimet toimivat eräissä suhteissa kuten vanhemmat, virheellisemmin toimivat selaimet. Uudemmat selaimet toteuttavat ylipäätänsä paremmin olemassa olevia CSS ja (X)HTML spesifikaatioita ja ne on suunniteltu toimimaan tarkemmin CSS ja (X)HTML spesifikaatioiden mukaan tietyssä moodissa.

Netscape/Mozilla-selaimessa tarkempaa moodia kutsutaan nimellä strict mode/ standard-compliant mode. Sen vastakohtana on quirks mode.

Microsoft kutsuu parempaa moodia nimellä standard-compliant mode, jolloin toinen moodin on vain se moodi, joka on toiminnassa, mikäli standard-compliant -moodia ei ole kytketty päälle. "Kytkinmekanismi" on MS IE 6.0 Windows, MS IE 5.0 Mac, Nescape 6.x/ vastaavissa Mozilla -selaimissa ja Opera 7.x -selaimissa.

Opera 7.5x ja uudemmat Netscape/Mozilla-selaimilla on itse asiassa vielä kolmaskin moodi melkein standandimoodi (the Almost Standards mode).

Activating the Right Layout Mode Using the Doctype Declaration.

Kytkimen ehkä merkittävin liittyy width ja height ominaisuuksien laskemiseen MS IE -selaimissa. Windows-versioissa se ei vaikuta taulukoiden leveyden määrittelyyn. MS IE 5.0 Mac DTD-kytkin vaikuttaa myös elementin TABLE width-attribuuttiin. MS IE 5.0 Mac käsittelee standard-compiliant -moodissa em. attribuuttia samaan tapaa kuin vastaavaa ominaisuutta, mikä on HTML:n kannalta virhe (käsittelen tätä asiaa sivulla myös sivulla 10[S]). Mozilla Gecko ja Opera 7.5x kohdalla taulukoiden width-ominaisuuden laskennassa standardimoodi ja melkein standardimoodi eroavat toisistaan.

Kytkin vaikuttaa MS IE:llä myös selainkohtaiseen CSS:ään. MS IE ei esim. hyväksy standard-compliant -moodissa värillisiä vierityspalkkeja. Tästä syystä sivuilla, jotka ovat IFRAME sisällä on DTD-määritys, joka ei kytke standard-compliant -moodia päälle. Muut sivut toimivat uusissa MS IE ja Netscape/Mozilla-selaimissa strict/ standard-compliant -moodin mukaisesti.

Olen havainnut muutia eroavuuksia ja olen lukenut niistä Web-sivuilta. Huomasin, että Nescape/ Mozilla määrittelee epästandardin käytöksen quirk.css avulla ja osa informaatiosta perustuu tähän UA-selaimen (UA) CSS-tiedostoon (näin aiheutettuja ero ei yleensä tarvitse testata). Olen saanut myös joitakin s-posteja. Alla oleva taulukko ei ole täydellinen, mutta se mainitsee joitakin mahdollisia eroja (mutta koska en ole henkilökohtaisesti testannut kaikkia asioita, siinä voi olla virheitä eikä taulukko erottele standardimoodia melkeinstandardimoodista):

MS IE 6.0 Windows MS IE 5.0 Mac Netscape 6.2.1Opera 7.x
Ensimmäisten BODY ja TD elementtien ylämarginaali on erilainen (elementin TD suhteen myös viimeisen elementin alamarginaalit ovat erilaisia), jos CSS:ää ei ole käytetty. Kyllä (UA CSS)
width ja height ominaisuudet yleisille lohkoelementeille. Kyllä Kyllä
Ominaisuus width TABLE elementille. Kyllä (Ehkä)
Ominaisuus width TD ja TH elementeille yhdessä table-layout:fixed kanssa. Kyllä Kyllä
Määrittelyn display:inline-block tarve tavanomaisille rivinsisäiselemnteille yhdessä ominaisuuksien width ja height kanssa. Kyllä
CSS:n määrittäminen elementille HR. Kyllä (UA CSS)
Erilainen fonttikokojen hallinta otsikkoelementtien (H1 jne.) sisällä. Kyllä (epäst. UA CSS)
Elementin PRE erilainen rivitys. Kyllä (epäst. UA CSS)
Listaelementtien oletusesitysasu on erilainen. Kyllä (UA CSS)
Erilainen näyttötyyppi (display type) MAP-elementille. Kyllä (UA CSS)
Elementille IMG erilainen marginaali, jos kuvalla on align="left" tai align:right attribuutti. Yes (UA CSS)
Erilainen prosenttiarvoisten korkeuksien käsittely taulukoissa ja kuvissa. Kyllä
Erilaisesti käyttäytyvät taustaominaisuudet taulukkoelementeille. Kyllä (UA CSS)
Useimmat tekstiin liittyvät ominaisuudet eivät periydy/periytyvät TABLE ja CAPTION elementeillä (font-size, font-weight, font-style, font-variant ja elementille TABLEtaulukoille text-align). Kyllä (ositt. epäst. UA CSS)
Jos taulukoilla on reunustyylit inset tai outset, reunusväri perustuu joko taulukon tai sellaisen "esi-isäelementin" (anchestor) taustaväriin, jolla muu kuin läpinäkyvä väri. Kyllä (tarvitsee testejä)
Ominaisuus empty-cells oletusarvoisesti piilottaa/ näyttää tyhjät solut. Kyllä (UA CSS)
Reunuksellisen taulukkosolun reunuksen minimileveys on yksi pikseli. Kyllä (tarvitsee testejä)
Perustaulukkolaadinta hyväksyy/hylkää ominaisuuden padding. Kyllä (tarvitsee testejä)
Kelluvat taulukot eivät koskaan siirry/siirtyvät seuraavalle riville, jos ne eivät mahdu toisten kelluvien elementtien kanssa samalle riville (jos ne eivät siiryy toiselle riville, ne kasvattavat sivun leveyttä). Kyllä (tarvitsee testejä)
Hieman erilainen oletusesitysasu INPUT elementeille. Kyllä (UA CSS)
Selaimet esittävät font-size:xx-small - font-size:xx-large eri lailla (katso Model8c.html[S]). Kyllä Kyllä
CSS-parseri hyväksyy epäkelpoja id- ja luokkavalitsinten nimiä. Kyllä
CSS-parseri lukee @import vaikka se ei ole tyylisivun alussa. Kyllä
CSS-parseri hyväksyy värin heksadesimaalivärejä, jotka eivät ala merkillä #. Kyllä Kyllä
CSS-parseri tulkitsee yksiköttömän numeron ikään kuin px (Netscape-selaimia koskien tämä ei koske ominaisuutta font-size koska Netscape 4.x toimi spesifikaation mukaan; yleisesti ottaen se ei koske line-height ominaisuutta eikä tilanteita, joissa numeroarvoilla on toinen merkitys). Kyllä (mutta virheellisesti korjattu) Kyllä
Selainkohtaisen CSS:n hyväksyminen. Kyllä

Huomautukset:

  1. Mozilla Gecko -selaimissa on myös joitakin HTML-elementtejä ja -attribuutteja koskevia asioita, joihin ei voi CSS:llä vaikuttaa. Olen pyrkinyt listaamaan sellaiset oletusmääritykset, jotka CSS:llä saa samaksi (yleensä se onnistuu standardilla CSS:llä, mutta joissakin tapauksissa voidaan tarvita epästandardia CSS:ää, jota Netscape/Mozilla-selaimet hyödyntävät runsaasti; selaimen CSS-tiedostoissa; Netscape/Mozillassa on periaatteessa mahdollista muuttaa epästandardilla CSS:llä standardin mukainen käytös epästandardiksi).
  2. Mozilla org. sivuilla David Baronin mukaan perustaulukkolaadinta käsittelee leveyksiä moodista riippuen jollakin tavoin erilaisesti. Koska en itse havainnut eroja, laitoin tämän asian sulkeisiin. Periaatteessa Netscape/Mozilla ja MS IE 6.0 -selaimilla pitäisi olla elementille TABLE annetulla width ominaisuuden kanssa erilainen käytös standardiin pyrkivässä moodissa toimittaessa.
  3. David sanoo myös sen, että Mozilla-selaimet käsittelevät hieman erilaisesti xx-small-xx-small arvoja. En huomannut mitään eroa font-size:xx-small - font-size:xx-large käsittelyssä. En siksi maininnut tätä kohtaa. Vaikutus voi olla eri selainversiossa erilainen ja Netscape 6.2.1:ssa ei ole juuri tätä eroa.
  4. Davidin mukaan Netscape/Mozilla-selainten käytöstä tiettyjen lomakekontrollielementtien kanssa voi muuttaa myös JavaScript-koodauksella, mutta olen pyrkinyt listaamaan vain piirteet, joihin pelkkä DTD:n muuttaminen riittää.
  5. Olen maininnut joitakin yksityiskohtia sivulla, joka käsittelee MS IE:n ongelmia[S].
  6. Kytkeytymiskohta standardien mukaiseen moodiin on erilainen MS IE ja Netscape/Mozilla-selaimissa. Netscape/Mozilla-selaimissa strict mode alkaa HTML 4.0 Strict or HTML 4.01 Transitional dokumenttityypeistä. MS IE kohdalla standard-compliant mode alkaa HTML 4.0 Transitional dokumenttityypistä, jos URL ("http://www.w3.org/TR/REC-html40/loose.dtd") on annettu. Jos URL ei ole annettu, standard-compliant -moodi alkaa HTML 4.0 Strict dokumenttityypstä.
  7. DTD-ilmoituksen täytyy olla aivan sivun alussa ilman, että mitään on sitä ennen. Minulla oli joillakin CSS-sivun sivuilla sitä ennen kommentti, jolloin MS IE ymmärsi XHTML 1.0 Transitional dokumentin siten, että standard-compliant -moodi oli pois päältä.
Microsoft: CSS Enhancements in Internet Explorer 6 Public Preview; Mozilla org.: Mozilla Quirks Mode Behavior.

[Alku]