CSS: il test Acid 2

Quella che segue è la traduzione integrale del documento di riferimento sull'Acid Test 2. Questo test è stato pubblicato in origine per testare il supporto CSS 2.1 nei browser. Attualmente tutti i browser di ultima generazione superano questo test.

Acid2 è una pagina di test per browser web pubblicata dal Web Standards Project (WaSP). È stata scritta per aiutare i produttori di browser ad assicurarsi che i loro prodotti supportino correttamente le caratteristiche che vorrebbero usare i designer. Queste caratteristiche fanno parte degli standard esistenti, ma non sono state supportate in modo interoperabile dai browser maggiori. Acid2 vuole cambiare questo stato di cose sfidando i browser a rendere Acid2 in modo corretto prima del loro rilascio.

Acid2 è una pagina web complessa. Fa uso di caratteristiche che non sono ancora di uso comune a causa del mancato supporto, e raccoglie molti test in un'unica pagina. Lo scopo è quello di semplificare agli sviluppatori ed agli utenti il compito di verificare se un browser supera il test. Se ciò avviene, apparirà la faccia sorridente sulla sinistra. In caso contrario, la faccia risulterà distorta o mostrata parzialmente in rosso.

Scopo del presente documento è spiegare come funziona Acid2. La marcatura alla base di Acid2 è peculiare, in quanto esso tenta di testare differenti caratteristiche su una singola pagina. Non consigliamo di creare pagine web scritte in questo modo, ma ciò è appropriato per una pagina di test. A prima vista il codice sorgente è difficile da capire, ma il tour guidato offerto in questo documento lo spiegherà in dettaglio. La guida presuppone una comprensione tecnica di HTML, CSS e PNG.

Nota: Acid2 fa uso in modo estensivo di URL di dati. Per consentire ai produttori che non supportano ancora tali URL di eseguire il test, è stata pubblicata una versione senza URL di dati.

Nota: Quando si esegue il test, si dovrebbero usare le impostazioni predefinite del browser da testare. Cambiare il livello di zoom, la dimensione minima dei font, applicare un algoritmo di adattamento della larghezza o eseguire altre modifiche possono alterare la resa della pagina senza per questo costituire un fallimento nella conformità. (Aggiunto il 21 luglio 2006)

Cosa testiamo?

Acid2 testa delle caratteristiche richieste dai web designer. Tutto quello che viene testato da Acid2 è specificato in uno standard del Web, ma non tutti gli standard vengono testati. Acid2 non assicura la conformità con nessuna specifica. Dopo un'attenta riflessione, abbiamo scelto e andiamo a testare quelle caratteristiche che reputiamo importanti per il futuro del Web. Sebbene Acid2 sia stato ispirato dall'annuncio di Microsoft di IE7, esso non si rivolge ad un browser specifico. Crediamo che Acid2 metterà in evidenza i problemi in tutti gli attuali browser.

Acid2 presuppone un supporto di base di HTML4, CSS1, PNG, e URL di dati. Le prime tre voci vengono incluse per ovvi motivi: essi formano l'ossatura degli standard per i contenuti web. Gli URL di dati vengono descritti in HTML4 ma meno usati a causa della mancanza di supporto. Riteniamo che gli URL di dati siano utili ai web designer e facili da aggiungere nei browser. Inoltre Acid2 presuppone che il browser usi un foglio di stile predefinito con valori comuni. Per esempio, si presuppone che tutti gli elementi 'div' abbiano 'display: block'. Infine, il test presuppone una densità dei pixel di 96 ppi, come stabilito nei CSS 2.1. Per i programmi utente che supportano lo zoom dei font, si presuppone un fattore di zoom del 100%. L'elenco che segue offre una panoramica delle caratteristiche aggiuntive più importanti che vengono testate:

