بعد كل شيء ، فإن مواصفات HTML5 هي مواصفات تم تحديدها للتو ، ولا يمكن لبعض المتصفحات دعم الملصقات الجديدة والسمات الجديدة ، وخاصة إصدارات IE8 وأقل من المتصفح. فيما يلي بعض الطرق العملية التي تستخدم العلامات الجديدة لـ HTML5 في الصفحة.
لم يضف IE8 Browser دعمًا جديدًا لعلامات HTML5 ، لذلك لا يمكن عرض المحتوى مباشرة في علامة HTML5 الجديدة في IE8. لحسن الحظ ، تدعم IE8/IE7/IE6 التسمية التي تم إنشاؤها بواسطة طريقة CreateElement.
var e = abbr ، article ، جانبا ، صوت ، قماش ، datalist ، التفاصيل ، الحوار ، eventsource ، الشكل ، تذييل ، hgroup ، mark ، meter ، meter ، الإخراج ، البروغ ، القسم ، الوقت ، video.split ('،') ؛ var i = e.length ؛بعد أن يدعم المتصفح الملصق الجديد ، تحتاج إلى إضافة النمط الافتراضي للتسمية:
مقال ، جانبا ، الشكل ، الشكل ، تذييل ، رأس ، hgroup ، NAV ، القسم {display: block} mark {background:#ff0 ؛وبهذه الطريقة ، يمكن لرمز JavaScript البسيط ورمز CSS جعل الإصدار IE8 وأقل من الإصدار من المتصفح يدعم علامات جديدة في HTML5. بطبيعة الحال ، فإن أفضل طريقة لاستخدام الأطر الناضجة.
<!-[إذا كان lt ie 9]> <script> src = http://html5shim.googlecode.com/svn/trunk/html5.js </script> <!
يشمل HTML5 بالمعنى العريض HTML5 و CSS3 و APIs الجديدة. نظرًا لأن الميزات الجديدة متوافقة إلى حد ما مع المتصفحات ، فمن الضروري اكتشاف ما إذا كان المتصفح يدعم هذه الميزة عند استخدام الميزات الجديدة. عندما لا يدعم المتصفح ميزات جديدة ، يمكن أن يكون متوافقًا بشكل مناسب. في الوقت الحالي ، لا توجد طريقة موحدة للكشف عن دعم الميزات الجديدة. لحسن الحظ ، هناك مهندسون متحمسون في الخارج قد طوروا عددًا من الميزات الجديدة للكشف.
يتمثل مبدأ إطار عمل ModelNizr في اكتشاف ما إذا كان المتصفح يدعم الميزات الجديدة وإضافة الفئة المقابلة إلى علامة <html>. إذا كان المتصفح يدعم ميزة معينة ، فسيتم إضافة فئة باسم الاسم المميز. في الوقت نفسه ، سيقوم أيضًا بإنشاء كائن يسمى Modernizr. يحتوي Framework Modernizr أيضًا على وظيفة إطار HTML5SHIM ، والذي يمكن أن يسمح للمتصفحات IE8 وتحت المتصفحات بدعم علامات جديدة.
طريقة استخدام Modernizr بسيطة للغاية.
<script src = js/modelnizr.min.js> </script>
ثانياً ، أضف فئة تسمى no-js على ملصق HTML:
<html class = no-js>
إذا لم يقم المتصفح بتعطيل JavaScript ، فبعد تحميل المستعرض الصفحة ، سيتم استبدال الفئة الموجودة على علامة HTML ديناميكيًا وإضافتها. بعد التحميل ، تشبه علامة HTML ما يلي:
<html class = js canvas canvasttext geolocation rgba hsla no-multiplebgs borderraderradius boxshadow opacimanimamns no-cssgra dients no-cssreflections csstransforms
في رمز CSS ، يمكنك استخدام هذه الفئات لإضافة رمز التوافق الخلفي.
#nice {background: url (background-One.png) Top Left Recept-X ؛}.}.يمكن للقراء المهتمين بهذا الإطار تصفح الموقع الرسمي لـ Modernizr للحصول على المزيد والمزيد من الأمثلة التفصيلية وطرق الاستخدام.
يتم استخدام الصوت ومقاطع الفيديو بشكل شائع على الصفحة ، لكن المتصفحات أكثر إرباكًا ، لذا يوجد موضوع منفصل. تعد الصوت ومقاطع الفيديو خصائص الدعم الأصلي للمتصفح في وقت سابق ، بحيث لم يعد تشغيل الصوت والفيديو يقتصر على المكونات الثالثة ، خاصة في منصات المحمول. تعد الصوت ومقاطع الفيديو كعكة كبيرة ، ويريد جميع الشركات المصنعة للمستعرضات التمييز بين أكبرها ، مما يؤدي أيضًا إلى تمييز المتصفح لتنسيق تنسيقات الصوت والفيديو. قائمة تنسيقات الصوت الداعمة للمستعرض هي كما يلي:
متصفح | إصدار | تنسيق الدعم |
Internet Explorer | 9.0+ | MP3 ، AAC |
الكروم | 6.0+ | Ogg Vorbis ، MP3 ، Wav (9.0+) |
Firefox | 3.6+ | Ogg Vorbis ، واف |
سفاري | 5.0+ | MP3 ، AAC ، واف |
الأوبرا | 10.0+ | Ogg Vorbis ، واف |
يدعم حوالي 80 ٪ من المتصفح علامة <Udio> لـ HTML5 ، ولكن لا يوجد تنسيق صوتي موحد. من منظور تنسيق الدعم ، يمكن لجميع المتصفحات تشغيل الصوت على العنصر الصوتي.
<Condio Controls> <source src = elvis.mp3 type = 'Audio/MPEG ؛ المعلومات ، وتوفير روابط التنزيل ، واستخدم مشغل فلاش ، وما إلى ذلك
يتشابه الفيديو أيضًا مع الصوت.
متصفح | إصدار | تنسيق الدعم |
Internet Explorer | 9.0+ | MP4 |
الكروم | 6.0+ | mp4 ، webm ، ogg |
Firefox | 3.6+ | WebM ، Ogg |
سفاري | 5.0+ | MP4 |
الأوبرا | 10.0+ | WebM ، Ogg |
انطلاقًا من تنسيق الفيديو الذي يدعمه المتصفح ، فإن أفضل طريقة هي توفير تنسيقين في تنسيقات الويب و MP4. التعليمات البرمجية المتوافقة كما يلي:
<dections controls> <source src = video.webm type = video/webm> <source src = video.mp4 type = ؟
ما ورد أعلاه هو نسخة توافق المتصفح من HTML5 التي قدمها Xiaobian. شكرا جزيلا لدعمكم لموقع VEVB Wulin!