La spécification
HTML5 est une spécification qui vient d'être définie après tout, et certains navigateurs ne prennent pas en charge les nouvelles balises et les nouveaux attributs, en particulier les navigateurs IE8 et inférieurs. Ce qui suit est une introduction à la version compatible avec les navigateurs pour gérer les nouvelles balises HTML5. Les amis qui en ont besoin peuvent se référer à
Après tout, la spécification HTML5 est une spécification qui vient d'être définie. qui ne prend pas en charge les nouvelles balises et les nouvelles propriétés, en particulier pour 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.
Laissez le navigateur reconnaître les nouvelles balises dans la spécification HTML5
Le navigateur IE8 n'a pas ajouté la prise en charge des nouvelles balises HTML5, donc dans IE8 ne peut pas afficher directement le contenu des nouvelles balises HTML5. 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. Le code est le suivant :
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]) }
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block} mark{background:#FF0;color:#000}
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 le framework mature. Il existe actuellement plusieurs frameworks basés sur cette idée. Le plus utilisé est le framework html5shim. La méthode d'utilisation de html5shim est très simple. le cadre dans la partie d'en-tête de la page. Il suffit de citer :
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->
<script src="js/modernizr.min.js"></script>
<html class="no-js">
<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">
#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; }
, mais la compatibilité avec le navigateur est un peu déroutant, c'est donc un sujet distinct ici. L'audio et la vidéo sont des fonctionnalités relativement anciennes qui sont nativement prises en charge par les navigateurs, de sorte que la lecture audio et vidéo n'est plus limitée aux plug-ins tiers, en particulier sur les plates-formes mobiles. L'audio et la vidéo représentent une part importante du gâteau, et chaque fabricant de navigateur souhaite obtenir la plus grosse part. Cela a également conduit à une 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 🎜> |
10.0 | Ogg Vorbis, WAV |
|
浏览器 |
版本 |
支持格式 |
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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!