• PNG trasparenti: Gli occhi sono PNG trasparenti.
• L'elemento object : Gli occhi della faccia sono uniti ad un elemento object. Essere in grado di usare object (che può avere contenuto alternativo) è una delle più vecchie richieste dei web designer.
• Posizionamento assoluto, relativo e fisso: Posizionare gli elementi in modo preciso è importante per i layout avanzati.
• Box model: L' Acid test originale era incentrato sul box model CSS. Acid2 continua questa tradizione testando 'height', 'width', 'max-width', 'min-width', 'max-height' e 'min-height'.
• Tabelle CSS: I layout basati su tabelle non sono sbagliati. Si tratta di un potente modello di layout che ha senso su schermi grandi. Tuttavia, la marcatura di tabella è problematica su questi schermi. Quindi essere in grado di specificare layout tabellari con i CSS è importante.
• Margini: I CSS definiscono algoritmi precisi per il calcolo dei margini attorno agli elementi.
• Contenuto generato: La capacità di aggiungere decorazioni e annotazioni alle pagine senza modificare la marcatura è stato da tempo richiesto dagli autori.
• Parsing CSS: Acid2 comprende un numero di asserzioni CSS non valide che dovrebbero essere ignorate da un browser conforme.
• Ordine di rappresentazione: Testiamo che la sovrapposizione di contenuto venga resa nell'ordine corretto. Questa non è una caratteristica in sé, ma un requisito per far funzionare correttamente altre caratteristiche.
• Interlinea: Acid2 verifica alcune parti chiave del box model inline CSS, da cui dipende ogni pagina web conforme.
• Effetti di :hover: Uno degli elementi della faccia cambia colore quando vi si passa sopra col mouse. Quale?

Si noti che Acid2 viene dato in modalità standard, ossia la pagina di test ha un DOCTYPE che indica al browser di trattarla secondo gli standard. I produttori riluttanti a modificare la resa per i documenti obsoleti possono continuare con quello che è noto come modalità quirk.

Cosa dovrebbe apparire

Acid2, se reso correttamente, consiste di una riga di testo (Hello World) e di una griglia 14x14 di quadrati all'interno di un blocco contenitore dove si può vedere una faccia sorridente. Ogni quadrato è alto e largo 12px. La faccia ha uno sfondo giallo con un contorno nero attorno. In questa sezione spiegheremo come tutto questo è stato creato.

Il testo

La stringa "Hello World!" marca l'inizio di Acid2. Essa testa delle proprietà fondamentali CSS1. Nel codice sorgente è marcato come un elemento h2:

  
<h2 id="top">Hello World!</h2>

Queste dichiarazioni CSS si applicano all'elemento top:

Elemento	Dichiarazione	Effetto
<h2 id="top">	margin: 100em 3em 0	Imposta i margini intorno alla stringa. L'ampio margine superiore separa il test stesso dal testo introduttivo nella parte superiore della pagina.
	padding: 2em 0 0 .5em	Imposta del padding verticale intorno all'elemento in modo che vi sia dello spazio sopra e sotto la stringa. Il padding sopra l'elemento deve essere accuratamente impostato in modo che l'attaccatura dei capelli della faccia compaia nella giusta posizione.
	text-align: left	Sovrascrive ogni foglio di stile predefinito.
	font: 2em/24px sans-serif	Imposta il font su una dimensione doppia del suo elemento genitore. L'elemeneto genitore ha una dimensione del font di 12px, e quindi il font della stringa è di 24px. Anche l'interlinea della stringa è impostata su 24px, in modo da assicurarsi che la distanza dalla stringa alla faccia sia la stessa in tutti i browser, affinché l'attaccatura dei capelli sia nella posizione corretta. È stato anche impostato un font 'sans-serif' in questa dichiarazione.
	color: navy	Seleziona un colore blu scuro per la stringa.
	white-space: pre	Indica che la stringa non deve essere spezzata su più righe anche quando la finestra è molto stretta.

Queste dichiarazioni sono CSS1 e la maggior parte dei browser non avrà problemi con questo codice.

Il blocco contenitore

La figura della faccia appare all'interno di un blocco contenitore. Testa una parte fondamentale del posizionamento assoluto. Nella marcatura il blocco contenitore inizia con questo tag:

  
<div class="picture">

A cui si applicano queste dichiarazioni:

Elemento	Dichiarazione	Effetto
<div class="picture">	position: relative	L'elemento diventa un blocco contenitore.
	border: 1em solid transparent	Aggiunge un bordo intorno al blocco contenitore. Il bordo è trasparente, dunque non visibile ad eccezione dello spazio che occupa.
	margin: 0 0 100em 3em	Imposta i margini attorno al blocco contenitore. L'ampio margine inferiore deve lasciare abbastanza spazio nella parte inferiore della pagina in modo che il test compaia nella parte superiore della finestra.

Riga 1

