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
Comentat per faemino el 19/10/04
Vols dir que navegadors no IE entendran les dues sentencies CSS, pero es quedaran amb l'última?
Per que fas un div de 30em i després un de 28.6em si son el mateix div pero per diferent navegador?
Comentat per Gonzalo el 19/10/04
Un perill d'aquesta tècnica (separar IE de la resta) és que no se sap què passarà amb la propera versió d'IE. Potser sí que reconeixerà la sintaxi HTML > body, però continuarà fent erròniament el box model.
Una altra possibilitat és fer servir un DOCTYPE estricte però sense la 'processing instruction' inicial ([xml version=...]), i així IE6 es comporta d'acord als estàndards. Ja no cal el CSS hack per al box model, excepte per IE5. Afegir CSS específic per a IE5 és relativament fàcil, i postser s'eviten futurs maldecaps.
Jo també he fet servir fins ara la tècnica que descrius, però sempre em fa ràbia fer servir hacks, i especialment amb CSS. Em recorda massa al malson de la compatibilitat amb Netscape 4, fa uns anyets.
Comentat per faemino el 19/10/04
I amb aixó que dius Gonzalo, et valida la pàgina?
Comentat per are el 19/10/04
Faemino: els navegadors moderns llegeixen les dues regles i es queden amb la última. Al segon especifico una amplada de 28.6em perque aquest valor sumat a 0.7em del padding esquerra més 0.7em del padding dret sumen 30em en total.
Gonzalo: Si en algun moment surt un IE nou s'hauran de refer moltes coses però en aquest cas com a molt s'haura d'afegir una sentència.
A mi tampoc m'agrada gens utilitzar hacks però si vull mostrar un disseny igual en aquest rertori de navegadors és l'única manera que connec.
A diferència dels Anys Foscos aquí no es determina el nom que mostra el motor sinó que dones regles redundants que saps qui les agafa i qui no.
Si l'IE 7 agafés els selectors de fills i actués d'acord amb els estàndards amb el pròleg XML declarat no caldria cap canvi. Si només corregis un dels dos problemes s'hauria de buscar un nou "filtre" però el que és segur és que es podria accedir al contingut que és el fonamental.
Comentat per Gonzalo el 19/10/04
are (Arnau?):
Estic d'acord amb tu amb què aquest hack no és excessivament delicat. Pero segurament t'hi has trobat, si has de començar a fer hacks CSS per cada navegador pots arribar a un codi molt i molt lleig. Per això sempre que puc busco solucions que evitin els hacks. Igualment només volia oferir una segona alternativa, crec que la que proposaves tu des del principi és molt vàlida.
Per cert, felicitats pel disseny del teu site, molt clar i agradable.
Comentat per are el 20/10/04
Són molt benvingudes totes les alternatives! per descomptat.
Certament primer cal buscar una solució que no necessiti de hacks però justament amb el model de caixa el tema està pelut ;)