Il DOCTYPE cos'è?

Il Doctype questo sconosciuto.
fonti da html.it e w3c.

I documenti HTML devono conformarsi ad una Document Type Definition, e ad una dichiarazione SGML.
Così tuonava il Consortium nel lontano 1996, quando lanciò le specifiche per l'HTML 3.2.
La teoria doveva essere che il DOCTYPE servisse ai browser per capire il tipo di documento da processare.
Purtroppo questa è pura teoria, infatti, mentre alla fine degli anni '90 la guerra tra browser proclamava Internet Explorer vincitore assoluto della contesa, nonostante nessuno dei due integrasse completamente le specifiche dettate dal consortium.
In effetti tale guerra, aveva fatto si che i due browser, implementassero specifiche tutte loro, per accattivarsi la clientela. A tal proposito si veda il linguaggio LiveScript poi chiamato con un'operazione di puro marketing JavaScript da Netscape.
Quindi nel frattempo il consortium emanava le segenti specifiche:
dicembre 1999 ultima versione dell'HTML, la 4.01, dopo questa versione a partire dal 2000, si inizierà a parlare di XHTML, cioè HTML esteso, dove quella X sta a indicare la sua natura di derivazione dalle specifiche XML.
Tra dicembre 1996 (CSS1) e maggio 1998 (CSS2) sostituisce tutti i marcatori di layout, con un linguaggio specifico per la gestione del layout, ovvero i fogli di stile a cascata (CSS).
Nell'ottobre 1998, sviluppo dello standard di accesso al DOM (Document Object Model) adottando l'ECMASCript.
Insomma, mentre da una parte i due maggiori produttori di browser (Netscape e Microsoft) si facevano la guerra, il Consortium, definiva quelle specifiche che avrebbero cambiato profondamente il web.

Veniamo in specifico al doctype e al concetto di switch.
Troppi standard specifici, fanno male al web, lo sviluppatore dovrebbe poter scegliere quale migliore sistema si adatti al suo scopo.
La modalità standard e quella retrocompatibile.
A marzo 2000 usciva IE5 per Mac, forse il browser di quel periodo che più supporta le specifiche del Consortium, in particolare per i CSS.
Questo browser, in funzione della presenza o del tipo di <!DOCTYPE> scelto, poteva funzionare in due modalità: Quirk (retrocompatibile) e Standard.
Mozilla, sorto dalle ceneri del progetto Netscape, con la versione M18 dell'estate 2000 implementa due modalità.
Adotta un parser DTD e tre DTD: Nav DTD, Strict DTD e Transitional DTD. Il Nav DTD è retrocompatibile e fa funzionare il browser in modo analogo a Netscape Navigator 4.x, i DTD Strict e Transitional fanno funzionare Mozilla in modalità standard, aderendo, rispettivamente, all'(X)HTML Strict e Transitional. Da questo modo di funzionare, anche per Mozilla discendono due modalità di visualizzazione del layout la Quirk - utilizzando il Nav DTD - e la Standard utilizzando gli altri due. Il tutto, analogamente a Internet Explorer 5 Mac, in funzione della presenza e del tipo di <!DOCTYPE>.
Il doctype switch acquista importanza fondamentale a partire dalla versione IE6 PC, che dal marzo 2003 risulta essere al 60% dei browser utilizzati al mondo per navigare.
Mizilla corre ai ripari, a luglio 2002 con il rilascio 1.1 beta, e Netscape 7, adotta la modalità Almost standard.
Tale modalità risulta pressoché identica a quella Standard - da allora definita Full standard - tranne che nell'implementazione delle regole relative alla line-height, implementate dai CSS Level 2. In questo modo il layout delle immagini all'interno delle celle delle tabelle viene gestito in modalità Quirk, analogamente alla gestione Internet Explorer, evitando così, nel caso di immagini inserite in tabelle e che necessitino una visualizzazione precisa al pixel, che Mozilla e Netscape 7 si comportino diversamente da altri browser, mostrando un margine inferiore vuoto in corrispondenza della baseline.
Arriva Opera, è gennaio 2003 esce Opera 7, adottando il doctype switch, quindi arriva anche Safari, un browser per Mac, sviluppato a partire dal Konqueror, Quirk, Almost standard e Full standard.
Quindi concludendo: doctype è divenuto altamente funzionale, viene supportato dalla stragrande maggioranza dei browser, pur nelle specifiche differenze, di versione o semplicemtne di "marca", tutti i browser "Gecko" (Mozilla, Netscape 6.x/7, Beonex, Camino/Chimera, Galeon, K-Meleon, Phoenix, Safari) IE per Mac, IE6.x, OPera 7.x.
In pratica a parte iCab e OmiWeb per Mac e Konqueror per *nix, tutti supportano il doctype switch.