Questa riga è l'attaccatura dei capelli della faccia e testa il posizionamento fisso, le altezze minime e massime, e le larghezze minime e massime. Nella marcatura la riga viene rappresentata da un elemento p, fisso rispetto alla finestra invece del canvas. Se si scrolla la pagina, l'attaccatura dei capelli resta fissa e non si separa dalla faccia, che scrolla.

Elemento	Dichiarazione	Effetto
<p>	position: fixed	Posiziona l'elemento in modo relativo al viewport.
	margin: 0	Sovrascrive ogni foglio di stile predefinito.
	padding: 0
	border: 0
	top: 9em	Imposta la posizione verticale dell'elemento relativamente alla finestra.
	left: 11em	Imposta la posizione orizzontale dell'elemento relativamente alla finestra.
	width: 140%	La larghezza in percentuale si riferisce alla larghezza del blocco contenitore, che è grande. Perciò sarebbe grande, ma max-width la limita a 4em.
	max-width: 4em
	height: 8px	Imposta l'altezza dell'elemento che viene poi sovrascritta da max-height e quindi min-height.
	min-height: 1em	Quando min-height è maggiore di max-height, min-height vince (CSS 2.1, sezione 10.7). Per la magggior parte dei dispositivi, 12px (1em) sarà più grande di 2mm, e l'altezza è quindi 1em.
	max-height: 2mm
	background: black	L'elemento non ha contenuto e quindi risulta nero.

Per posizionare correttamente la riga 1 si presuppone che gli identificatori di frammento che causano lo scrolling ricorrano nel limite superiore del padding (o forse del bordo, che non viene testato) dell'elemento, e non nel limite superiore del margine o del contenuto. Questa è una convenzione comune, ma non viene descritta in una specifica.

Riga 2

Questa riga testa i selettori di attributo, i selettori di classe, il posizionamento assoluto, e gli elementi flottati. La seconda riga della faccia ha due box neri con in mezzo un box giallo. L'effetto è creato con un elemento blockquote che ha un elemento address all'interno:

  
<blockquote class="first one">
    <address class="second two"></address>
</blockquote>

Ognuno dei due elementi ha attributi di classe con due valori. Il primo elemento (blockquote) è selezionato da questo selettore:

  
[class~=one].first.one 

Il selettore ha tre parti: un selettore di attributo ([class~=one]) e due selettori di classe (.first e .one). I selettori trovano corrispondenza e si applicano quindi le seguenti dichiarazioni:

Elemento	Dichiarazione	Effetto
<blockquote ...	position: absolute	Posiziona in modo assoluto l'elemento.
	top: 0	Allinea il limite del margine del box con il limite superiore del suo blocco contenitore.
	margin: 36px 0 0 60px	Imposta il margine superiore a 36px, il che spinge i quadrati nella seconda riga. Inoltre imposta il margine sinistro a 60px, il che sposta i quadrati neri più a sinistra nella posizione corretta.
	padding: 0	Sovrascrive ogni foglio di stile predefinito.
	border: black 2em	Il bordo crea i quadrati neri in questa riga. Questa dichiarazione imposta il colore e la larghezza del bordo.
	border-style: none solid	Annulla i bordi superiore ed inferiore, ed imposta come solid i bordi destro e sinistro.

La larghezza dell'elemento blockquote non viene impostata ed è quindi 'auto'. I CSS 2.1 nella sezione 10.3.7 (regola 3) specifica che la larghezza dell'elemento deve quindi essere determinata dall'algoritmo shrink-to-fit. Quindi la larghezza dell'elemento viene determinata dal suo contenuto, l'elemento address.

L'elemento interno (address) viene selezionato da questo selettore:

  
[class~=one][class~=first] [class=second\ two][class="second two"] 

