Cómo abordar la compatibilidad del navegador con las nuevas etiquetas html5
En primer lugar, el problema de mostrar etiquetas HTML5 en los navegadores
En esta etapa, el mayor problema que puede encontrar al usar etiquetas HTML5 es cómo manejarlas correctamente en los navegadores que no lo hacen. No es compatible con las nuevas etiquetas. Cuando utilizamos elementos HTML5 en nuestras páginas, podemos obtener tres resultados diferentes.
Resultado 1: La etiqueta se trata como un error y se ignora. Luego, al construir el DOM, se considerará que esta etiqueta no existe.
Resultado 2: la etiqueta se tratará como un error, se seguirá creando de acuerdo con el código esperado al crear el DOM y la etiqueta HTML se construirá como un elemento en línea (es decir, aunque no se reconocerá, pero en el código La etiqueta de sección aún creará un nodo de sección correspondiente en el DOM, pero será un elemento en línea).
Resultado 3: La etiqueta se reconoce como una etiqueta HTML5 y luego se reemplaza por un nodo DOM. El DOM se construye como se esperaba y se aplican estilos apropiados a las etiquetas (elementos a nivel de bloque en la mayoría de los casos).
Para un ejemplo concreto, consideremos el siguiente código:
ltdiv class="outer "
ltsection gt
lth 1 gt; título lt/h 1 gt;
ltp gttext lt/p gt;
lt/sección gt
lt/div gt; p>
Muchos navegadores (como Firefox
3.6 y Safari4) usarán div como el elemento más externo al analizar, y luego habrá una sección no reconocida en el div, que se creará en el DOM, existe como un elemento en línea. Tanto el elemento h1 como el P son elementos secundarios del elemento de sección. Como la sección existe en el DOM, su estilo también se puede modificar. Esta situación corresponde al resultado 2.
Las versiones anteriores a IE9 considerarán la etiqueta de sección como un error y la ignorarán directamente. Luego, las etiquetas h1 y P se analizarán y se convertirán en nodos secundarios de la etiqueta div. lt/section gt; también se considerará un error y se omitirá directamente. El código que realmente funciona en estos navegadores es:
ltdiv class="outer "
lth 1 gt; gttext lt/p gt;
lt/div gt;
Entonces, además del hecho de que la estructura DOM generada por la versión anterior de IE es diferente a la de otros navegadores, no reconoce etiquetas. La tolerancia a fallos sigue siendo muy buena. Debido a que el nodo de sección no está integrado en el árbol DOM, no puede agregarle estilos. El resultado correspondiente en este caso es 1.
Por supuesto, los navegadores que admiten HTML5, como IE9, Firefox4 y Safari5, crearán la estructura DOM correcta y luego a estas etiquetas se les agregarán los estilos predeterminados definidos en la especificación HTML5 de forma predeterminada.
Entonces, el mayor problema al que nos enfrentamos es que el mismo código forma diferentes estructuras DOM en diferentes navegadores, incluidos diferentes estilos.
2. Cómo solucionar el problema de incompatibilidad de las etiquetas HTML5
Quizás mucha gente se esté preguntando: ¿Por qué los navegadores antiguos no pueden reconocer estas etiquetas? De hecho, la falla no es del navegador, porque no existía dicha etiqueta en ese momento, por lo que no se pudo reconocer correctamente. Este reconocimiento de etiqueta inusual provocó que la estructura DOM fuera anormal.
En este sentido, se han propuesto muchas soluciones para utilizar elementos HTML5 en la página actual. Cada solución encuentra algunos problemas específicos para ser compatible. También quiero compartir contigo en el blog de Ma:
1. Implementar el reconocimiento de etiquetas.
Ma hizo una vez una prueba (tomando IE8 como ejemplo), donde el título y el contenido de un artículo estaban en azul, y el contenido del artículo estaba etiquetado. El código es el siguiente:
lt! DOCTYPE html gt
lthtml xmlns = "/SVN/trunk/html 5 . js " gt/script gt
lt! [endif]- gt;
Por supuesto, también puedes descargar este archivo directamente a tu propio sitio web. ¡Pero este archivo debe llamarse en la etiqueta head, porque IE debe conocer estos elementos para analizarlos de manera efectiva! Pero Ma Xianghai también le recuerda que debe agregar el siguiente código a su archivo CSS; de lo contrario, pueden ocurrir algunos problemas inexplicables.
Encabezado, navegación, artículo, sección, lateral, pie de página {display: block;}
Además, excanvas.js es un script escrito por Google para admitir el elemento canvas de IE6. Ma Xianghai les contará más ejemplos de esto en el futuro. Los amigos que estén interesados pueden probarlo.
(2). Utilice Kill IE6
Además, también puede utilizar la familia KILL IE6, siempre que su navegador permita la ejecución de archivos JS. El método es muy sencillo, ¡en
lt! -if LTE IE 6]>;
ltscript src = "/SVN/trunk/letskillie 6.zh_cn.pack.js" gt;lt/script gt;
lt ! [endif]- gt;
Dice
Lte: abreviatura de menor o igual que, que significa menor o igual que.
Lt: Es la abreviatura de less than, que significa menos que.
Gte: es la abreviatura de mayor o igual a, que significa mayor o igual a.
Gt: Es la abreviatura de mayor que, que significa mayor que.
! Significa no igual, que es lo mismo que el juicio no igual en JavaScript.
Para ser honesto, a Ma Xianghai no le gusta esta solución que usa JavaScript porque destruye mi principio fundamental del desarrollo de aplicaciones web: no debemos usar JavaScript para controlar el diseño. Esto no solo crea una mala experiencia de usuario para los usuarios que tienen scripts deshabilitados, sino que, lo que es más importante, si queremos que el código de nuestra aplicación web esté preparado para el futuro y sea altamente mantenible, tenemos que separar las partes relevantes de la vista. Esta solución es muy útil para crear la misma estructura DOM en todos los navegadores y garantizar que JavaScript y CSS ejecuten los mismos resultados en todas partes, pero esta ventaja no cambia mi desaprobación de este enfoque.
3. Cracking de espacios de nombres
Nunca falta la capacidad de utilizar hacks para resolver problemas. Existen otras técnicas en IE que permiten al navegador reconocer etiquetas desconocidas. Este enfoque en el diario de Elco Klingen inicialmente llamó mucho la atención. Esta técnica implica espacios de nombres en formato XML y utiliza elementos con el prefijo del espacio de nombres.
Por ejemplo:
lthtml xmlns = " http://www . w3 . org/1999/XHTML " xmlns: html 5 = " http://www . w3 . org/html 5/" gt;
ltbody gt
lthtml 5: sección gt;
lt! -Contenido- gt;
lt/html 5: sección gt;
lt/body gt;
lt/html gt;
La desventaja de este método es obvia: el espacio de nombres en formato XML debe usarse en el documento HTML y lo mismo debe hacerse en css:
html5\:section {
p>Display: block;
}
Comentario de mamá: No es así como espero que los desarrolladores web escriban código. Si bien esta es una solución excelente, hace que la aplicación no sea natural. No quiero ver un archivo lleno de elementos con espacios de nombres.
4. Tecnología Bulletproof (tecnología de chaleco antibalas)
Para ser honesto, esta es la primera vez que entro en contacto con esta tecnología. Recomiendo agregar un elemento div interno a todos los nuevos elementos HTML5 a nivel de bloque y luego agregar una clase CSS que reemplace el elemento HTML con este elemento (similar a usar una armadura debajo), por ejemplo:
ltsection gt
ltdiv class="sección "
lt! -content- gt;
lt/div gt;
lt/section gt;
Al aplicar estilos, Tantek recomienda agregar estilos directamente a los divs, mientras que No se trata de agregar estilos a nuevos elementos.
Usos recomendados:
. Parte {
Color: azul;
}
En lugar de:
Parte {
Color: Azul ;
}
El principio de esta solución es transferir el método de aplicación de estilo original a un elemento que representa etiquetas HTML5 de una manera sencilla. Como normalmente no aplico estilos a elementos mediante nombres de etiquetas, Ma también apoya plenamente esta sugerencia.
Ma Xianghai cree que la desventaja de esta solución es que diferentes navegadores construyen diferentes estructuras DOM, por lo que debes tener mucho cuidado al escribir JavaScript y CSS. Diferentes navegadores pueden arrojar resultados diferentes al obtener nodos secundarios o nodos principales. Especialmente en el siguiente código:
ltdiv class="outer "
ltsection gt
ltdiv class="section main "
¡es! -Contenido- gt;
lt/div gt; lt/section gt;
lt/div gt
5.
También existen algunos métodos, como intentar utilizar la técnica opuesta al esquema de Tanteck, que consiste en poner elementos HTML5 dentro de elementos div, como por ejemplo:
ltdiv class=" sección "
p>
ltsección gt
lt! -Contenido- gt;
lt/section gt;
ltdiv gt
La única diferencia en esta solución es la posición del elemento HTML5, todo lo demás es lo mismo . Los partidarios a quienes les gusta esta tecnología creen que su consistencia es muy buena (aplicable a todos los elementos, incluido El siguiente código se utiliza como método de compatibilidad para IE8.
ltmeta http-equiv = " Un gran paso adelante, pero es un hecho indiscutible que IE8 todavía tiene una serie de fenómenos de renderizado extraños.
Los métodos disponibles en X-UA-Compatible son:
ltmeta http-equiv = " X-. Compatible con UA " content = " IE = 6 " >>p>
ltmeta http-equiv = " X-UA-Compatible " content = " IE = 7 " >>p>
ltmeta http-equiv = " X-UA-Compatible " content = " IE = 8 " >>p>
ltmeta http-equiv = " p>
La última línea siempre se muestra en el modo de la última versión de IE
Agregar
ltmeta http-equiv = " X-UA-Compatible " content = " IE = emular. IE 7 " />
ltmeta http-equiv = " X-UA -Compatible " content = " IE = emulate ei8 "
Sin embargo, el uso del modo de emulación se centra más en esto.
Por lo que todavía está en uso
ltmeta http-equiv = " X-UA-Compatible " content = " IE = emular IE 7 "
Conviértete en Preferido
7. /p>
Mi objetivo principal es asegurarme de que solo necesito modificar la parte HTML. ¿Por qué sucede esto? ¿Cuantos más puntos de vista de una aplicación web deban modificarse, más probable será que se produzcan errores? Limitar los cambios a una vista también limitará la aparición de errores y reducirá el alcance de la búsqueda de errores incluso si ocurren. Si una vista está desfigurada, sé que es porque agregué un elemento de sección, no porque se vio afectada por cambios en el archivo CSS.
Después de analizar todas estas soluciones y experimentar y diseñar un poco, volví a la solución de Tantek. Esta es la única solución que sólo requiere modificar el HTML sin tocar el CSS y el HTML. Ahora, hice algunas mejoras basadas en su plan y logré el efecto que quiero.
En primer lugar, no aplicaré estilo a la clase que representa el elemento HTML5 (por lo que no usaré la parte like.). Mantuve el elemento div y luego agregué una clase semántica para aplicar los estilos y lo usé como enlace para acciones de JavaScript. Por ejemplo, este código:
ltdiv class="content "
lt! -Contenido- gt;
lt/div gt;
Después de la mejora:
ltsection gt
ltdiv class="contenido de la sección "
¡Es! -Contenido- gt;
lt/div gt;
lt/section gt;
Después de esta modificación, todavía lo uso. El contenido sirve como punto de entrada para estilos y guiones. Esto también significa que no necesito modificar CSS y JavaScript.
Luego, para evitar la situación de la etiqueta hgroup, elegí no usar esta etiqueta. No puedo encontrar ninguna página que use esta etiqueta entre todas las páginas existentes. Dado que la etiqueta hgroup solo puede contener elementos de encabezado, si realmente desea usar esta etiqueta, es muy seguro usar el grupo HR para incluirse a sí mismo (suponiendo que no contenga otros elementos a nivel de bloque).
Pasé mucho tiempo en el blog de Ma probando si es mejor la protección antibalas o la protección antibalas inversa. El principal factor decisivo en mi elección fue que la protección contra balas inversa requería que agregara código CSS. Para aquellos elementos donde se crearon nodos DOM para el marcado HTML5 pero no se aplican estilos predeterminados, incluir elementos HTML5 a nivel de bloque dentro de elementos div arruina mi diseño en muchos casos porque los nodos DOM creados son elementos en línea. Necesito agregar explícitamente reglas CSS para hacer de este nodo un elemento a nivel de bloque para que pueda diseñarse normalmente, lo que va en contra de mi intención original de no modificar el archivo CSS.
Ma Zai comentó en su blog:
En mi investigación, utilicé varias páginas y luego utilicé tecnología mejorada a prueba de balas en estas páginas. Lo probé en diseños simples y complejos, con y sin interacción de JavaScript. En cada caso, solo tuve que modificar el HTML para que la página se comportara correctamente (no fue necesario modificar JavaScript ni CSS). Entonces, ¿qué pasa con el problema de los nodos secundarios y los nodos principales? Curiosamente, no encontré tal problema en mis pruebas.
La razón es simple, debido a mi dura actitud hacia el código. Hice una doble verificación cuidadosamente:
(1), el nombre de la etiqueta y el ID no se usarán para aplicar el estilo (solo use la clase).
(2) Intente elegir selectores CSS de uso común y minimice el uso de selectores.
(3) El código JavaScript no depende de una estructura DOM específica.
(4) Los nombres de etiquetas no se utilizan para operar DOM.
Otra cosa interesante que noté es que uso elementos HTML5 como contenedores. Estos nuevos elementos son sólo los límites de los módulos funcionales. Debería dedicar la mayor parte de su tiempo a escribir estilos y scripts para elementos internos en lugar de trabajar con estilos y scripts entre módulos. Debido a que las etiquetas JavaScript y CSS de Ma blog se aplican dentro del contenedor, todo se ve fluido. Creo que este es un sitio web con código de muy alta calidad.