Bagaimanapun, spesifikasi HTML5 adalah spesifikasi yang baru saja ditentukan, dan beberapa browser tidak dapat mendukung label baru dan atribut baru, terutama versi IE8 dan di bawah browser. Berikut adalah beberapa metode praktis yang menggunakan tag baru HTML5 di halaman.
IE8 Browser belum menambahkan dukungan baru untuk tag HTML5, sehingga tidak dapat secara langsung menampilkan konten dalam tag HTML5 baru di IE8. Untungnya, IE8/IE7/IE6 mendukung label yang dihasilkan oleh dokumen. Metode Createelement.
var e = abbr, artikel, samping, audio, kanvas, distalist, detail, dialog, sumber daya, gambar, footer, hgroup, tanda, meter, meter, output, progess, bagian, waktu, video.split (','); Var i = e.length; while (i-) {document.createelement (e [i])}Setelah browser mendukung label baru, Anda perlu menambahkan gaya default label:
Artikel, selain FigCaption, gambar, footer, header, hgroup, nav, bagian {display: block} mark {latar belakang:#ff0;Dengan cara ini, dua kode JavaScript sederhana dan kode CSS dapat membuat versi IE8 dan di bawah dari browser mendukung tag baru di HTML5. Tentu saja, cara terbaik adalah menggunakan kerangka kerja yang matang secara langsung.
<!-[jika LT yaitu 9]> <script> src = http://html5shim.googlecode.com/svn/trunk/html5.js </script> <! [Endif]->
HTML5 dalam arti luas termasuk HTML5, CSS3 dan API baru. Karena fitur -fitur baru lebih atau kurang kompatibel dengan browser, perlu untuk mendeteksi apakah browser mendukung fitur ini saat menggunakan fitur baru. Ketika browser tidak mendukung fitur baru, itu dapat kompatibel dengan tepat. Saat ini, tidak ada metode yang seragam untuk mendeteksi dukungan fitur baru. Untungnya, ada insinyur yang antusias di luar negeri telah mengembangkan sejumlah fitur baru dari deteksi.
Prinsip kerangka Modelnizr adalah untuk secara otomatis mendeteksi apakah browser mendukung fitur baru dan menambahkan kelas yang sesuai ke tag <html>. Jika browser mendukung fitur tertentu, kelas yang dinamai nama karakteristik akan ditambahkan. Pada saat yang sama, itu juga akan menghasilkan objek yang disebut Modernizr. Kerangka Modernizr juga berisi fungsi kerangka kerja HTML5SHIM, yang dapat memungkinkan IE8 dan di bawah browser untuk mendukung tag baru.
Metode penggunaan Moderniz sangat sederhana.
<Script src = js/modelnizr.min.js> </cript>
Kedua, tambahkan kelas bernama no-js pada label html:
<html class = no-js>
Jika browser tidak menonaktifkan JavaScript, setelah browser memuat halaman, kelas pada tag HTML akan secara dinamis menggantikan dan menambahkan. Setelah memuat, tag HTML mirip dengan yang berikut:
<html class = js canvas canvasttext geolocation rgba hsla no-multiplebgs borderraderradius boxshadow opacimanimamns no-csssgra no-cssreflections csstransforms no-csstransforms3d no-csstransinion
Dalam kode CSS, Anda dapat menggunakan kelas -kelas ini untuk menambahkan kode kompatibilitas mundur.
#Nice {latar belakang: url (latar belakang.png) Repeat-x kiri atas;}.Pembaca yang tertarik dengan kerangka kerja ini dapat menelusuri situs web resmi Modernizr untuk mendapatkan contoh dan metode penggunaan yang lebih rinci.
Audio dan video umumnya digunakan pada halaman, tetapi browser lebih membingungkan, jadi di sini ada topik yang terpisah. Audio dan video adalah karakteristik dukungan asli dari browser sebelumnya, sehingga pemutaran audio dan video tidak lagi terbatas pada plug -plug -ins ketiga, terutama di platform seluler. Audio dan video adalah kue besar, dan semua produsen browser ingin membedakan yang terbesar, yang juga menyebabkan browser membedakan format format audio dan video. Daftar format audio pendukung untuk browser adalah sebagai berikut:
Browser | Versi | Format dukungan |
Penjelajah Internet | 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 |
Sekitar 80%browser mendukung tag <dio> HTML5, tetapi tidak ada format audio yang seragam. Dari perspektif format dukungan, semua browser dapat memainkan audio pada elemen audio.
<Kontrol Audio> <Sumber SRC = Elvis.mp3 Type = 'Audio/MPEG; Informasi, berikan tautan unduhan, gunakan flash player, dll .-> browser tidak mendukung <udio </code> tag </diSo>
Video ini juga mirip dengan audio.
Browser | Versi | Format dukungan |
Penjelajah Internet | 9.0+ | MP4 |
Chrome | 6.0+ | MP4, Webm, Ogg |
Firefox | 3.6+ | Webm, Ogg |
Safari | 5.0+ | MP4 |
Opera | 10.0+ | Webm, Ogg |
Dilihat dari format video yang didukung oleh browser, cara terbaik adalah memberikan dua format dalam format Webm dan MP4. Kode yang kompatibel adalah sebagai berikut:
<Kontrol Video> <Sumber SRC = Video.Webm Type = Video/Webm> <Source Src = Video.mp4 Type = Video/MP4> <! ?
Di atas adalah versi kompatibilitas browser dari label baru HTML5 yang diperkenalkan oleh Xiaobian. Terima kasih banyak atas dukungan Anda untuk situs web VEVB Wulin!