CSS Zibaldone

[ Home ] - [ Articoli ] - [ Traduzioni ] - [ Altro ] - [ Appunti sui CSS ] - [ L'autore ]

Sei qui: Home > Traduzioni > Quirks mode e strict mode

Quirks mode e strict mode

Articolo originale: http://www.quirksmode.org/css/quirksmode.html

Traduzione: Gabriele Romanato (24 agosto 2007)

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 Quirks Pagina 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 `width` esclude il padding e i bordi, è lo standard. 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 `box-sizing` per selezionare un box model, mentre Safari supporta solo il modello standard. Eccezione: i bottoni mantengono sempre il box model tradizionale in Explorer Windows e Mozilla. Pagina di test.
white-space: pre Pagina di test Quirks Pagina di test Strict	Dipende	Dipende	Sempre	Sempre	Sempre	Sempre	Sempre
	Standard: `white-space: pre` funziona sempre. In Explorer Windows questa dichiarazione funziona solo in strict mode.
margin e width: auto Pagina di test Quirks Pagina di test Strict	Dipende	Dipende	Sempre	Sempre	Sempre	Sempre	Sempre
	Standard: Dando ad un elemento qualsiasi `width` e `margin: 0 auto` è possibile centrarlo. In Explorer Windows questo funziona solo in strict mode.
I valori senza unità di misura diventano pixel Pagina di test Quirks Pagina 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à `px` a tali valori.
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 Quirks Pagina di test Strict	Non testabile	Dipende	Non testabile	Dipende	Sempre	Sempre	Sempre
.test:hover Pagina di test Quirks Pagina di test Strict	Standard: Il selettore `.test:hover` (senza un selettore di elemento come `p.test:hover`) funziona sempre. Non funziona in alcuni browser in quirks mode.
Visualizzazione di `img` Pagina di test Quirks Pagina di test Strict	Mai	Mai	Mai	Dipende	Dipende	Dipende	Dipende
	Standard: Un'immagine ha `display: inline` di default. Perciò ha in piccolo spazio sotto di essa, dato che l'immagine viene posta sulla riga di base del testo. Sotto la riga di base ci dovrebbe essere un ulteriore spazio per caratteri discendenti come g, j o q. In quirks mode `img` ha di default `display: block`, mentre in strict mode ha di default `display: inline`. Lo svantaggio è che in strict mode non è possibile adattare perfettamente un contenitore all'immagine, a meno che. ovviamente, non si dichiari esplicitamente `img {display: block}`. 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 Quirks Pagina di test Strict	Mai	Dipende	Sempre	Sempre	Sempre	Dipende	Sempre
	Standard: Quando si da ad un elemento una `height` fissa e `overflow: visible` (default), e il contenuto è troppo lungo per l'elemento, il contenuto dovrebbe fuoriuscire dall'elemento. 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 Quirks Pagina di test Strict	Dipende	Dipende	Dipende	Sempre	Sempre	Sempre	Sempre
	Standard: Un elemento inline come `<span>` non può avere una `width`. In quirks mode, tuttavia, Explorer cerca di rispettare la `width` dando all'elemento `display: inline-block`, che consente una dichiarazione di `width`.
dimensioni dei font delle celle di tabella Pagina di test Quirks Pagina di test Strict	Dipende	Dipende	Dipende	Dipende	Dipende	Dipende	Sempre
	Standard: `td {font-size: 80%}` dovrebbe indicare che gli elementi `td` ricevono una dimensione del testo di 80% del testo di `body`. 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.