Deixa el Doctype per posar els navegadors en el mode Quirks
Si heu estat dissenyant pàgines web durant més d'uns quants mesos, és probable que tingueu en compte la dificultat d'escriure una pàgina que tingui el mateix aspecte en tots els navegadors . De fet, això és impossible. Molts navegadors estaven escrits amb funcions especials que només podien manejar. O tenen maneres especials de manejar coses que són diferents de com altres navegadors els gestionen. Per exemple:
- Les capes es van crear per utilitzar-les en navegadors Netscape. No funcionen en cap altre navegador i, de fet, han estat obsolets en Netscape 6.x +.
- Els marcs en línia només es van crear originalment per a Internet Explorer i, per tant, s'han convertit en part de l'especificació HTML.
- Internet Explorer 6.0 afegeix un espai addicional (com ara un
) que envolten les etiquetes, tret que escriguis els continguts del div tot en una (llarga) línia. (IE 6 té moltes més peculiaritats, així com aquest). - Netscpe 4.7 no mostrarà taules que no estiguin escrites en HTML correcte, sinó que mostren una pàgina en blanc. Això s'ha solucionat a Netscape 6.
El problema per als desenvolupadors del navegador és que han de crear navegadors web que són compatibles amb pàgines web construïdes per navegadors antics. Per fer front a aquest problema, els fabricants d'exploradors van crear modes per als operadors que operen. Aquests modes es defineixen per la presència o absència d'un element DOCTYPE i el que DOCTYPE crida.
Convocatòria de DOCTYPE i "Modes de silenci"
Si posa el següent DOCTYPE a la seva pàgina web:
Els navegadors moderns (Android 1+, Chrome 1+, IE 6+, iOS 1+, Firefox 1+, Netscape 6+, Opera 6+, Safari 1+) interpretarien això de la següent manera:
- Com que hi ha un DOCTYPE correctament escrit, això provoca el mode d'estàndards.
- Es tracta d'un document HTML 4.01 Transicional
- Com que està en mode d'estàndards, la majoria dels navegadors faran que el contingut sigui compatible o compleixi amb HTML 4.01 Transitional
I si posa aquest DOCTYPE al vostre document:
Això indica als navegadors moderns que voleu mostrar la vostra pàgina HTML 4.01 en estricte compliment de la DTD.
Aquests navegadors entraran en el mode "estricte" o "estandard" i mostraran la pàgina d'acord amb els estàndards. (Per tant, per a aquest document, les etiquetes com el navegador podria ignorar completament, ja que l'element FONT ha quedat obsolet en HTML 4.01 Strict).
Si deixeu el DOCTYPE completament, els navegadors s'envien automàticament al mode "peculiaritats".
La taula següent mostra quins són els navegadors habituals quan es presenten amb diferents declaracions comunes de DOCTYPE.
Microsoft ho fa més difícil
Internet Explorer 6 també té la característica que si poses alguna cosa per sobre de la declaració de DOCTYPE, entraran en mode peculiar. Així, aquests dos exemples posaran l'IE 6 en mode de peculiaritats, tot i que les declaracions de DOCTYPE afirmen que són de manera estricte:
i el XHTML 1.1 DOCTYPE:
A més, si passeu l'IE6, teniu la "característica" que Microsoft ha afegit a IE8 i IE9: commutació d'elements META i llista negra del lloc web. De fet, aquestes dues versions del navegador tenen fins a set (!) Diferents modes:
- Mode d'expressions IE 5.5 (IE 8 i 9)
- Modalitat estàndard IE 7 (IE 8 i 9)
- IE 8 mode gairebé estàndard (IE 8 i 9)
- IE 8 mode d'estàndards (IE 8 i 9)
- IE 9 pràcticament mode d'estàndards (IE 9)
- Mode estàndard IE 9 (IE 9)
- Mode XML (IE 9)
IE 8 també va introduir el "Mode de compatibilitat" on l'usuari podria triar canviar el model de representació al mode IE 7. De manera que, fins i tot si configureu el mode que voleu configurar usant els elements DOCTYPE i META, la vostra pàgina encara es pot tornar a introduir en un mode menys compatible amb els estàndards.
Què és el mode Quirks?
El mode de peculiaritats s'ha creat per ajudar-vos a tractar totes les prestacions estranyes i compatibles amb el navegador que no compleixen i els hacks que els dissenyadors web utilitzaven per fer front a aquestes coses. La preocupació que els fabricants del navegador tenia era que, si canviaven els seus navegadors al compliment de la especificació completa, els dissenyadors web es deixarien enrere.
En configurar la modificació de DOCTYPE i el mode "Quirks", els dissenyadors web poden triar com volien que els navegadors representessin el seu codi HTML.
Efectes del mode quirks
Hi ha diversos efectes que la majoria dels navegadors fan servir al mode Quirks:
- En alguns navegadors, el model de caixa canvia a la versió IE 5.5 del model de caixa en mode peculiar.
- Alguns navegadors no hereten estils en taules
- El mode de peculiaritat afecta l'anàlisi de disseny de CSS i CSS de manera espectacular, si esteu convertint les pàgines al mode estàndard a partir del mode de peculiaritats, assegureu-vos de provar el disseny de CSS i analitzar-lo de manera extensiva.
- Mireu els canvis a la seqüència de comandaments quan estigui en mode peculiar. Firefox canvia la manera com funciona l'atribut id, per exemple. IE8 i IE9 tenen canvis molt dramàtics en les seqüències d'ordres en mode peculiar.
També hi ha una diferència en "Gairebé el mode d'estàndards:"
- L'alçada de les cel·les de la taula amb només imatges a l'interior es calcula diferent del mode estàndard.
Com triar un DOCTYPE
Aneu a més detalls en el meu article DOCTYPE List, però aquí hi ha algunes regles generals:
- Sempre trieu primer el mode estàndards. I l'estàndard actual que haureu d'utilitzar HTML5 és: A menys que tingui un motiu específic per evitar l'ús del DOCTYPE HTML5, això és el que hauria d'estar utilitzant.
- Aneu a un estricte HTML 4.01 si necessiteu validar elements hereus o voleu evitar noves funcions per alguna raó:
- Si teniu retallades d'imatges en una taula i no voleu corregir-les, aneu a Transitional HTML 4.01:
- No escriguis les pàgines deliberadament en mode peculiar. Utilitzeu sempre un DOCTYPE. Això us estalviarà en el temps de desenvolupament en el futur, i realment no té cap benefici. IE6 està perdent popularitat i dissenyant per a aquest navegador (que és essencialment el que el disseny està en el mode de peculiaritats), s'està limitant, els vostres lectors i les vostres pàgines. Si heu d'escriure per a IE 6 o 7, utilitzeu comentaris condicionals per donar-los suport, en lloc d'obligar els navegadors moderns al mode de peculiaritats.
Per què utilitzar DOCTYPE
Una vegada que sapigueu que aquest tipus de commutació de DOCTYPE funciona, podeu afectar les vostres pàgines web de manera més directa mitjançant un DOCTYPE que indica el que el navegador pot esperar de la vostra pàgina. A més, una vegada que comenceu a utilitzar DOCTYPE, escriureu un codi HTML que estigui més proper a ser vàlid (encara heu de validar-lo). I per escrit XHTML vàlid, incita els fabricants d'exploradors a crear navegadors compatibles amb estàndards.
Versions del navegador i mode d'expressió
DOCTYPE | Android Chrome Firefox IE 8+ iOS Òpera 7.5+ Safari | IE 6 IE 7 Òpera 7 | Netscape 6 |
---|---|---|---|
Cap | Mode de peculiaritats | Mode de peculiaritats | Mode de peculiaritats |
HTML 3.2 | |||
Mode de peculiaritats | Mode de peculiaritats | Mode de peculiaritats | |
HTML 4.01 | |||
Transicional | Mode d'estàndards * | Mode d'estàndards * | Mode d'estàndards |
Transicional | Mode de peculiaritats | Mode de peculiaritats | Mode de peculiaritats |
Estricte | Mode d'estàndards | Mode d'estàndards * | Mode d'estàndards |
Estricte | Mode d'estàndards | Mode d'estàndards * | Mode d'estàndards |
HTML5 | |||
Mode d'estàndards | Mode d'estàndards * | Mode de peculiaritats | |
* Amb aquest DOCTYPE, els navegadors són compatibles amb els estàndards, però tenen alguns problemes, assegureu-vos de provar. Això també es coneix com "Gairebé el mode d'estàndards". |