Chiunque sviluppi pagine web, non può più ignorare questo apstetto, in quanto l'assenza o la presenza del tipo di doctype determinano il modo in cui verrà visualizzata la pagina.
Non pochi problemi derivano dalla mancanza o peggio, dall'errato utilizzo di questa importante specifica.

Quindi.
Quirk e Standard mode:

Differenze comuni a tutti i browser citati sopra:

valori dei colori in formato esadecimale che non iniziano con # vengono accettati;
valori numerici senza unità di misura specificata vengono interpretati come px;
l'ereditarietà dei CSS non funziona correttamente all'interno delle tabelle.

Differenze relative a IE e Opera:

il box model CSS degli elementi block-level comprende nella proprietà width anche il border-width ed il padding
il background-color dell'elemento body è trattato come se fosse il background-color dell'elemento html;
i selettori CSS delle classi e degli id non sono sensibili alla differenza tra maiuscole e minuscole;
i selettori CSS delle classi e degli id possono cominciare con un numero;
i valori delle proprietà size e position possono contenere uno spazio tra il numero e l'unità di misura

Differenze relative a Opera:

nell'(X)HTML non esiste attributo height del tag tr, esso viene ammesso da Opera in Quirk mode;
la proprietà overflow con valore visible, invece di fare espandere il contenuto fuori da un box CSS di determinate dimensione ne allarga le dimensioni.

Fonti ufficiali dei comportamenti Quirk tra i vari browser:

IE: http://msdn.microsoft.com/library/de...hancements.asp
Mozilla: http://mozilla.org/docs/web-develope...quirklist.html
Opera: http://www.opera.com/docs/specs/doctype/

Le fonti sono in inglese.

Tabella del <!DOCTYPE> Switch

Di sotto sono elencati i principali tipi di <!DOCTYPE> ed i comportamenti previsti per i vari browser, in funzione del <!DOCTYPE> scelto.

Principali tipi di <!DOCTYPE>: http://pro.html.it/articoli/id_315/i...pag_2/pag.html

fonte html.it

Un test per verificare in che modalità funzionerà un documento, in base la doctype scelto è quello di aggiungere il seguente JavaScript nell <head> della pagina:

<script type="text/javascript">
strict=false
var d=document.doctype

strict=(document.compatMode=="CSS1Compat")
strict=(d&&d.systemId?(d.systemId.indexOf( "strict")>-1?true: (d.publicId.indexOf("transitional")>-1?true:false)): (d&&d.publicId.indexOf("transitional")==-1?true:strict))
strict=(d&&d.name.indexOf(".dtd")>-1)?true:strict

alert("strict= "+strict)
</script>

Il JavaScript restituirà una finestra di alert con valore la scritta strict=true se il browser funziona in modalità Standard, oppure strict=false se il browser funziona in modalità Quirk.

Questo script funziona correttamente con Internet Explorer 6.x e Netscape/Mozilla su Windows.

In un documento già esistente, invece è sufficiente digitare nella barra degli indirizzi la seguente stringa:


javascript:alert(document.compatMode);

Una finestra di alert restituirà il valore "BackCompat" nel caso di funzionamento del browser in Quirk mode su Internet Explorer 6.x e Netscape/Mozilla, mentre su Opera 7.x restituirà il valore "QuirksMode", mentre se il browser funziona in Standard mode restituirà il valore "CSS1Mode" su tutti i browser.Anche questo modo di verificare la modalità di funzionamento del browser non è supportata dai Mac che non supportano l'oggetto compatMode
(fonte html.it)

Concludo.

Sebbene il doctype switch introduca un ulteriore elemento di complessità nelle nostre pagine, il suo corretto uso ci da la possibilità di uniformare le pagine stesse o a un dato browser (pessima idea) o a tutti i browser su tutte le piattaforme (cosa eccelsa), senza dover ricorrere a trucchi (hack o workaround).
In genere la visualizzazione più omogenea si ottiene con lo switch adotato da Gecko in modalità Almost standard: (IE6, IE5 Mac, Opera 7, Mozilla/Netscape).

Che pizza... mi annoiavo meno con una lezione all'niversità!

Che pizza... mi annoiavo meno con una lezione all'niversità!

Potevi lasciarla nel piatto invece di mangiarla.
Non è che è sempre divertent crescere sai