حصلت مواصفات HTML على إصلاح كبير قبل أسبوعين عندما نشرت W3C لها HTML 5.1 توصية جديدة في نوفمبر 2016. في آخر بلوق لها ، دعا W3C الإصدار الرئيسي الجديد مقاييس الذهب, لأن HTML 5.1 يوفر لنا طرقًا جديدة لكيفية استخدام HTML لإنشاء تجارب ويب أكثر مرونة.
في هذه المقالة ، سنلقي نظرة على ميزاته الجديدة التي يمكنك الاستفادة منها دون لمس جافا سكريبت, لكن التحسينات على خلفية جافا سكريبت هي أيضا لافتة للنظر، كما ترون في سجل التغيير الرسمي.
لاحظ أن جميع المتصفحات لا تدعم جميع هذه الميزات حاليًا ، لذلك لا تنسَ ذلك تحقق دعم المتصفح قبل استخدامها في الإنتاج. إذا كنت مهتما في مزيد من التطوير لمعيار HTML, يمكنك التحقق من مسودة HTML 5.2 كذلك.
1. تحديد موارد صور متعددة لتصميم استجابة
في HTML 5.1 ، يمكنك استخدام علامة جنبا إلى جنب مع srcset سمة لجعل اختيار صورة استجابة ممكن. ال يمثل علامة حاوية الصورة التي تسمح للمطورين ل أعلن الموارد صورة مختلفة من أجل التكيف مع UAحجم منفذ العرض وكثافة الشاشة ونوع الشاشة والمعلمات الأخرى المستخدمة في الرسم المتجاوب.
ال العلامة نفسها لا تعرض أي شيء ، إنها تعمل فقط سياق موارد الصورة المتعددة. تحتاج إلى إعلان مورد الصورة الافتراضي كقيمة SRC سمة من العلامة ، و موارد الصورة البديلة الذهاب داخل srcset سمات و عناصر.
مثال على الكود:
2. إظهار أو إخفاء معلومات إضافية
مع ال
و العلامات ، يمكنك إضافة معلومات موسعة إلى قطعة المحتوى. المعلومات الإضافية لا يظهر بشكل افتراضي, ولكن إذا كان المستخدمون مهتمين ، فإنهم لدينا خيار لإلقاء نظرة. في التعليمات البرمجية الخاصة بك ، من المفترض أن ضع ال علامة داخل . بعد علامة يمكنك أضف المعلومات الإضافية تريد الاختباء.
مثال على الكود:
رسالة خطأ
لم نتمكن من الانتهاء من تنزيل هذا الفيديو.
اسم الملف:
yourfile.mp4
حجم الملف:
100 ميغابايت
المدة الزمنية:
0:05:27
هذه هي الطريقة التي يبدو بها مثال التعليمات البرمجية هذا في Firefox 50.0.2:
3. إضافة وظيفة إلى قائمة سياق المتصفح
مع ال العنصر و نوع = "السياق" السمة ، يمكنك ذلك إضافة وظائف مخصصة إلى قائمة السياق للمتصفح. تحتاج إلى تعيين كعنصر تابع لل
