Après tout, la spécification HTML5 est une spécification qui vient de définir, et certains navigateurs ne peuvent pas prendre en charge les nouvelles étiquettes et les nouveaux attributs, en particulier les versions IE8 et ci-dessous du navigateur. Voici quelques méthodes pratiques qui utilisent les nouvelles balises de HTML5 dans la page.
Le navigateur IE8 n'a pas ajouté une nouvelle prise en charge des balises HTML5, il ne peut donc pas afficher directement le contenu dans la nouvelle balise HTML5 dans IE8. Heureusement, le IE8 / IE7 / IE6 prend en charge l'étiquette générée par la méthode Document.CreateElement.
var e = abbr, article, à part, audio, toile, datalist, détails, dialogue, eventsource, figure, pied de page, hgroup, mark, compteur, compteur, sortie, progression, section, temps, vidéo.split (','); Var i = e.Length;Une fois que le navigateur a pris en charge la nouvelle étiquette, vous devez ajouter le style par défaut de l'étiquette:
Article, à part, FigCaption, figure, pied de page, en-tête, hgroup, nav, section {affichage: block} Mark {background: # ff0;De cette façon, les deux simples code JavaScript et le code CSS peuvent rendre la version IE8 et ci-dessous du navigateur prennent en charge les nouvelles balises dans HTML5. Bien sûr, la meilleure façon d'utiliser directement les cadres matures.
<! - [Si lt ie 9]> <cript> src = http://html5shim.googlecode.com/svn/trunk/html5.js </cript> <!
HTML5 au sens large comprend HTML5, CSS3 et les nouvelles API. Étant donné que les nouvelles fonctionnalités sont plus ou moins compatibles avec les navigateurs, il est nécessaire de détecter si le navigateur prend en charge cette fonctionnalité lors de l'utilisation des nouvelles fonctionnalités. Lorsque le navigateur ne prend pas en charge de nouvelles fonctionnalités, il peut être correctement compatible. À l'heure actuelle, il n'y a pas de méthode uniforme pour détecter le support de nouvelles fonctionnalités. Heureusement, il y a des ingénieurs enthousiastes à l'étranger ont développé un certain nombre de nouvelles caractéristiques de détection.
Le principe du framework ModelNizr est de détecter automatiquement si le navigateur prend en charge les nouvelles fonctionnalités et d'ajouter la classe correspondante à la balise <html>. Si le navigateur prend en charge une certaine fonctionnalité, une classe nommée d'après le nom caractéristique sera ajoutée. En même temps, il générera également un objet appelé Modernizr. Le framework Modernizr contient également la fonction du framework HTML5Shim, qui peut permettre aux navigateurs IE8 et sous la prise en charge de nouvelles balises.
La méthode d'utilisation de Modernizr est très simple.
<script src = js / modelnizr.min.js> </ script>
Deuxièmement, ajoutez une classe nommée no js sur l'étiquette HTML:
<html class = no js>
Si le navigateur ne désactive pas JavaScript, une fois que le navigateur a chargé la page, la classe de la balise HTML remplacera et ajoutera dynamiquement. Après le chargement, la balise HTML est similaire à ce qui suit:
<html class = js Canvas CanvastText Geolocation rgba hsla no-multiplebgs borderraderradius boxshadow opacimanimamns no-cssgra dients no-cssreflection
Dans le code CSS, vous pouvez utiliser ces classes pour ajouter du code de compatibilité vers l'arrière.
#Nice {Background: URL (background-one.png) en haut à gauche Repeat-x;}.}.Les lecteurs intéressés par ce cadre peuvent parcourir le site officiel de Modernizr pour obtenir des exemples et des méthodes d'utilisation de plus en plus détaillés.
L'audio et les vidéos sont couramment utilisés sur la page, mais les navigateurs sont plus déroutants, alors voici un sujet distinct. L'audio et les vidéos sont les caractéristiques de la prise en charge native du navigateur plus tôt, de sorte que la lecture audio et vidéo ne se limite plus aux plug -ins troisième par partie, en particulier dans les plates-formes mobiles. L'audio et les vidéos sont un gros gâteau, et tous les fabricants de navigateurs veulent distinguer le plus grand, ce qui fait également distinguer le navigateur pour distinguer le format des formats audio et vidéo. La liste des formats audio de support pour le navigateur est le suivant:
Navigateur | Version | Format de support |
Internet Explorer | 9.0+ | Mp3, aac |
Chrome | 6.0+ | Ogg Vorbis, MP3, Wav (9.0+) |
Incendier | 3.6+ | Ogg vorbis, wav |
Safari | 5.0+ | Mp3, aac, wav |
Opéra | 10.0+ | Ogg vorbis, wav |
Environ 80% du navigateur prend en charge la balise <udio> de HTML5, mais il n'y a pas de format audio uniforme. Du point de vue du format de support, tous les navigateurs peuvent lire l'audio sur l'élément audio.
<Contrôles audio> <source src = elvis.mp3 type = 'Audio / mpeg; Informations, fournissez des liens de téléchargement, utilisez Flash Player, etc.
La vidéo est également similaire à l'audio.
Navigateur | Version | Format de support |
Internet Explorer | 9.0+ | MP4 |
Chrome | 6.0+ | MP4, webm, ogg |
Incendier | 3.6+ | Webm, ogg |
Safari | 5.0+ | MP4 |
Opéra | 10.0+ | Webm, ogg |
À en juger par le format vidéo pris en charge par le navigateur, la meilleure façon est de fournir deux formats dans les formats WebM et MP4. Le code compatible est le suivant:
<Video Controls> <source src = video.webm type = vidéo / webm> <source src = video.mp4 type = video / mp4> <! ?
Ce qui précède est la version de compatibilité du navigateur de la nouvelle étiquette de HTML5 introduite par Xiaobian. Merci beaucoup pour votre soutien pour le site Web VEVB Wulin!