Después de todo, la especificación HTML5 es una especificación que acaba de definir, y algunos navegadores no pueden soportar las nuevas etiquetas y los nuevos atributos, especialmente las versiones IE8 y debajo del navegador. Aquí hay algunos métodos prácticos que utilizan las nuevas etiquetas de HTML5 en la página.
El navegador IE8 no ha agregado un nuevo soporte para las etiquetas HTML5, por lo que no puede mostrar directamente el contenido en la nueva etiqueta HTML5 en IE8. Afortunadamente, el IE8/IE7/IE6 admite la etiqueta generada por el Método Document.
var e = abbr, artículo, aparte, audio, lienzo, datalista, detalles, diálogo, eventsource, figura, pie de página, hgroup, marca, medidor, medidor, salida, progess, sección, tiempo, video.split (','); Var i = e.length;Después de que el navegador admite la nueva etiqueta, debe agregar el estilo predeterminado de la etiqueta:
Artículo, aparte, Caption, Figura, pie de página, encabezado, HGROUP, NAV, Sección {Pantalla: BLOCK} Mark {Background:#FF0;De esta manera, el código JavaScript simple y el código CSS pueden hacer que la versión IE8 y las siguientes del navegador admitan nuevas etiquetas en HTML5. Por supuesto, la mejor manera es usar directamente los marcos maduros.
<!-[si LT IE 9]> <script> src = http://html5shim.googlecode.com/svn/trunk/html5.js </script> <!
HTML5 en un sentido amplio incluye HTML5, CSS3 y nuevas API. Debido a que las nuevas características son más o menos compatibles con los navegadores, es necesario detectar si el navegador admite esta característica al usar las nuevas funciones. Cuando el navegador no admite nuevas funciones, puede ser apropiadamente compatible. En la actualidad, no hay un método uniforme para detectar el soporte de nuevas características. Afortunadamente, hay ingenieros entusiastas en el extranjero han desarrollado una serie de nuevas características de detección.
El principio del marco ModelNizr es detectar automáticamente si el navegador admite las nuevas características y agregar la clase correspondiente a la etiqueta <HTML>. Si el navegador admite una determinada característica, se agregará una clase que lleva el nombre del nombre característico. Al mismo tiempo, también generará un objeto llamado Modernizr. El marco Modernizr también contiene la función del marco HTML5SHIM, que puede permitir que los navegadores IE8 y debajo admitan nuevas etiquetas.
El método de uso de Modernizr es muy simple.
<script src = js/modelnizr.min.js> </script>
En segundo lugar, agregue una clase llamada No-JS en la etiqueta HTML:
<html class = no-js>
Si el navegador no deshabilita JavaScript, después de que el navegador carga la página, la clase en la etiqueta HTML reemplazará y agregará dinámicamente. Después de la carga, la etiqueta HTML es similar a la siguiente:
<html class = js Canvas CanvastText Geolocation rgba hsla no-multiplebgs borderraderradius boxshadow opacimanimamns no-cssgra dients no-cssflections csstransforms no-csstransforms3d no-csstransinionsir
En el código CSS, puede usar estas clases para agregar el código de compatibilidad hacia atrás.
#Nice {fondo: url (background-one.png) superior a la izquierda-x;}.}.Los lectores interesados en este marco pueden explorar el sitio web oficial de Modernizr para obtener ejemplos y métodos de uso cada vez más detallados.
El audio y los videos se usan comúnmente en la página, pero los navegadores son más confusos, por lo que aquí hay un tema separado. El audio y los videos son las características del soporte nativo del navegador anteriormente, de modo que la reproducción de audio y video ya no se limita a los enchufes de tercera parte, especialmente en plataformas móviles. El audio y los videos son un gran pastel, y todos los fabricantes de navegadores quieren distinguir el más grande, lo que también hace que el navegador distinga el formato de formatos de audio y video. La lista de formatos de audio de apoyo para el navegador es la siguiente:
Navegador | Versión | Formato de soporte |
Explorador de Internet | 9.0+ | MP3, AAC |
Cromo | 6.0+ | OGG Vorbis, MP3, WAV (9.0+) |
Firefox | 3.6+ | Ogg vorbis, wav |
Safari | 5.0+ | Mp3, aac, wav |
Ópera | 10.0+ | Ogg vorbis, wav |
Alrededor del 80%del navegador admite la etiqueta <Udio> de HTML5, pero no hay formato de audio uniforme. Desde la perspectiva del formato de soporte, todos los navegadores pueden reproducir audio en el elemento de audio.
<Audio Controls> <Source src = elvis.mp3 type = 'audio/mpeg; información, proporcionar enlaces de descarga, usar reproductor flash, etc.-> El navegador no admite <udio </code> etiquetas </audio>
El video también es similar al audio.
Navegador | Versión | Formato de soporte |
Explorador de Internet | 9.0+ | Mp4 |
Cromo | 6.0+ | MP4, WebM, OGG |
Firefox | 3.6+ | Webm, OGG |
Safari | 5.0+ | Mp4 |
Ópera | 10.0+ | Webm, OGG |
A juzgar por el formato de video respaldado por el navegador, la mejor manera es proporcionar dos formatos en formatos WebM y MP4. El código compatible es el siguiente:
<Video Controls> <fuente src = video.webm type = video/webm> <fuente src = video.mp4 type = video/mp4> <! ?
La versión anterior es la versión de compatibilidad del navegador de la nueva etiqueta de HTML5 presentada por Xiaobian. ¡Muchas gracias por su apoyo al sitio web de VEVB Wulin!