Il selettore ha due parti principali con diverse sotto-parti. La prima parte principale ([class~=one][class~=first] seleziona l'elemento blockquote, e la seconda parte principale (class=second\ two][class="second two"]) seleziona l'elemento address. Perciò queste proprietà si applicano all'elemento address:

Elemento	Dichiarazione	Effetto
<address...	float: right	Fa flottare l'elemento. Non vi è alcun effetto visibile, dato che la posizione dell'elemento viene determinata dall'algoritmo shrink-to-fit.
	width: 48px	Imposta la larghezza dell'elemento a 4 quadrati.
	height: 12px	Imposta l'altezza dell'elemento ad 1 quadrato.
	background: yellow	Imposta il colore giallo della faccia.
	margin: 0	Sovrascrive ogni foglio di stile predefinito.
	padding: 0	Sovrascrive ogni foglio di stile predefinito.

Riga 3

Questa riga testa la larghezza, l'overflow, il selettore universale, e gli URL di dati. Questa riga consiste di due elementi annidati. L'elemento esterno genera i due quadrati neri della terza riga, e quello interno genera il box giallo tra i due quadrati neri. Gli elementi sono rappresentati da questa marcatura:

  
<div class="forehead">
    <div>&nbsp;&nbsp;....</div>
</div>

Si noti che il solo contenuto sono delle entità   (che qui non vengono rappresentate in toto) e che quindi verrà rappresentato su una singola riga.

L'elemento div esterno ha tre dichiarazioni ad esso collegate:

Elemento	Dichiarazione	Effetto
<div class="forehead">	margin: 4em	Imposta la posizione orizzontale e verticale del quadrato nero a sinistra. La dimensione è relativa al blocco contenitore, in quanto questa è la prima riga con elementi nel flusso normale.
	width: 8em	Imposta la larghezza dell'elemento esterno. L'elemento interno viene limitato da questa larghezza.
	border-left: solid black 1em	Genera il quadrato nero di sinistra.
	border-right: solid black 1em	Genera il quadrato nero di destra.
	background: red url(data:image/png;base64,...)	Lo sfondo viene impostato su un colore nominale ('red') ed un URL di dati. Tale URL (qui non riprodotto in toto) rappresenta un'immagine PNG di 1 pixel. L'immagine PNG sarà sempre disponibile, e lo sfondo rosso non dovrebbe quindi essere visibile.

L'elemento div interno viene selezionato da questo selettore:

  
.forehead *

Il selettore seleziona qualsiasi elemento all'interno del div esterno, ma in questa pagina vi è un solo elemento, ossia l'elemento interno div che ha le seguenti dichiarazioni:

Elemento	Dichiarazione	Effetto
<div>	width: 12em	La larghezza dell'elemento risulta maggiore di quella del genitore. Tuttavia, questo non dovrebbe influenzare la larghezza del genitore.
	line-height: 1em	Imposta l'altezza della riga a 12px.

Riga 4-5

Queste righe costituiscono un'unica unità. Esse testano l'ordine di rappresentazione e gli sfondi fissi. Le righe disegnano gli occhi insieme con il contorno nero della faccia gialla.

Nella marcatura queste righe vengono rappresentate da un insieme di elementi div e object annidati. Eccone la struttura:

  
<div class="eyes">
<div id="eyes-a">
<object data="data:application/x-unknown,ERROR">
<object data="http://www.webstandards.org/404/" type="text/html">
<object type="image/png" data="data:image/png;...">ERROR</object>
</object>
</object>
</div>
<div id="eyes-b"></div>
<div id="eyes-c"></div>
</div>

Gli occhi compaiono nell'elemento object interno. I due elementi object antenati dovrebbero mostrare i loro contenuti di ripiego - ossia l'elemento object interno. Il contenuto di ripiego dell'elemento object interno non dovrebbe essere visualizzato, in quanto l'attributo data restituisce un'immagine PNG valida (che disegna gli occhi).

La seguente tabella mostra le dichiarazioni applicate a questi elementi:

Elemento	Dichiarazione	Effetto
<div class="eyes">	position: absolute	Posiziona l'elemento in modo assoluto sulla riga 4.
	top: 5em
	left: 3em
	margin: 0	Sovrascrive ogni foglio di stile predefinito.
	padding: 0
	background: red	Uno degli scopi degli elementi figli è nascondere questo colore.
<div id="eyes-a">	height: 0	L'altezza è zero in modo che l'elemento non occupi spazio. (Il suo contenuto risulta ancora visibile a causa del valore iniziale 'visible' della proprietà 'overflow'). Come risultato avremo che l'elemento fratello che segue (eyes-b) si sovrapporrà a questo elemento.
	line-height: 2em	Assicura la giusta dimensione verticale al contenuto inline.
	text-align: right	Fa in modo che gli oggetti siano allineati alla destra del blocco, in modo che si sovrappongano al lato destro del float (rosso) e non al lato sinistro (segmento nero).
<object...>	display: inline	Il contenuto inline dovrebbe essere rappresentato nella parte superiore.
	vertical-align: bottom	Evita i problemi di allineamento della linea di base.
<object...>	width: 7.5em	Non dovrebbe avere effetto dato che l'oggetto è inline ('height'/'width' non si applicano agli elementi inline).
	height: 2.5em
<object...>	border-right: solid 1em black	Imposta il contorno destro per queste righe. Il bordo viene rappresentato sulla parte superiore in quanto è impostato su contenuto inline.
	padding: 0 12px 0 11px	Imposta dello spazio a sinistra e a destra degli occhi.
	background: url(data:image/png;base64, ...) 1px 0 fixed	Imposta lo sfondo con un'immagine gialla semitrasparente. L'immagine di sfondo è fissa, e il suo scostamento di un pixel - insieme con l'elemento successivo - forma uno sfondo giallo solido.
<div id="eyes-b">	float: left	Testa che i float vengano rappresentati sotto gli elementi inline ma sopra quelli di blocco. Rende anche possibile all'elemento di blocco successivo (eyes-c) di sovrapporsi a questo elemento.
	width: 10em	Imposta l'altezza e la larghezza dell'area gialla di queste righe.
	height: 2em
	background: fixed url(data:image/png;base64,...)	Questa immagine di sfondo è identica a quella dell'elemento object più interno. Inoltre è fissa sull'elemento. Tuttavia non viene scostata di un pixel, in modo che le due immagini di sfondo formino uno sfondo giallo uniforme.
	border-left: solid 1em black
	border-right: solid 1em red
<div id="eyes-c">	display: block	Gli elementi di blocco vengono rappresentati per primi quando vi è sovrapposizione di elementi.
	background: red	Lo sfondo rosso non dovrebbe essere visibile, in quanto gli elementi flottati e inline vengono rappresentati nella parte superiore.
	border-left: 2em solid yellow	Da il solito giallo alla parte sinistra della riga.
	width: 10em	Imposta le dimensioni.
	height: 2em

Riga 6-9

Queste righe costituiscono la parte centrale della faccia, compreso il naso. Esse testano il contenuto generato e i selettori del figlio.

La struttura è abbastanza semplice e consta di tre elementi div l'uno dentro l'altro:

  
<div class="nose">
<div><div></div>
</div></div>

Le seguenti proprietà si applicano all'elemento nose:

Elemento	Dichiarazione	Effetto
<div class="nose">	float: left	Fa flottare l'elemento a sinistra. Questo non cambia la posizione dell'elemento stesso, ma ha effetto sugli elementi che seguono.
	margin: -2em 2em -1em	Il margine superiore viene impostato a '-2em', il margine destro e sinistro a 2em ed il margine inferiore a -1em. Il margine sinistro fa in modo che questo elemento sia nella giusta posizione.
	border: solid 1em black	Imposta un bordo continuo di 1em intorno ai quattro lati dell'elemento. La larghezza del bordo superiore viene comunque annullata nella successiva dichiarazione.
	border-top: 0	Imposta il bordo superiore a zero.
	min-height: 80%	I valori percentuali di queste proprietà diventano 'auto' (si vedano le sezioni dei CSS 2.1 10.5 e 10.7). L'altezza intrinseca risulta maggiore di 3em, e quindi l'altezza dell'elemento è di 3em (ossia 3 quadrati).
	height: 60%
	max-height: 3em
	padding: 0	Sovrascrive ogni foglio di stile predefinito.
	width: 12em	Imposta la larghezza a 12 quadrati. I discendenti saranno posizionati dentro quest'area.
div	padding: 1em 1em 3em	Il solo padding inferiore di 3em assicura che la dimensione intrinseca dell'elemento genitore sia almeno di 3em. Con un padding superiore di 3em ed un altezza nulla, l'altezza dell'area gialla è di 4 quadrati.
	height: 0
	background: yellow	Un colore familiare.
div	width: 2em	Lo sfondo rosso di questo elemento non sarà visibile anche se altezza e larghezza sono state impostate esplicitamente. Questo è dovuto al contenuto generato che occupa tutto lo spazio disponibile.
	height: 2em
	background: red	Non dovrebbe essere visibile.
	margin: auto	Questa dichiarazione assicura che il naso venga centrato all'interno dell'elemento nose.

L'elemento div interno ha il contenuto generato prima e dopo di esso. Il contenuto generato costituisce il naso a forma di diamante della faccia.

Il contenuto generato prima dell'elemento costituisce la metà superiore del naso. Si applicano queste dichiarazioni:

Dichiarazione	Effetto
display: block	Questa dichiarazione ha due importanti effetti: fa applicare la 'height' al contenuto generato, ed i due pseudo-elementi vengono impilati verticalmente.
border-style: none solid solid	Il bordo di 1em è continuo sul lato destro, inferiore e sinistro. Tuttavia, il colore del bordo risulta identico a quelli circostanti (ossia è giallo) sul lato sinistro e destro. In questo modo si riesce a distinguere solo un triangolo nero (il bordo inferiore). Il bordo superiore viene impostato su 'none', dunque del tutto invisibile.
border-color: red yellow black yellow
border-width: 1em
content: ' '	Fa in modo che lo pseudo-elemento venga generato ma che non mostri contenuto.
height: 0	Impedisce al box di riga generato dalla proprietà 'content' di avere effetto.

Le dichiarazioni per lo pseudo-elemento :after sono identiche, eccezion fatta per il bordo inferiore scambiato con quello superiore.

Come risultato della sovrapposizione di due triangoli neri, avremo il naso a forma di diamante sulla faccia.

Tra la riga 9 e 10

Tra la riga 9 e 10 vi sono diversi elementi con differenti margini verticali. Quando si posiziona l'elemento smile della riga 10, si rende necessario calcolare come i margini collassano.

Il collassamento dei margini verticali ha luogo tra elementi di blocco nel flusso normale. La tabella che segue elenca gli elementi significativi ed i loro margini verticali.

Elemento	forehead
margin-bottom	4em
margin-top	6.25em	0
Elemento	empty	div
margin-bottom	6.25em	-6em
margin-top	5em
Elemento	smile

L'altezza dell'elemento empty e del suo figlio è 0. Perciò tutti i valori con sfondo grigio nella tabella di sopra collasseranno. Il margine risultante tra forehead e la parte superiore di smile è di 0.25em.

Tuttavia c'è anche un elemento flottato tra forehead e la parte superiore di smile. I float non rientrano nei calcoli del collassamento dei margini, ma in questo caso essi sovrascrivono de facto i margini. Il limite del bordo superiore dell'elemento smile viene posizionato contro il limite del margine inferiore dell'elemento nose flottato.

Riga 10-11

Queste righe sono il sorriso della faccia e testano i margini collassati. Vengono anche testati la parola chiave 'inherit' e gli elementi flottati annidati. Queste righe vengono rappresentate dalla seguente struttura, unitamente ad una breve descrizione testuale di ciascun elemento.

  
<div class="smile"> posiziona assolutamente le due righe
<div> traccia il contorno facciale nero
<div> traccia lo sfondo giallo
<span> traccia, in parte, la metà superiore del sorriso
<em> traccia, in parte, la metà inferiore e superiore del sorriso
<strong> da al sorriso la sua larghezza
</strong>
</em>
</span>
</div>
</div>
</div>

La seguente tabella illustra le dichiarazioni CSS date agli elementi:

Elemento	Dichiarazione	Effetto
<div class="smile">	margin: 5em 3em	Il margine verticale ('5em') collassa con i precedenti margini degli elementi forehead e empty. Il margine orizzontale (3em) posiziona la riga al giusto posto.
	clear: both	Fa in modo che l'elemento venga spostato in basso rispetto agli elementi flottati (ossia l'elemento nose).
