Tractament del model de caixa
Publicat el 18/10/2004
Aquest tema ja l'he tractat en altres entrades però aquí intentaré explicar exactament el que jo uso.
El DOCTYPE
A la majoria de webs que tracto utilitzo el DOCTYPE XHTML 1.0 Strict, exeptuant alguna web com aquesta mateixa que uso XHTML 1.1.
Aquesta decisió és bàsicament perquè m'interessa utilitzar el DOCTYPE més semblant a la manera de fer de l'XML. Tampoc tanco portes a emprar-ne un altre si el cas ho demanés.
El que si que tinc bastant clar és que no utilitzaria un DOCTYPE d'HTML 4.01 tot i la devoció que li té gent de nivell com en mort.
El pròleg XML
Havent decidit treballar amb XHTML apareix una altre decisió: El pròleg XML.
Aquesta sentència és obligatoria en qualsevol document XML però opcional als documents XHTML.
Jo el declaro sempre ja que això em permet treballar d'una manera determinada amb els CSS.
Efectes del pròleg XML
El pròleg XML, en teoria no hauria de causar cap efecte especial però a la pràctica en té.
Quan es declara un DOCTYPE correcte tots els navegadors moderns actuen seguint els estàndards. Dels antics que s'han de considerar, Internet Explorer 6/Windows també els segueix però els anteriors IE no.
En conseqüència els IE anteriors al 6 treballen amb un model de caixa erroni mentre que el 6 treballa amb el model correcte.
Quan el pròleg XML està declarat al document XHTML tots els IE passen a treballar amb el model de caixa erroni. Justament per això el declaro sempre.
D'aquesta manera puc simplificar els hacks CSS
El codi CSS
A l'haver declarat el pròleg XML el codi CSS per definir una caixa de 30em amb un padding de 0.7em seria de la següent manera:
div {
width: 30em;
padding: 0.7em;
}
html > body div /**/ {
width: 28.6em;
}
La primera declaració del width només la utilitzaran els IE mentre que la segona la llegiran Mozilla (i amics), Opera i Konqueror (i amics).
El comentari buit que hi ha al final del selector de fills és un hack per aturar la lectura de l'IE 5.01 que curiosament entén aquest tipus de selectors.
Al conseguir que IE actui sempre igual independentment de la versió simplifica la feina a l'hora de discriminar entre navegadors antics i moderns.
Comentaris