10 ميزات جديدة من HTML 5.1 وكيفية استخدامهم IRL

حصلت مواصفات 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. إضافة وظيفة إلى قائمة سياق المتصفح

مع ال العنصر و نوع = "السياق" السمة ، يمكنك ذلك إضافة وظائف مخصصة إلى قائمة السياق للمتصفح. تحتاج إلى تعيين كعنصر تابع لل

العلامة. ال هوية شخصية من يحتاج العنصر إلى تحمل نفس القيمة مثل قائمة السياق صفة، عزا للعنصر الذي نريد إضافة قائمة السياق إليه (والذي هو العنصر في المثال أدناه).

مثال على الكود:

حق انقر لي

ال يمكن العلامه لدينا ثلاثة أنواع مختلفة, "مربع", "أمر" (التي تحتاج إلى إضافة إجراء باستخدام JavaScript) ، و راديو. من الممكن إضافة أكثر من عنصر قائمة واحد إلى قائمة السياق ، ولكن دعم المتصفح لهذه الميزة هي ليس جيد جدا بعد. لا يدعم Chrome 54 ذلك ، ولا يسمح Firefox 50 بوجود قائمة سياق إضافية واحدة فقط. يمكنك أدناه رؤية كيفية عمل مثال التعليمات البرمجية في Firefox 50.

4. عش الرؤوس والتذييلات

أتش تي أم أل 5.1 يسمح لك عش رؤوس وتذييلاتها إذا كان كل مستوى هو الواردة في القسم sectioning المحتوى. الملاحظة أدناه عبارة عن لقطة شاشة من مستندات W3C ، وتنصح المطورين بالطريقة الصحيحة لتداخل رأس وتذييل الصفحة.

يمكن أن تكون هذه الميزة مفيدة إذا كنت تريد إضافتها رؤوس تفصيلية لعناصر التقسيم الدلالية, مثل

و

. المثال رمز أدناه بإنشاء شريط جانبي داخل الرأس ، و