<div>	margin-top: 1em	Questo non ha effetto, in quanto collassa con il margine superiore dell'elemento smile.
	background: black	Lo sfondo nero di questo elemento crea il contorno della faccia.
	width: 12em	Il sorriso è largo 12 quadrati, compreso il contorno della faccia.
	height: 2em	Il sorriso copre due righe.
	position: relative	Trasforma questo elemento in un blocco contenitore.
<div>	position: absolute
	top: 0	Allinea la parte superiore di questo elemento con la parte superiore del blocco contenitore.
	right: 1em	Posiziona l'elemento alla distanza di 1 quadrato dal limite destro del blocco contenitore.
	width: auto	La larghezza dell'elemento viene determinata dai suoi discendenti.
	height: 0	Azzera l'altezza. I bordi dell'elemento saranno ancora visibili.
	margin: 0	Sovrascrive ogni foglio di stile predefinito.
	border: yellow solid 1em	Questo bordo rappresenta l'area gialla di queste due righe.
<span>	display: inline
	border: solid 1em transparent	Bordi destro e sinistro di 1em trasparenti per questo elemento. Nessun bordo superiore ed inferiore.
	border-style: none solid
	float: right	L'elemento flotta a destra e viene spinto su di 1 quadrato da un margine negativo.
	margin: -1em 0 0 0
	background: black	L'elemento ha uno sfondo nero ed un'altezza di 1 quadrato. Esso forma una barra nera di 8 quadrati, di cui i 6 quadrati mediani vengono coperti dal bordo superiore dell'elemento figlio.
	height: 1em
