Vådan av att välja Doctype

| 4 Comments
Liten tuva stjälper ofta stort lass heter det ju - men hur mycket elände kan en liten tuva i form av en felaktigt vald Doctype-deklaration egentligen ställa till?

Varför finns det flera Doctypes att välja mellan egentligen?

När man gjorde HTML4 (som fastställdes i december 1997) hade man dubbla ambitioner från W3C. Dels ville man ha en standard som innehöll i princip alla taggar som fungerade bra i dåtidens webbläsare, och dels ville man "styra upp" HTML i den riktning man själva ville ta webben.

Man införde mekanismer som uppmuntrar separation av struktur (HTML), beteende (Scripts) och utseende (CSS), samt började "bannlysa" taggar som t.ex. möjliggjorde direkt påverkande av webbläsarens beteende (läs: t.ex. frames, "a target" osv)

Resultatet (kompromissen (?) - min tolkning) blev att man tillhandahöll tre olika "smaker" av HTML.

  • Strict" - som såg ut som W3C egentligen ville och t.ex. uteslöt <iframe> m.fl, tvingade fok att använda blocktaggar om de ville ha innehåll liggande i t.ex.body eller form osv. osv.
  • "Transitional" som man skulle ha till att göra "bakåtkompatibla" sidor (och som är den som är absolut vanligast på webben idag) - men som även innehöll "det nya" med CSS-stöd osv...
  • Frameset -som är en dokumenttyp som man bara kan ha till att göra frameset-sidor till eftersom den inte innehåller någon <body>-tagg (om de inte ligger i <noframes> förståss - men där finns de bara med för bakåtkompatibilitetsskäl ;) )

Varje "smak" har sin egen unika <!DOCTYPE > och genom valet av <!DOCTYPE > väljer man ju vilka taggar man "får" använda på sidan...

Strict är "nästan" en ren delmängd av Transitional (finns en del skillnader utöver de uteslutna taggarna), och Frameset har en delvis helt annan uppsättning taggar än de övriga två...

I HTML4-rekommendationen antyds skillnaderna genom att de taggar och attribut som inte är med i "Strict" är försedda med ordet "deprecated" (tolkas ungefär "kommer att uteslutas i nästa version") - och XHTML-rekommendationen hänvisar ju till HTML4 för beskrivningar av de olika taggarnas funktioner (iom att XHTML 1.0 är en "rak" översättning av HTML4:as taggar från SGML till XML)

Hur vet man vilken Doctype man skall välja, och vad blir egentligen resultatet om man väljer fel/rätt?

Som jag ser det finns det två aspekter på det där...

Med valet av Doctype väljer du vilka taggar du kan/får använda.

Den aspekten är väl alla överens om. Och att tänka på detta är kanske först och främst viktigt när man väljer att validera sin kod och att se till att alla *taggar* är skrivna enligt standard. I XHTML 1.0 (liksom i HTML 4) finns, som sagt, tre olika Doctype-varianter att välja mellan - och dessa skiljer sig åt ungefär såhär:
  • Strict - "Bantad" version. (en del kallar den "ren" eftersom nästan allt "utseende" måste anges med CSS. detta pga att Strict saknar saker som bgcolor-attribut och font-taggar).
  • Transitional - Allt som W3C någonsin har godkänt inklusive <font> och <iframe>.
  • Frameset - Används för "frameset"-sidor (dvs den sidan som innehåller <frameset>- och <frame>-taggar)

Väljer man "rätt" Doctype får man alltså använda de taggar man tänkt sig. Väljer man en felaktig, så gör det i praktiken inte så mycket eftersom webbläsare av idag i vilket fall som helst inte "validerar" din kod när den laddas utan hela tiden försöker göra det bästa av situationen - så länge man kör HTML eller "bakåtkompatibelt förståss - men det är en annan historia).

Så långt är det inga konstigheter - men sedan finns det en aspekt till:

Beroende på hur man skriver sin Doctype-tagg så kommer olika webbläsare att bete sig på olika sätt!

Dagens webbläsare har två eller flera olika "moder" som de väljer mellan när de skall rita ut en sida. Detta kallas "Doctype Switching" och man anser ganska utbrett att det dök upp för första gången i IE5/Mac när den kom för några år sedan. De vanligaste moderna kallas "Quirks mode" (eller "bakåtkompatibel mod") och "Standards mode". Webbläsaren väljer vilken mod som skall användas genom att undesöka hur den Doctype man använder är skriven!

