Rumah > Artikel > hujung hadapan web > Mengendalikan isu keserasian penyemak imbas dengan teg baharu HTML5
Mengendalikan isu keserasian penyemak imbas dengan teg baharu HTML5
- PHPzasal
- 2016-05-16 15:50:561162semak imbas
Lagipun, spesifikasi HTML5 ialah spesifikasi yang baru ditakrifkan. Masih terdapat beberapa penyemak imbas yang tidak dapat menyokong teg baharu dan atribut baharu, terutamanya pelayar IE8 dan ke bawah. Berikut memperkenalkan beberapa kaedah praktikal untuk menggunakan teg baharu HTML5 dalam halaman Tujuannya adalah untuk membenarkan teg baharu dalam HTML5 menerima sokongan terhad dalam pelayar peringkat rendah dan tidak menjejaskan keseluruhan fungsi halaman.
Biar penyemak imbas mengenali teg baharu dalam spesifikasi HTML5
Dalam pelayar IE8 Sokongan untuk teg baharu HTML5 belum lagi ditambah, jadi kandungan dalam teg baharu HTML5 tidak boleh dipaparkan terus dalam IE8. Nasib baik, IE8/IE7/IE6 menyokong teg yang dihasilkan oleh kaedah document.createElement Anda boleh menggunakan ciri ini untuk menjadikan penyemak imbas ini menyokong teg baharu 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])
}
Selepas penyemak imbas menyokong teg baharu, anda juga perlu menambah gaya lalai teg:
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
mark{background:#FF0;color:#000}
Dengan cara ini, dua JavaScript mudah kod dan kod CSS boleh menjadikan Pelayar IE8 daripada dan versi ke bawah menyokong teg baharu dalam HTML5. Sudah tentu, cara terbaik ialah menggunakan rangka kerja matang pada masa ini. Rangka kerja yang paling biasa digunakan ialah rangka kerja html5shim. Hanya menambah rujukan kepada rangka kerja di bahagian kepala halaman:
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->
Keserasian ke belakang bagi ciri baharu dalam HTML5
HTML5 dalam erti kata yang luas merangkumi HTML5, CSS3 dan API baharu. Oleh kerana ciri baharu akan mempunyai lebih banyak atau kurang isu keserasian penyemak imbas, adalah sangat perlu untuk menyemak sama ada penyemak imbas menyokong ciri ini apabila menggunakan ciri baharu. Apabila penyemak imbas tidak menyokong ciri baharu, pemprosesan keserasian ke belakang yang sesuai boleh dilakukan. Pada masa ini, tiada kaedah bersatu untuk mengesan sokongan untuk ciri baharu Sesetengah ciri baharu mempunyai API sepadan yang boleh dikenal pasti dan beberapa ciri baharu hanya boleh dikenal pasti melalui beberapa teknik. Nasib baik, jurutera yang bersemangat di luar negara telah membangunkan pelbagai rangka kerja untuk mengesan ciri baharu. Antaranya, Modernizr mempunyai ketepatan pengesanan dan kadar penggunaan yang lebih tinggi.
Prinsip rangka kerja Modernizr adalah untuk mengesan secara automatik sama ada penyemak imbas menyokong ciri baharu dan menambah kelas yang sepadan pada teg 100db36a723c770d327fc0aef2ce13b1 Jika penyemak imbas menyokong ciri, kelas yang dinamakan dengan nama ciri akan ditambah. Pada masa yang sama, objek bernama modernizr juga akan dihasilkan Dengan menilai nilai atribut yang mewakili setiap ciri pada objek ini, anda boleh mengetahui sama ada penyemak imbas semasa menyokong ciri baharu ini. Rangka kerja Modernizr juga termasuk fungsi rangka kerja html5shim, yang membenarkan pelayar IE8 dan ke bawah menyokong teg baharu.
Kaedah menggunakan Modernizr adalah sangat mudah Pertama, perkenalkan fail JavaScript rangka kerja di bahagian kepala:
<script src="js/modernizr.min.js"></script>
Kedua, tambah. nama kepada teg html Kelas No-js:
<html class="no-js">
Jika penyemak imbas tidak melumpuhkan JavaScript, kelas pada teg html akan diganti secara dinamik dan ditambah selepas penyemak imbas memuatkan halaman. Selepas memuatkan, teg html kelihatan seperti berikut:
<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">
Dalam kod CSS, anda boleh menambah kod keserasian ke belakang dengan menggunakan kelas ini menggunakan berbilang imej latar belakang. Contoh:
#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;
}
Pembaca yang berminat dengan rangka kerja ini boleh melayari laman web rasmi Modernizr untuk contoh dan penggunaan yang lebih terperinci.
Keserasian audio dan video
Audio dan video ada pada halaman Teg multimedia biasanya digunakan dalam media, tetapi keserasian penyemak imbas agak mengelirukan, jadi ia dianggap sebagai topik yang berasingan di sini. Audio dan video ialah ciri yang agak awal yang disokong secara asli oleh penyemak imbas, jadi main balik audio dan video tidak lagi terhad kepada pemalam pihak ketiga, terutamanya pada platform mudah alih. Audio dan video adalah satu kek yang besar, dan setiap pengeluar penyemak imbas ingin mendapatkan bahagian terbesar Ini juga telah membawa kepada pembezaan format audio dan video yang disokong oleh penyemak imbas. Senarai format audio yang disokong oleh penyemak imbas adalah seperti berikut:
Pelayar |
Versi |
Format yang disokong |
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 |
Opera |
10.0 |
Ogg Vorbis, WAV |
大约有80%的浏览器支持HTML5的b97864c2e0ef2353a16c4d64c7734e92标签，但是并没有一种统一的音频格式。从支持的格式来看，要让所有的浏览器可以播放audio元素上的音频，最佳的方式是提供MP3和Ogg两种格式，兼容代码如下：
<audio controls>
<source src="elvis.mp3" type='audio/mpeg; codecs="mp3"'>
<source src="elvis.oga" type='audio/ogg; codecs="vorbis"'>
<!-- 向后兼容代码：如，显示提示信息、提供下载链接使用flash播放器等 -->
浏览器不支持<code>audio</code>标签
</audio>
视频也有和音频类似的状况，如下是浏览器支持视频的格式列表：
浏览器 |
版本 |
支持格式 |
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>
以上所述是小编给大家介绍的处理HTML5新标签的浏览器兼容版问题，希望对大家有所帮助，更多相关教程请访问 Html5视频教程