<em>	float: inherit
	border-top: solid yellow 1em
	border-bottom: solid black 1em	Questo bordo forma la base del sorriso. La larghezza viene presa dall'elemento figlio.
<strong>	width: 6em	Imposta la larghezza del sorriso sulla riga 11.
	display: block	In questo modo si applica 'margin-bottom'.
	margin-bottom: -1em	Questa dichiarazione non ha effetto. L'elemento genitore ha i bordi superiore ed inferiore in modo che il margine inferiore qui impostato non va a collassare con altri margini.

Riga 12

Questa riga testa la proprietà line-height. Nella marcatura, la riga viene rappresentata da due elementi div annidati:

  
<div class="chin">
<div>&nbsp;</div>
</div>

Queste dichiarazioni si applicano all'elemento div esterno:

Dichiarazione	Effetto
margin: -5em 4em 0	Imposta la posizione verticale ed orizzontale. Il margine superiore di -5em collassa con quello inferiore di 5em dell'elemento smile, azzerando lo spazio tra questo elemento ed il precedente.
width: 8em	Imposta la larghezza del mento, bordi esclusi, a 8 quadrati.
line-height: 1em	Rende il box inline dell'elemento alto 12px. Questa diventa anche l'altezza della riga, dato che l'altro box inline sulla riga è completamente racchiuso dal primo. La sezione 10.8 dei CSS 2.1 descrive questo in dettaglio.
border-left: solid 1em black	Rende il bordo di sinistra un box quadrato nero.
border-right: solid 1em black	Rende il bordo di destra un box quadrato nero.
background: yellow url(data:image/png;base64, ... no-repeat fixed	Lo sfondo dell'elemento viene impostato sul giallo. Inoltre gli si aggiunge un box rosso di 64x64 pixel come sfondo (rappresentato da un'immagine PNG nell'URL di dati). Il box rosso non è visibile, in quanto 'background-attachment' è 'fixed', e quindi il box rosso non può essere visto.

Queste dichiarazioni si applicano all'elemento div interno:

Dichiarazione	Effetto
display: inline
font: 2px/4px serif	Rimpicciolisce il font e l'interlinea in modo che il box inline venga racchiuso in toto dal box inline del suo genitore.

Riga 13

Questa riga testa il parser, il meccanismo di cascata e i selettori. Dopo la rimozioni di alcuni commenti, la restante marcatura dovrebbe essere:

  
<div class="parser-container">
<div class="parser"></div>
</div> 

La sfida per i browser è capire quali dichiarazioni si applicano all'elemento parser. Le dichiarazioni sono:

Dichiarazione	Effetto
color: maroon	Imposta il colore del testo e sottintende il colore del bordo, in seguito sovrascritto.
border: solid	Imposta un bordo continuo pari a 'medium'. Il colore del bordo viene impostato in seguito.
color: orange	Imposta il colore del testo e sottintende il colore del bordo, in seguito sovrascritto. Si noti che 'orange' è un valido nome di colore nei CSS 2.1.
border-color: black	Sovrascrive il colore del bordo della riga precedente.
border-width: 0 2em	Sovrascrive la dichiarazione nella riga precedente.
margin: 0 5em 1em	Posiziona l'elemento.
padding: 0 1em	Queste dichiarazioni rendono l'area gialla larga 4 quadrati.
width: 2em
height: 1em	Imposta l'altezza ad 1 quadrato.
background: yellow	Imposta lo sfondo.

Questa riga si assicura anche che il parser ignori correttamente alcune parti del foglio di stile secondo le specifiche. La seguente tabella descrive cosa deve essere ignorato e perché:

Codice CSS	Cose da ignorare e perché
.parser { /* ... \*/ }	Il backslash non deve avere effetto.
.parser { error: \}; background: yellow }	error non è una valida proprietà CSS. È importante però che il parser riprenda l'analisi dopo il punto e virgola. Lo sfondo deve essere giallo.
* html .parser { background: gray; }	html è l'elemento radice, ed il selettore non seleziona nulla.
\.parser { padding: 2m; }	Testa che non vi sia un elemento di tipo .parser (in opposizione a quello con classe parser).
.parser { m\argin: 2em; }	Testa che non vi sia una proprietà chiamata m(U+000A)rgin (in opposizione a quella chiamata margin).
; .parser { height: 3em; }	Il selettore comprende il punto e virgola della riga precedente e quindi non seleziona nulla.
.parser { width: 200; }	Manca l'unità.
.parser { border: 5em solid red ! error; }	error non è ammesso dopo il punto esclamativo.
.parser { background: red pink; }	Un solo colore è ammesso.

