Bagaimana untuk memberikan sandaran untuk pelayar yang lebih tua di HTML5?

Gunakan HTML5 SHIV untuk sokongan IE yang lebih tua. 2. Sapukan Modernizr untuk Pengesanan Ciri dan Kelas Kejatuhan. 3. Menyediakan sandaran untuk jenis input baru. 4. Gunakan polyfills untuk API JavaScript yang hilang. Gabungkan ini untuk memastikan fungsi teras merentasi pelayar.

Menyokong pelayar yang lebih tua di HTML5 tidak bermakna mengorbankan ciri -ciri moden -ini bermakna membina dengan kemusnahan yang anggun dalam fikiran. Anda boleh memastikan laman web anda tetap berfungsi dan boleh diterima secara visual walaupun ciri -ciri HTML5 tertentu tidak disokong.

Gunakan elemen semantik dengan sandaran

Versi lama Internet Explorer (seperti IE8 dan ke bawah) tidak mengenali unsur -unsur semantik HTML5 seperti header , nav , seksyen , atau artikel . Untuk menjadikan unsur -unsur ini boleh digabungkan, anda perlu membolehkannya melalui JavaScript.

• <script> document.createeelement ("artikel"); </script> - secara manual mencipta elemen
• Lebih baik: Gunakan skrip html5shiv yang popular:
• Skrip ini secara dinamik mencipta elemen HTML5 supaya mereka dapat digayakan pada versi IE yang lebih tua

Leverage Modernizr untuk Pengesanan Ciri

Daripada mengesan penyemak imbas, periksa sama ada ciri tertentu tersedia. ModernIZR adalah perpustakaan yang digunakan secara meluas yang menguji sokongan untuk ciri HTML5 dan CSS3.

• Tambahkan Modernizr ke halaman anda:
• Ia menambah kelas seperti no-flexbox , kanvas , atau tidak-websocket ke elemen html
• Gunakan kelas-kelas ini dalam CSS untuk memohon gaya sandaran: .No-Borderradius {Border: none; }
• Gunakan JavaScript untuk memuatkan polyfills hanya apabila diperlukan

Sediakan alternatif untuk jenis input dan atribut baru

HTML5 memperkenalkan jenis input baru seperti e -mel , tarikh , dan nombor , tetapi pelayar yang lebih tua memperlakukannya sebagai input teks biasa.

• Sentiasa sertakan sandaran yang masuk akal: penyemak imbas yang tidak menyokong Type = "E -mel" akan kembali ke Type = "Text"
• Gunakan atribut tempat letak dengan berhati -hati -eram endir mengabaikannya, jadi jangan bergantung padanya untuk arahan
• Melaksanakan pengesahan sampingan asas dengan JavaScript apabila pengesahan asli tidak disokong

Gunakan polyfills untuk API JavaScript yang hilang

Sesetengah ciri HTML5 bergantung kepada API JavaScript (seperti LocalStorage , Geolocation , atau Fetch ). Polyfills meniru API ini dalam persekitaran yang lebih tua.

• Untuk LocalStorage , gunakan sandaran berasaskan kuki jika diperlukan
• Muatkan polyfills menggunakan alat seperti loadcss atau polyfill.io
• Contoh:

Pada asasnya, menggabungkan pengesanan ciri, pemuatan bersyarat, dan sandaran pintar untuk menyampaikan pengalaman yang kukuh di semua pelayar. Ia bukan tentang membuat penyemak imbas lama sama dengan yang baru -ini mengenai memastikan fungsi kandungan dan teras tetap boleh diakses.

Atas ialah kandungan terperinci Bagaimana untuk memberikan sandaran untuk pelayar yang lebih tua di HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!