Quella che segue è la traduzione dell'articolo originale scritto da Peter-Paul Koch sulla modalità quirk e standard dei browser e sul DOCTYPE switching.
- Ulteriori informazioni possono essere reperite sulla pagina di Jukka K. Korpela sulle caratteristiche del quirks mode.
- Comparazione tra i browser: quale doctype scegliere?
- Explorer 5 Windows e Netscape 4: il doctype switching non è possibile; sempre fermi sul quirks mode.
- Explorer 6 Windows: CSS Enhancements in Internet Explorer 6
- Explorer 5 Mac: nessuna pagina ufficiale, ma Eric Meyer ha riassunto le differenze.
- Mozilla: i DOCTYPE e l'elenco dei quirk.
- Opera 7: Il DOCTYPE Switch in Opera
- Safari: nessuna pagina ufficiale, ma segue Mozilla.
Quirks mode e strict mode sono due "modalità" che i browser moderni possono usare per interpretare il vostro CSS. Questa pagina da una breve introduzione delle motivazioni e delle differenze alla base delle due modalità.
Il problema
Quando Netscape 4 ed Explorer 4 implementarono i fogli di stile, il loro supporto non corrispondeva allo standard W3C (o, piuttosto, era reciprocamente discorde). Netscape 4 aveva un supporto orribile. Explorer 4 si avvicinava di più allo standard, ma non lo implementava con piena correttezza. Sebbene Explorer 5 Windows abbia rimediato a molti dei bug di Explorer 4, esso ha continuato a mostrare altri problemi (soprattutto nel box model).
Per essere sicuri che i loro siti venissero resi correttamente nei vari browser, gli sviluppatori web dovettero implementare i CSS secondo le esigenze di questi browser. Così molti di questi siti non corrispondevano alle specifiche.
Perciò, quando la conformità agli standard divenne importante, i produttori dei browser si trovarono di fronte ad una scelta difficile. Accostarsi alle specifiche ufficiali era la strada da percorrere, ma se avessero semplicemente modificato la loro implementazione per conformarsi agli standard, molti siti web sarebbero risultati inpresentabili in misura più o meno evidente. I CSS esistenti avrebbero mostrato curiosi effetti collaterali se fossero stati mostrati nel modo corretto ex abrupto.
Accostarsi alla conformità avrebbe quindi causato problemi, ma non farlo avrebbe continuato a causare quella confusione tipica dell'era della guerra dei browser.
La soluzione
Quindi una soluzione al problema doveva:
- permettere agli sviluppatori che conoscevano gli standard di scegliere la modalità da usare.
- continuare a visualizzare le vecchie pagine secondo le regole quirk.
In altre parole, tutti i browser necessitavano di due modalità: quirks per le vecchie regole e strict per gli standard. Explorer Mac fu il primo ad implementare le due modalità, e Explorer 6 Windows, Mozilla, Safari e Opera lo seguirono. Explorer 5 Windows, così come i vecchi browser, è sempre fermo in quirks mode.
Scegliere una modalità necessitava di un qualcosa che lo innescasse, e questo lo si trovò nel "doctype switching". Secondo gli standard, un documento (X)HTML dovrebbe avere un doctype che dichiari che tipo di (X)HTML viene usato nel documento.
- Le vecchie pagine scritte prima (o senza tener conto) della standardizzazione non hanno un doctype. Quindi nessun doctype implica il quirks mode (mostrare la pagina secondo le vecchie regole).
- Di contro, se lo sviluppatore inserisce un doctype, probabilmente sa quel che sta facendo. Quindi la maggior parte dei doctype innesca lo strict mode (mostrare la pagina secondo gli standard).
- Qualsiasi doctype nuovo o sconosciuto innesca lo strict mode.
- Il problema è che alcune pagine scritte in quirks mode hanno il doctype. Dunque ogni browser ha il suo elenco di doctype che innescano il quirks mode. Si veda questa tabella comparativa dei browser per una panoramica di questi elenchi.
Si noti che le vostre pagine non devono essere validate secondo il doctype scelto. La semplice presenza del tag di doctype è sufficiente ad innescare lo strict mode.
Sul mio sito uso il seguente doctype nella maggior parte delle pagine. Oltre a dichiarare le mie pagine XHTML 1.0 Transitional, esso innesca lo strict mode in tutti i browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Una buona soluzione?
Personalmente non sono felicissimo del doctype switching. Un doctype veicola informazioni sul tipo di (X)HTML che usate, o meglio, sulla struttura del documento. A mio avviso esso non dovrebbe veicolare nessuna informazione sulla presentazione del documento, perché così facendo si viola la separazione tra struttura e presentazione che è alla base dei fogli di stile.
Ma i produttori dei browser non vennero smentiti: browser dopo browser hanno implementato il doctype switching, e oggi tutti i browser moderni lo supportano.
Complicazione: almost strict mode
All'inizio gli esperimenti con lo strict mode evidenziavano sempre il fatto che le immagini avevano un margine
inferiore che non poteva essere rimosso. Il motivo stava nel fatto che in strict mode
<img />
è un elemento inline, il che significa che si dovrebbe riservare
dello spazio per possibili caratteri discendenti come g, j, o q. Naturalmente un immagine non ha caratteri
discendenti, e quindi lo spazio non fu mai usato, ma nondimeno veniva preservato.
La soluzione consisteva nel dichiarare le immagini come elementi di blocco:
img {display: block}
.
Nondimeno i produttori di browser, in primis Mozilla, pensarono che questa fosse una situazione confusa ed introdussero l' "almost strict mode". Quest'ultimo veniva definito come strict mode, ma le immagini continuavano ad essere blocchi e non elementi inline.
I doctype più comuni, tra cui quello che uso, innescano l'almost strict mode. Il trattamento delle immagini è certamente la differenza maggiore tra almost strict mode e strict mode autentico.
Explorer Windows: il prologo xml
In Explorer 6 Windows, Microsoft ha implementato un altra regola: se un doctype che innesca lo strict mode viene preceduto da un prologo xml, la pagina viene mostrata in quirks mode. Questo venne fatto per permettere agli sviluppatori di avere delle pagine valide (che richiedono il doctype) rimanendo al contempo in quirks mode.
Questo è il prologo xml. Dovete porlo sulla prima riga del vostro documento, prima del doctype.
<?xml version="1.0" encoding="iso-8859-1"?>
Si noti che questo comportamento è stato rimosso da Explorer 7.
Le differenze
Quali sono esattamente le differenze tra le due modalità? In primis, tutte le nuove implementazioni in Explorer 7 funzionano solo in Strict Mode.
Ci sono altre differenze che possono confondere lo sviluppatore. La seguente tabella riassume le più importanti.
Sempre | Supporta sempre gli standard |
Mai | Non supporta mai gli standard |
Dipende | Il supporto dipende dalla modalità di rendering (si veda il testo per i dettagli) |
Si veda anche la chiave di lettura delle mie tabelle di compatibilità.
Problema | Explorer 6 Win | Explorer 7 beta 3 | Explorer 5.2 Mac | Firefox 1.5 | Safari 1.3 | Opera 9 | iCab 3.0 |
---|---|---|---|---|---|---|---|
Box model
Pagina di test QuirksPagina di test Strict |
Dipende | Dipende | Dipende | Sempre | Sempre | Sempre | Sempre |
Standard: Vi sono
due box model, il tradizionale e quello
W3C. Ovviamente il secondo, dove la
In Explorer la modalità di rendering stabilisce il box model da seguire. In quirks mode si usa il box model tradizionale, in strict mode quello standard. Il doctype switching è l'unico modo di selezionare
un box model in Explorer 6 Windows. Mozilla,
Opera ed Explorer Mac permettono l'uso della dichiarazione3 Eccezione: i bottoni mantengono sempre il box model tradizionale in Explorer Windows e Mozilla. Pagina di test. |
|||||||
white-space: pre
Pagina di test QuirksPagina di test Strict |
Dipende | Dipende | Sempre | Sempre | Sempre | Sempre | Sempre |
Standard:
In Explorer Windows questa dichiarazione funziona solo in strict mode. |
|||||||
margin e width: auto
Pagina di test QuirksPagina di test Strict |
Dipende | Dipende | Sempre | Sempre | Sempre | Sempre | Sempre |
Standard: Dando ad un elemento qualsiasi In Explorer Windows questo funziona solo in strict mode. |
|||||||
I valori senza unità di misura diventano pixel
Pagina di test QuirksPagina di test Strict |
Dipende | Dipende | Dipende | Dipende | Dipende | Dipende | Mai |
Standard: I CSS richiedono che i valori debbano avere un'unità. In caso contrario il valore viene ignorato. Tuttavia in quirks mode la maggior parte dei browser aggiunge l'unità |
|||||||
Problema | Explorer 6 Win | Explorer 7 beta 3 | Explorer 5.2 Mac | Firefox 1.5 | Safari 1.3 | Opera 9 | iCab 3.0 |
.test:hover
Pagina di test QuirksPagina di test Strict |
Non testabile | Dipende | Non testabile | Dipende | Sempre | Sempre | Sempre |
Standard: Il selettore Non funziona in alcuni browser in quirks mode. |
|||||||
Visualizzazione di
Pagina di test Quirksimg Pagina di test Strict |
Mai | Mai | Mai | Dipende | Dipende | Dipende | Dipende |
Standard: Un'immagine ha In quirks mode Si noti che la pagina di test è in "vero strict mode" invece che "almost strict mode". Lo uso sul resto del mio sito. Si veda sopra per avere ulteriori informazioni su almost strict mode. |
|||||||
overflow: visible
Pagina di test QuirksPagina di test Strict |
Mai | Dipende | Sempre | Sempre | Sempre | Dipende | Sempre |
Standard: Quando si da ad un elemento una Explorer 6 allarga sempre l'elemento per farci entrare il contenuto, in qualsiasi modalità di rendering. In Opera ed Explorer 7 questo accade solo in quirks mode. |
|||||||
larghezza su elementi inline
Pagina di test QuirksPagina di test Strict |
Dipende | Dipende | Dipende | Sempre | Sempre | Sempre | Sempre |
Standard: Un elemento inline come In quirks mode, tuttavia, Explorer cerca di rispettare la |
|||||||
dimensioni dei font delle celle di tabella
Pagina di test QuirksPagina di test Strict |
Dipende | Dipende | Dipende | Dipende | Dipende | Dipende | Sempre |
Standard: Tuttavia in quirks mode vuol dire che tali elementi avranno una dimensione dei font rispetto alla dimensione di default del browser (di solito 16px). Questo è un comportamento davvero strano, in quanto si basa su di un bug di Netscape 4 (!) e per qualche ragione i produttori di browser pensarono che fosse necessario perpetuarlo. |
|||||||
Problema | Explorer 6 Win | Explorer 7 beta 3 | Explorer 5.2 Mac | Firefox 1.5 | Safari 1.3 | Opera 9 | iCab 3.0 |
Ulteriori informazioni si trovano sulla pagina di Jukka K. Korpela precedentemente menzionata.