Riga 14

Questa riga testa le tabelle CSS. La struttura è un semplice elenco:

  
<ul>
<li class="first-part"></li>
<li class="second-part"></li>
<li class="third-part"></li>
<li class="fourth-part"></li>
</ul>

Gli stili associati a questi elementi lo trasformano in una tabella con una riga e quattro celle. Ogni cella equivale ad un quadrato. Di seguito ci sono gli elementi con le rispettive dichiarazioni:

Elemento	Dichiarazione	Effetto
<ul>	display: table	Presenta l'elenco con formattazione tabellare.
	padding: 0	Sovrascrive ogni foglio di stile predefinito.
	margin: -1em 7em 0	Posiziona l'elemento orizzontalmente e verticalmente.
	background: red	Lo sfondo di questo elemento deve essere completamente coperto dai suoi figli.
<li class="first-part">	padding: 0	Sovrascrive ogni foglio di stile predefinito.
	margin: 0
	display: table-cell	L'elemento diventa una cella di tabella.
	height: 1em	1 quadrato.
	width: 1em
	background: black	Il colore voluto.
<li class="second-part">	padding: 0	Sovrascrive ogni foglio di stile predefinito.
	margin: 0
	display: table	Questo elemento diventa a sua volta una tabella. Una cella di tabella anonima viene creata atttorno ad esso. La cella anonima non deve occupare spazio e quindi devono essere rispettate l'altezza e la larghezza dell'elemento.
	height: 1em	1 quadrato.
	width: 1em
	background: black	Come prima.
