Problèmes de compatibilité du navigateur avec les nouveaux onglets H5-Tutoriel H5-php.cn

Problèmes de compatibilité du navigateur avec les nouveaux onglets H5

php中世界最好的语言

Libérer： 2018-03-26 14:39:30

original

2541 Les gens l'ont consulté

Cette fois, je vais vous présenter les problèmes de compatibilité du navigateur du nouvel onglet H5. Quelles sont les précautions face aux problèmes de compatibilité du navigateur du nouvel onglet H5. Voici des cas pratiques, prenons un. regarder.

Après tout, la spécification HTML5 est une spécification qui vient d'être définie, et certains navigateurs ne prennent pas en charge les nouvelles balises et attributs, notamment les navigateurs IE8 et inférieurs. Ce qui suit présente quelques méthodes pratiques pour utiliser les nouvelles balises HTML5 dans les pages. Le but est de permettre aux nouvelles balises HTML5 de bénéficier d'une prise en charge limitée dans les navigateurs de bas niveau et de ne pas affecter l'ensemble de la fonction de la page.

Laisser le navigateur reconnaître les nouvelles balises dans la spécification HTML5

Dans le navigateur IE8 La prise en charge des nouvelles balises HTML5 n'a pas encore été ajoutée, de sorte que le contenu des nouvelles balises HTML5 ne peut pas être affiché directement dans IE8. Heureusement, IE8/IE7/IE6 prend en charge les balises générées via la méthode document.createElement. Vous pouvez utiliser cette fonctionnalité pour que ces navigateurs prennent en charge les nouvelles balises HTML5 :

var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
    document.createElement(e[i])
}

Copier après la connexion

<.> Une fois que le navigateur prend en charge la nouvelle balise, vous devez ajouter le style par défaut de la balise :

article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
mark{background:#FF0;color:#000}

Copier après la connexion

De cette façon, deux simples morceaux de code

JavaScript et de code CSS peuvent être pris en charge par les navigateurs IE8 et inférieurs. Nouvelles balises en HTML5. Bien sûr, le meilleur moyen est d'utiliser directement un framework mature.Il existe actuellement plusieurs frameworks basés sur cette idée. Le framework le plus couramment utilisé est le framework html5shim. La méthode d'utilisation de html5shim est très simple. dans la partie en-tête de la page :

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

Copier après la connexion

Rétrocompatibilité des nouvelles fonctionnalités en HTML5

HTML5 généralisé, il inclut HTML5, CSS3 et de nouvelles API. Étant donné que les nouvelles fonctionnalités peuvent présenter des problèmes de compatibilité avec le navigateur, il est très nécessaire de vérifier si le navigateur prend en charge cette fonctionnalité lors de l'utilisation de nouvelles fonctionnalités. Lorsque le navigateur ne prend pas en charge les nouvelles fonctionnalités, un traitement de compatibilité ascendante approprié peut être effectué. Actuellement, il n'existe aucune méthode unifiée pour détecter la prise en charge de nouvelles fonctionnalités. Certaines nouvelles fonctionnalités ont des API correspondantes qui peuvent être identifiées, et certaines nouvelles fonctionnalités ne peuvent être identifiées que par certaines techniques. Heureusement, des ingénieurs enthousiastes à l'étranger ont développé plusieurs cadres pour détecter de nouvelles fonctionnalités, parmi lesquels Modernizr offre une précision de détection et un taux d'utilisation plus élevés.

Le principe du framework Modernizr est de détecter automatiquement si le navigateur prend en charge de nouvelles fonctionnalités et d'ajouter la classe correspondante à la balise Si le navigateur prend en charge une fonctionnalité, une classe nommée avec le nom de la fonctionnalité sera ajoutée. Sinon, une classe nommée avec le préfixe « no- » plus le nom de la fonctionnalité sera ajoutée. Dans le même temps, un objet nommé modernizr sera également généré. En jugeant les valeurs d'attribut représentant chaque fonctionnalité sur cet objet, vous pourrez savoir si le navigateur actuel prend en charge cette nouvelle fonctionnalité. Le framework Modernizr inclut également les fonctions du framework html5shim, qui permet aux navigateurs IE8 et inférieurs de prendre en charge de nouvelles balises.

La méthode d'utilisation de Modernizr est très simple, introduisez d'abord le fichier JavaScript du framework dans la partie head :

<script src="js/modernizr.min.js"></script>

Copier après la connexion

Deuxièmement, ajoutez un nom nommé no-js sur le <.>balise html

Classes :

Si JavaScript n'est pas désactivé dans le navigateur, les classes de la balise html seront remplacées dynamiquement et ajoutées une fois que le navigateur aura chargé la page. Après le chargement, la balise html ressemble à ce qui suit :

<html class="no-js">

Copier après la connexion

Dans le code CSS, vous pouvez ajouter du code de compatibilité ascendante en utilisant ces classes. Ce qui suit est un exemple d'utilisation de plusieurs images d'arrière-plan :

<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">

Copier après la connexion

Les lecteurs intéressés par ce framework peuvent parcourir le site officiel de Modernizr pour des exemples plus détaillés et des méthodes d'utilisation.

#nice {
    background: url(background-one.png) top left repeat-x;
}
.multiplebgs #nice {
    background: url(background-one.png) top left repeat-x,url(background-two.png) bottom left repeat-x;
}

Copier après la connexion

Compatibilité audio et vidéo

, mais la compatibilité des navigateurs est assez déroutante, il s'agit donc d'un sujet distinct. L'audio et la vidéo sont des fonctionnalités relativement anciennes qui sont nativement prises en charge par les navigateurs. La lecture audio et vidéo n'est donc plus limitée aux plug-ins tiers, en particulier sur les plates-formes mobiles. L'audio et la vidéo sont un gros morceau de gâteau, et chaque fabricant de navigateur souhaite obtenir la plus grosse part. Cela a également conduit à la différenciation des formats audio et vidéo pris en charge par les navigateurs. La liste des formats audio pris en charge par le navigateur est la suivante :

Navigateur	Version	Formats pris en charge
Internet Explorer	9.0+	MP3, AAC
Chrome	6.0+	Ogg Vorbis, MP3, WAV (9.0+)
Firefox	3.6+	Ogg Vorbis, WAV
Safari	5.0+	MP3, AAC, WAV
Opéra	10.0+	Ogg Vorbis, WAV

大约有80%的浏览器支持HTML5的

<audio controls>
    <source src="elvis.mp3" type=&#39;audio/mpeg; codecs="mp3"&#39;>
    <source src="elvis.oga" type=&#39;audio/ogg; codecs="vorbis"&#39;>
    <!-- 向后兼容代码：如，显示提示信息、提供下载链接使用flash播放器等 -->
    浏览器不支持<code>audio</code>标签
</audio>

Copier après la connexion

视频也有和音频类似的状况，如下是浏览器支持视频的格式列表：

浏览器	版本	支持格式
Internet Explorer	9.0+	MP4
Chrome	6.0+	MP4,WebM,Ogg
Firefox	3.6+	WebM,Ogg
Safari	5.0+	MP4
Opera	10.0+	WebM,Ogg

从浏览器支持的视频格式来看，最佳的方式是提供WebM和MP4两种格式的视频。兼容代码如下：

<video controls>    
    <source src=video.webm type=video/webm>    
    <source src=video.mp4 type=video/mp4>      
    <!—向后兼容代码: -->      
    <iframe width="480" height="360" src="http://www.youtube.com/embed/xzMUyqmaqcw?rel=0" frameborder="0" allowfullscreen></iframe>  
</video>

Copier après la connexion

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！