Exempel:
Antag att man väljer att köra HTML4.01 Transitional.
En korrekt Doctype för detta kan då se ut som följer:

 

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 

Den kan också se ut såhär:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

 

eller såhär:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

 

(motsvarande skillnader finns även mellan Doctype-deklarationerna för XHTML - jag vill bara passa på att peka på att detta faktiskt inte är ett XHTML-specifikt problem :) )

Oavsett vilken man väljer, så kommer HTML-koden på sidan (om den är korrekt) att validera, men olika webbläsare kommer att hantera din sida olika beroende på att den första och sista (eller helt utelämnad Doctype!) oftast ställer in webbläsare i "Quirks"-mode och den i mitten ställer in webbläsaren i "Standards"- eller "Almost standards"-mode. Det är här det blir klurigt eftersom skillnaderna mellan "Quirks" och "Standards" ofta märks visuellt...

Exempel:
Ta filen:

<html>
<head><title>Test</title></head>
<body>
  <table style="height:100%; width:100%; border: 1px solid black">
    <tr><td style="text-align:center;">Hej hopp!</td></tr>
  </table>
</body>
</html>

 

testa

Inga konstigheter... Hej hopp mitt på sidan!

Men lägg nu till

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
överst....

testa

Och hoppsan Kerstin! - Nu blev det skillnad i höjdled !!! (i Standards-mode måste du nämligen ställa in height:100% på body och html mha CSS för att det skall funka som man kanske tror - men det är en annan historia)

 

Vilken Doctype skall jag använda mig av då?

Hmm...
Eh... Det beror på
Ledsen - men det finns inget enkelt svar.

Jag gillar personligen att koda XHTML 1.0 Strict med en Doctype som ger mig "Standards" mode just nu eftersom jag upplever att webbläsarna av idag beter sig mer lika om man kör "Standards" mode än om man kör "Quirks" - men det kan iofs bero lika mycket på min kodningsstil som på något annat.

Det jag däremot skulle vilja rekommendera, är att ta steget över från Transitional till Strict (om du inte redan gjort det) för att:

  • Jag tycker det är lättare att koda sidor när jag har färre taggar och attribut att hålla reda på
  • Jag upplever strukturkraven i Strict som lite mer logiska och konsekventa än de som finns i Transitional
  • Jag tycker också att det är lättare att koda om sidor i t.ex. XHTML Mobile Profile när jag utgår ifrån Strict...

Men det är mina *åsikter* det - och man vad som är "bäst" är, som sagt, alltid en personlig fråga (eller upp till kunden :) )

Är man van att "width:100%" på en div även innefattar border och padding-värden och blir förvånad när man får rullningslister så skall man nog sikta på "Quirks"-mode...

Likaså om man vill använda tabeller för layout (för tabell-layouter hanteras inte alls likadant i "Standards" mode som i "Quirks" - oavsett om man väljer "Transitional" eller "Strict")

Ack hur enkelt voreinte livet om det bara fanns ett perfekt val :)

Slutord

Nåja.
Så länge du inte ger dig på att välja XHTML 1.1 och servera den som text/html så är väl egentligen inget av valen "fel" i praktiken - men jag har ändå en stark känsla av att framtiden ligger hos "Strict" tillsammans med en Doctype som ger dig "Standards mode"

Lycka till!

Kolla även in http://hsivonen.iki.fi/doctype/ (om quirks- och standards mode) och http://www.w3.org/TR/2002/NOTE-xhtml-media-types-20020801/ (om varför xhtml 1.1. inte är någon bra idé så länge MSIE inte klarar application/xhtml+xml)

4 Comments

En liten tanke som slog mig, i xhtml strict så får man inte använda sig av target. Hur gör man istället?

En möjlighet är att använda lite fiffig javascript och lita på att webbläsaren hanterar det där med target ändå... - Några noteringar om det: http://xhtml.se/index.php?s=target .

Intressant läsning, vet dock det besta, men en vettig för klaring, varför man ska använda de olika va kul å höra ;)

Intressant... Jag kör oftast XHTML och transitional, det vill inte fungera riktigt med strict trots att jag styr allt med CSS...

Men en grej till.. det här med teckenkodning... Jag använder linux och försöker använda ISO 8859-1, men ser ofta andra sidor med UTF-8 eller windows 1252.. är det någon som vet vilket som funkar bäst eller spelar det någon roll??

Powered by Movable Type 4.3-en