<li class="third-part">	padding: 0	Sovrascrive ogni foglio di stile predefinito.
	margin: 0
	display: table-cell	L'elemento diviene una cella di tabella separata.
	height: 0.5em	Tutte le celle di questa riga hanno uguale altezza, quindi anche questa cella sarà di 1 quadrato.
	width: 1em
	background: black	Nero.
<li class="fourth-part">	padding: 0	Sovrascrive ogni foglio di stile predefinito.
	margin: 0
	list-style: none	Rimuove il marcatore di elenco.
	height: 1em	1 quadrato.
	width: 1em
	background: black	L'ultimo quadrato della faccia è nero.

Dopo la riga 14

Dopo la riga 14 ci sono degli elementi che non dovrebbero generare nulla di visibile. Quello che qui viene testato è il rispetto di line-height da parte delle celle di tabella. Here are the elements:

  
<div class="image-height-test">
<table>
<tr>
<td>
<img src="data:image/png;base64,..." alt="">
</td>
</tr>
</table>
</div>

L'immagine nell'elemento img è un'immagine PNG rossa di 64x64. Non deve mai essere visibile a causa di queste dichiarazioni:

<div class="image-height-test">	height: 10px	Imposta l'altezza su un piccolissimo 10px.
	overflow: hidden	Nasconde il contenuto in eccesso, compresa l'immagine.
	font: 20em serif	Imposta una grande dimensione del font che provoca un'altrettanto grande interlinea. Anche se non c'è contenuto testuale nella cella, deve rispettare i calcoli dell'interlinea.

Come risultato del rispetto dell'interlinea, l'immagine viene spinta molto in basso. Dato che solo i 10px superiori dell'elemento sono visibili, l'immagine viene nascosta.

Cronologia delle revisioni

1. Versione 1.1

   • Modificato il margine superiore ed aggiunto il posizionamento relativo da bottom: a .smile div per compensare il collassamento dei margini
   • Modificato il margine superiore di .chin per compensare il collassamento dei margini

2. Versione 1.0

   • Test originale