مما لا شك فيه هو أنك تتعامل على الأقل مع نموذج واحد على الويب كل يوم، سواء كان ذلك خلال استخدامك لمحرك بحثك المُفضل، تسجيلك للدخول إلى بريدك الإلكتروني، أو حتى الدخول إلى فيس بوك. يُعتبر التعامل مع النماذج  Forms إحدى المهمات الأكثر شيوعا على الإنترنت. بحُكم أننا مصممون أو مطورون فإن تعاملنا مع النماذج يحوم حوله نوع من الرتابة والتكرار خاصة لما يتعلق الأمر بكتابة سكريبتات للتحقق من قيم الحقول. أضافت HTML5 العديد من أنواع المُدخلات، الخواص والعديد من العناصر إلى هذه النماذج. سنركز في هذا المقال على الخواص الجديدة التي أضافتها HTML5 فقط، وسنفرد مقالا آخر لأنواع المدخلات الجديدة لاحقا.

كما سنلاحظه طيله هذا المقال، ستسهل عليك هذه الخواص الجديدة مهمتك وستقدم تجربة أمتع للمستخدم، وفوق كل هذا يُمكنك الشروع في استخدامها من الآن. لكن دعونا نبدأ باستعراض سريع لتاريخ النماذج.

نبذة عن تاريخ نماذج HTML5

قبل أن تصبح نماذج HTML5 على النحو الذي نعرفه الآن كانت في السابق مُجرد مواصفات specification أُطلق عليها اسم Forms 2.0 والتي أضافت جُملة من العناصر والمُدخلات الجديدة إلى النماذج. هذه المواصفات أطلقتها Opera وتولى تحريرها Ian Hickson الذي كان يعمل لديها حينها، قبل أن يتم تقديمها إلى W3C بداية 2005. تم الشروع في العمل على هذه المواصفات تحت مظلة W3C ثم تم دمجها مع مواصفات Web Applications 1.0 لإنشاء قواعد ما أصبح يُعرف لاحقا بمواصفات HTML5 التابعة لـ WHATWG.

استخدام مبادئ تصميم HTML5

أحد أفضل ميزات النماذج الخاصة بـ HTML5 تتعلق بكونها قابلة للاستعمال ابتداءًا من الآن، ولا حاجة لك للاستعانة بأية حيل، Shivs أو طرق مُلتوية للقيام بذلك، لكن ذلك لا يعني بأنها مدعومة الآن، حيث أنها تعطي نتائج رائعة على المتصفحات الحديثة التي تدعمها وتوفر "تراجعا رشيقا" (graceful degradation) على المتصفحات التي لا تفهمها، وهذا راجع بشكل أساسي إلى مبادئ تصميم HTML5، ونقصد هنا بالتحديد التراجع الرشيق وهو ما يعني بأنه لا يوجد أي دافع لعدم استخدام هذه الخواص في مشاريعك الحالية.

خواص نماذج HTML5 الجديدة

هناك 14 خاصية جديدة مُتعلقة بنماذج HTML5 والتي سنقوم باستعراضها في هذا المقال وهي كالآتي:

• placeholder
• autofocus
• autocomplete
• required
• pattern
• list
• multiple
• novalidate
• formnovalidate
• form
• formaction
• formenctype
• formmethod
• formtarget

placeholder

أول هذه الخواص هي placeholder والتي تسمح لنا بإضافة نص توضيحي بنفس الطريقة التي كنا نعملها مع خاصية value في نماذج HTML4. يجب استخدام هذه الخاصية مع النصوص التوضيحية القصيرة فقط، ويُفضل الاستعانة بخاصية title لكل النصوص التوضيحية الأطول. الاختلاف الحاصل مُقارنة بالطريقة المُتبعة مع نماذج HTML4 هو أنه لا يتم استعراض  النص إلا في حالة ما إذا كان الحقل فارغا ولم يستقبل "التركيز" Focus (يعني لم يتم اختياره بالنقر عليه مثلا أو بالانتقال إليه عبر Tab من حقل آخر)، وبُمجرد أن يستقبل الحقل التركيز فإن النص يختفي، وهو أمر مُشابه لحقل البحث الموجود على مُتصفح Safari مثلا.

دعونا نُلقي نظرة على طريقة استخدام placeholder:

<input type="text" name="user-name" id="user-name" placeholder="at least 3 characters">

هذا كل ما في الأمر. قد يقول قائل: "وما الرائع في هذا الأمر؟ ألِفتُ القيام بنفس الأمر عبر استخدام JavaScript طيلة السنوات الماضية" وذلك أمر صحيح، لكن مع HTML5 تأتي هذه الخاصية مدعومة بشكل مُضمن في المُتصفح، مما يعني أنها ستعمل من دون أية سكربتات إضافية، وتعمل على جميع المتصفحات حتى ولو كان JavaScript مُعطلا عليها.

ستقوم المتصفحات التي لا تدعم placeholder بتجاهله بكل بساطة، وبالتالي فإنها لن تقوم بإظهاره. باستخدامك لهذه الخاصية فإنك ستقدم تجربة مستخدم مُحسنة لزوار موقعك والذين تدعم مُتصفحاتهم هذه الخاصية، كما أنها تُعد موقعك للعمل وفق معايير المستقبل، بحكم أن كل المُتصفحات الحديثة تدعمها.

ملاحظة: حاليا لا وجود لأية pseudo-class رسمية للتحكم في مظهر placeholder رغم ذلك فإن كلا من Mozilla (مُطورة متصفح Firefox) و WebKitتوفران آليات للتعامل مع ذلك (vendor prefixed properties) ويتعلق الأمر بكل من -mozplaceholder  و –webkit-input-placeholder، وهو ما يُعطي الانطباع بأنه سيتم اعتماد pseudo-class للتحكم في مظهر placeholder في المُستقبل. لمعلومات أوفى حول الأمر يُمكنكم مُراجعة هذه الصفحة على القائمة البريدية الخاصة بـ WHATWG.

autofocus

تقوم autofocus تماما بالوظيفة الظاهرة من اسمها. إضافة هذه الخاصية لأي حقل من الحقول تُمكنه من الحصول على "التركيز" (Focus) بمجرد أن يتم تحميل الصفحة. ومثلما هو الحال مع placeholder فإنه كان بإمكاننا في السابق الوصول إلى نفس النتيجة التي نحصل عليها لدى استخدام autofocus إن نحن استعملنا بعض الـ JavaScript. إلا أن الطرق المُستعملة مع JavaScript تُعاني بعض النقائص، فعلى سبيل المثال لو شرع المُستخدم في ملء حقول النموذج قبل أن يتم تحميل السكربت فإنه سيتم إرجاعه (أو تحويل التركيز إلى الحقل الأول) بُمجرد أن يتم الفراغ من تحميل السكربت، وهذا ما يُرجح الكفة لصالح autofocus حيث أن هذه الخاصية (أي حصول أحد الحقول على التركيز) يتم بمُجرد الفراغ من تحميل الصفحة دون الحاجة إلى انتظار تحميل أي سكربتات إضافية. في المُقابل ننصح باستعمال خاصية autofocus بشكل حصري على الصفحات التي يكون النموذج محتواها الرئيسي فقط (مثل صفحة بداية مُحرك Google) وذلك لتفادي المشاكل التي قد تترتب عن ذلك والمُتعلقة بقابلية الاستخدام usability.

بما أن الأمر هنا يتعلق بخاصية منطقية boolean attribute (إن كان المُستند الذي تكتبه متوافقا مع XHTML5 فاقرأ الملاحظة أدناه) فإننا نستعملها على النحو التالي:

<input type="text" name="first-name" id="first-name" autofocus>

كل المتصفحات الحديثة تدعم خاصية autofocus ومثلما هو الحال مع placeholder فإنه لا يحدث أي شيء على المتصفحات التي لا تدعمها حيث أنها تقوم بتجاهله.

ملاحظة: العديد من خواص HTML5 الجديدة هي خواص منطقية (Boolean attribute)، وهو ما يعني بأنها خواص يتم أخذها بالحسبان إن كانت حاضرة ويتم تجاهلها إن لم تحضر. إلا أنه من المُمكن كتابتها بعدة طرق في HTML5 على النحو التالي:

autofocus
autofocus=""
autofocus="autofocus"

في المُقابل إن كان مُستندك متوافقا مع XHTML5 فإنه يجب عليك استعمال الصيغة التالية:

autofocus="autofocus"

autocomplete

تُساعد خاصية autocomplete المُستخدِمَ على ملء حقوله بناء على ما قام بإدخاله من قبل في نفس الحقل. هذه الخاصية ليست بالجديدة حيث كان بالإمكان استخدامها منذ IE5.5 وقد تم اعتمادها مؤخرا بشكل رسمي ضمن HTML5. الحالة القياسية (default state) لهذه الخاصية هو on وهو ما يعني بأنك لست في حاجة إلى استخدامها بشكل صريح في حقولك. في المُقابل إن أردت أن يقوم المُستخدم بملء حقوله بنفسه في كل مرة يتعامل فيها مع نموذجك (يعني أنك ترغب في أن  لا يتم ملء الحقول بشكل آلي) فإنه يجب عليك استخدام الخاصية على النحو التالي:

<input type="text" name="tracking-code" id="tracking-code" autocomplete="off">

إن توفرت خاصية autocomplete في حقل ما فإن المتصفح سيأخذ حالتها في الحسبان عوض حالة هذه الخاصية في عنصر form الذي يحتوي الحقل (بعبارة أخرى خاصية autocomplete في أي حقل تقوم بعمل override لنفس الخاصية إن كان form يستخدمها).

required

لا يبدو بأننا في حاجة لشرح ما الذي تقوم به هذه خاصية required حيث أنها تقوم تماما بالوظيفة التي نفهمها من اسمها. لدى إضافة هذه الخاصية لأي حقل من الحقول فإن المُتصفح سيطلب من المُستخدم ملء الحقل قبل أن يتمكن من إرسال النموذج، وهذا ما يسمح باستبدال آلية التحقق من الحقول التي عادة ما نقوم بها باستخدام JavaScript، وهو ما يُحسن من تجربة المُستخدم قليلا كما أنه يُجنبنا عناء التحقق من الحقول بأنفسنا. خاصية required هي خاصية منطقية ويتم استخدامها بنفس طريقة استخدام autofocus على النحو التالي:

<input type="text" id="given-name" name="given-name" required>

لا يدعم خاصيةَ required سوى المتصفحات التالية: Opera 9.5+، Firefox 4+، Safari 5+، IE10 و Chrome5+، وعليه فإنك قد تحتاج إلى كتابة سكربت للتحقق من المدخلات على المُتصفحات/الإصدارات التي لا تدعمها (خاصة IE).

تُظهر كلا من متصفحات Opera، Chrome وFirefox رسالة خطأ في حال جرب المُستخدم إرسال النموذج من دون ملء الحقول المطلوبة، وتظهر رسائل الخطأ هذه مكتوبة بنفس اللغة التي يستخدمها المُستخدم على المتصفح (يعني إن كنت تستخدم الإصدار الفرنسي من متصفحك المُفضل فتسظهر رسالة الخطأ بالفرنسية). لا يقوم مُتصفح Safari بإظهار رسالة خطأ، وإنما ينقل التركيز Focus إلى الحقل المعني بالخطأ.

يتحكم كل مُتصفح في مظهر رسالة الخطأ وبالتالي فإن شكلها يختلف من مُتصفح إلى آخر، لكنه من غير المُمكن حاليا التحكم في هذا المظهر عبر CSS، إلا أن Chrome تُوفر آلية للقيام بذلك والتي يُمكن التعرف عليها بقراءة هذا المقال. يبقى التحكم في مظهر الحقل المعني برسالة الخطأ مُمكنا باستخدام شبه الفئة required: إضافة إلى إمكانية تغيير رسالة الخطأ ومظهرها بالاستعانة بـ setCustomValidity الخاصة بـ JavaScript.

هناك أمر واحد يجب أخذه بالحسبان وهو أن عملية التحقق التي يقوم بها المُتصفح لدى استخدامك لهذه الخاصية لا تُغنيك من القيام بعملية تحقق على جانب الخادم من تطبيقك.

للمزيد حول التحكم في مظهر نماذج HTML5:

HTML5 Form Validation

On the styling of forms

pattern

هذه الخاصية من شأنها أن تثير اهتمام الكثير من المُطورين. تقوم خاصية pattern بالتحقق من توافق قيمة الحقل مع تعبير قياسي (regular expression) خاصة بـ Javascript. تسمح هذه الخاصية من التحقق من أنماط مُعينة مما يتيح مثلا التدقيق في معرفات مُنتجات، أرقام فواتير، أرقام هواتف وما إلى ذلك. يُمكنك استخدام pattern للتحقق من أي نمط تريده.

إليكم مثالا حول كيفية استخدامها:

<label>Product Number:
<input pattern="[0-9][A-Z]{3}" name="product" type="text" title="Single digit followed by three uppercase letters."/>
</label>

النمط المُبين في هذا المثال ينص على أن مُعرف كل منتج يجب أن يبدأ برقم واحد متبوع بثلاث حروف كبيرة (uppercase letters). يُمكنك أن تجد قائمة بأكثر الأنماط شيوعا على موقع HTML5 Pattern.

مثلما هو الحال مع required فإن المتصفحات الوحيدة التي تدعم pattern هي: Opera 9.5+، Firefox4+ ،Safari5+، IE10 وChrome5+، لكن مع التطور السريع لسوق المتصفحات فإنه من المحتمل أن تدعمها باقي المتصفحات لاحقا.

خاصية list والعنصر datalist

تسمح خاصية list بربط حقل مُعين بقائمة من الخيارات. يجب أن تكون قيمة الخاصية list متطابقة مع خاصية ID المُتعلقة بالعنصر datalist الموجود في نفس الصفحة. تُعتبر datalist عنصرا جديدا في HTML5 والتي تُمثل قائمة من الخيارات التي يُمكن ربطها بأحد عناصر النموذج، والتي تُعطي نتيجة مشابهة لما يحدث لدى استخدامك لخانة البحث على مُتصفحك، حيث يتم عرض خيارات لدى كتابة الكلمات المُراد البحث عنها.

المثال التالي يُبين كيفية استخدام كلا من list وdatalist:

<label>Your favorite fruit:
<datalist id="fruits">
  <option value="Blackberry">Blackberry</option>
  <option value="Blackcurrant">Blackcurrant</option>
  <option value="Blueberry">Blueberry</option>
  <!-- … -->
</datalist>
If other, please specify:
  <input type="text" name="fruit" list="fruits">
</label>

يُمكن توفير تراجع أكثر رشاقة (superior graceful degradation) من مُجرد توفير عنصر option وذلك عبر إضافة عنصر select داخل الـ datalist. هذه الطريقة التي ابتكرها Jeremy Keith تتوافق بشكل مثالي مع مبادئ تصميم HTML5 التي تحدثنا عنها من قبل:

<label>Your favorite fruit:
<datalist id="fruits">
  <select name="fruits">
    <option value="Blackberry">Blackberry</option>
    <option value="Blackcurrant">Blackcurrant</option>
    <option value="Blueberry">Blueberry</option>
    <!-- … -->
  </select>
If other, please specify:
</datalist>
  <input type="text" name="fruit" list="fruits">
</label>

المتصفحات التي تدعم List وdatalist هي: Opera 9.5+ (الصورة المُبينة أسفله)، Chrome 20+، IE10، وFirefox4+.

multiple

يُمكننا أن نُحسن المثال السابق عبر الاستعانة بخاصية multiple والتي تسمح للمستخدم باختيار أكثر من قيمة واحدة من الـ datalist، ليصبح المثال السابق كالتالي:

<label>Your favorite fruit:
<datalist id="fruits">
  <select name="fruits">
    <option value="Blackberry">Blackberry</option>
    <option value="Blackcurrant">Blackcurrant</option>
    <option value="Blueberry">Blueberry</option>
    <!-- … -->
  </select>
If other, please specify:
</datalist>
  <input type="text" name="fruit" list="fruits" multiple>
</label>

لا يقتصر استخدام multiple مع datalist فقط، بل يُمكن استخدامها مع عدة حالات أخرى خاصة إذا ما تعلق الأمر مثلا بإدخال عناوين بريد إلكتروني أو لدى رفع أكثر من ملف كما هو مُبين في المثال التالي:

<label>Upload files:
<input type="file" multiple name="upload"></label>

يدعم multiple المُتصفحات التالية: Firefox3.6+، Safari4+،  Opera11.5+، Internet Explorer 10 وChrome4+.

تعليق المُترجم: لم يتسن لي تجربة آلية عمل multiple مع غير الملفات (يعني الحقول النصية فقط)، إن كنت تعلم كيف يتم القيام بذلك فاترك تعليقا حول الأمر تُبين فيها ذلك.

novalidate وformnovalidate

تُشير الخاصيتان novalidate وformnovalidate بأنه  يجب على المُتصفح أن لا يقوم بالتحقق من محتويات حقول النموذج لدى إرساله. كلا الخاصيتين منطقيتان boolean. يُمكن استخدام formnovalidate مع كل من أزرار الإرسال submit أو حقول الصور، أما خاصية novalidate فلا يُمكن استخدامها سوى مع العنصر form.

قد تتساءل ما هي الفائدة المرجوة من عدم التحقق من محتويات الحقول لدى إرسال النموذج، يُمكن استخدام formnovalidate على زر لحفظ بيانات نموذج مُعين دون الحاجة إلى التحقق من محتوياته (لإكمال النموذج لاحقا على سبيل المثال)، في هذه الحالة سنتمكن من حفظ النموذج بالرغم من أنه غير مُكتمل الحقول رغم أن هذه الحقول مطلوبة required لدى القيام بإرسال النموذج للمعالجة النهائية.

أما فيما يخص novalidate فُيمكن استخدامها مثلا في الحالات التي نود أن لا يتم التحقق من حقول النموذج لكننا نود الاستفادة من التحسينات الخاصة بتجربة المُستخدم والتي تقدمها خواص HTML5 الجديدة (نود مثلا أن يتم إظهار لوحة مفاتيح رقمية للمستخدمين عبر الهواتف الذكية لدى انتقالهم إلى حقل مُعين لكن لا نود أن يتم اقتصار ما يقومون بإدخاله على الأرقام فقط).

المثال التالي يُبين كيفية استخدام formnovalidate:

<form action=”process.php”>
    <label for=”email”>Email:</label>
    <input type=”email” name=”email” required>
    <input type=”submit” formnovalidate value=”Submit”>
</form>

المثال التالي يخص حول استخدام novalidate:

<form action=”process.php” novalidate>
      <label for=”email”>Email:</label>
      <input type=”email”  name=”email”  required>
      <input type=”submit” value=”Submit”>
</form>

form

يتم استخادم خاصية form لربط كل من input ،select أو textarea بنموذج مُعين (النموذج الذي تتبعه). استخدام خاصية form يسمح للمكونات سابقة الذكر أن لا تكون ذُرّية مباشرة (direct children) للنموذج الذي تنتمي إليه، مما يسمح بوضعه في مكان آخر داخل نفس الصفحة. قد يكون الاستخدام الأكثر شيوعا لهذه الخاصية هو ربط الأزرار الموجودة داخل جداول بالنماذج.

<input type="button" name="sort-l-h" form="sort">

formaction، formenctype، formmethod وformtarget

لدى كل من Formaction، formenctype، formmethod وformtarget ما يُقابلها من خصائص form والتي سبق لك أن تعاملت معها في HTML4. تم استحداث هذه الخصائص بشكل أساسي لأنه من المُمكن أن نحتاج في نماذجنا actions مختلفة تختلف باختلاف الأزرار التي نقوم بإرسال النموذج من خلالها بدل أن نقوم بإنشاء أكثر من نموذج للقيام بذلك.

إليكم وصفا سريعا لهذه الخصائص الجديدة:

formaction

تحدد خاصية formaction  الملف أو التطبيق الذي سيتولى مهمة استقبال النموذج لدى إرساله حيث أنها تشغل نفس الوظيفة التي تشغلها خاصية action التي نضيفها إلى العنصر form. يقتصر استخدامها على الأزرار فقط سواء كانت submit أو صورا (type="submit"  أو  type="image"). لدى إرسال النموذج يقوم المُتصفح بالتحقق أولا من وجود خاصية formaction وفي حال ما إذا لم يجدها يقوم بالبحث حينها على الخاصية action.

<input type="submit" value="Submit" formaction="process.php">

formenctype

تُحدد خاصية formenctype الطريقة التي يتم ترميز البيانات باستخدام POST. لهذه الخاصية نفس مفعول خاصية enctype الخاصة بالعنصر form ويقتصر استخدامها على الأزرار فقط سواء كانت submit أو صورا (type="submit"  أو  type="image"). إذا لم يتم تضمين هذه الخاصية فإنه يتم اعتماد قيمتها القياسية application/x-www-formurlencoded .

<input type="submit" value="Submit" formenctype="application/x-www-form-urlencoded">

Formmethod

تُحدد خاصية formmethod فعل HTTP المُستخدم لإرسال النموذج  (GET،  POST،  PUTأو  DELETE)، لهذه الخاصية نفس مفعول خاصية method الخاصة بالعُنصر form، ويقتصر استخدامها على الأزرار فقط سواء كانت submit أو صورا (type="submit"  أو  type="image").

<input type="submit" value="Submit" formmethod="POST">

Formtarget

تُحدد خاصية formtarget النافذة التي ستظهر نتيجة النموذج، لهذه الخاصية نفس مفعول خاصية target الخاصة بالعُنصر form، ويقتصر استخدامها على الأزرار فقط سواء كانت submit أو صورا (type="submit"  أو  type="image").

<input type="submit" value="Submit" formtarget="_self">

خلاصة

استعرضنا في هذا المقال جُملة من الخصائص الجديدة التي تساعد على توفير تجربة مُستخدم أفضل للزائر وتساعدك على تقليص زمن كتابة نماذجك، لا تزال هناك بعضٌ من الخصائص الجديدة والتي سنتسعرضها في مقال قادم مع جُملة من أنواع المُدخلات الجديدة.

يُمكنك أن تجد نموذجا تجريبيا يستخدم بعضا من الأمثلة التي استعرضناها في هذا المقال هنا.

أشرنا خلال هذا المقال إلى المتصفحات التي تدعم الخواص التي استعرضناها، لكن مع الإصدارات الجديدة لكل متصفح والتي يتم إطلاقها بوتيرات متسارعة فإنه من الصعب معرفة ما الذي يدعمه هذا المتصفح وما الذي لا يدعمه ذاك المتصفح، لكن إن أردت البقاء على اطلاع فعليك زيارة المواقع التالية: can I use …، FindMeByIP ومحرك بحث Wufoo الخاص بالـ HTML5.

ترجمة –وبتصرف- للمقال HTML5 forms introduction and new attributes لصاحبه Richard Clark

هذا المقال عبارة عن مُقتطف من الفصل السادس من كتاب Beginning HTML5 and CSS3: The Web Evolved.

تعليق المترجم: قد تكون ترجمة بعض المُصطلحات التقنية في هذا المقال غير دقيقة، أو أن هناك ترجمات أفضل لها، إن لاحظت أيا منها فلا تتردد في مراسلتي أو الإشارة إليها في التعليقات.

Modernizr هي مكتبة JavaScript  تقوم باكتشاف ميزات HTML5 وCSS3 التي يدعمها متصفح الزائر. قيامها بذلك بُتيح للمطور معرفة الخواص والتقنيات الجديدة المدعومة بشكل مُضمن في المتصفح والتي بإمكانه استخدامها بشكل مُباشر إضافة إلى تلك التي لا يدعمها، والتي يجب عليه أن يدعمها بطريقة تراجعية Fallback. يُطلق على هذه التقنية اسم اكتشاف الميزات (الخاصة) والتي تُعتبر تقنية أنجح بكثير من تقنية "التعرف على المتصفح" (browser sniffing).

تُعتبر Modernizr في غاية الأهمية لدى استكشاف خواص CSS3 المدعومة على المتصفح، لكننا سنركز في هذا المقال على HTML5 فقط، رغم أن مبدأ عمل المكتبة هو نفسه مع كلي الأمرين.

تجدر الإشارة إلى أن Modernizr لا تقوم بتعويض النقص الناتج عن عدم دعم المتصفح لبعض الخواص أو ما يُعرف بالـ Polyfills، كل ما تقوم بها المكتبة هو استكشاف إن كان المتصفح يدعم خاصية مُعينة من عدمه، لكنه يبقى بإمكانك استخدام Modernizr كجزء من آلية تعويض ذلك النقص.

لا يدعم الإصدار الثامن من متصفح Internet Explorer والإصدارات التي تسبقه الخواص الجديدة للـ HTML5 بشكل قياسي، ولهذا إن احتجت دعم هذه المتصفحات فإنه يجب عليك تعويض هذا النقص ببعض الـ JavaScript. يُمكنك القيام بذلك باستخدام الشفرة التي سيلي استعراضها، كما يُمكنك القيام بذلك باستخدام HTML5 Shiv الخاصة بـ ‎@rem والتي تشمل جميع الخواص الجديدة.

يساعدك Modernizr في القيام بذلك، وبالتالي فإن المرور عبر تضمين الـ Shiv غير ضروري.

البداية

بداية سنحتاج إلى ملف HTML:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>Hello Modernizr</title>

  <script src="modernizr.js"></script>

</head>

<body>

</body>

</html>

كما هو ظاهر في هذه الشفرة فإننا سنحتاج إلى ملف modernizr.js والذي يُمكنك بناء نسخة منه ومن ثم تحميله بناء على الخواص التي ترغب من التحقق من دعمها. يُمكنك القيام بذلك عبر اختيار Production  (الصورة الأولى) ومن ثم اختيار تلك الخواص مثلما هو ظاهر في الصورة الثانية. هذا الأمر يسمح باستخدام ملف صغير الحجم لأننا لا نقوم بتضمين جميع الخواص التي يُمكن لـ Modernizr استكشافها. يُوفر الموقع نسخة تطوير خاصة بالمكتبة، لكنه قبل أن ترفع موقعك إلى خادمك الخاص فإنك ستحتاج إلى ملف Production الذي يستكشف الخواص التي تحتاج استكشافها فقط.

خيارا تحميل Modernizr

لاحظ أيضا في السطر الثاني في ملف HTML آنف الذكر وجود صنف no-js في وسم <html>. يقوم  Modernizr باستبدال هذا الصنف بصنف js والذي يُمكن أن يكون له فائدة في ملف CSS الخاص بك. إلى جانب صنف js يُضيف Modernizr أصنافا لكل الخواص التي يدعمها المتصفح، وللخواص التي لا يدعمها يُضيف أصنافا تُسبق أسماؤها بـ no-.

إليك مثالين عن الأصناف التي يُضيفها Modernizr على كل من متصفحي Chrome 16 و IE9:

<html class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

<html class="js no-flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent video audio localstorage sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">

استكشاف العناصر

يقوم Modernizr بإنشاء كائن جافاسكربت عام (Global Object)  تحت اسم Modernizr مما يسمح لنا بالقيام باستعلامات حول مختلف خواص properties المتعلقة به وذلك عبر مناداة Modernizr.featurename  (أين featurename هي اسم الخاصية المراد التأكد من دعمها على المتصفح). وبالتالي إن أردنا مثلا التأكد إن كان المتصفح يدعم canvas فإننا نكتب التالي:

<script>
  if (Modernizr.canvas) {
    alert("This browser supports HTML5 canvas!");
  }
</script>

جرب هذه الشيفرة على متصفح حديث وستظهر لك رسالة تُخبرك بأنه يدعم Canvas.

بطبيعة الحال يُمكن أيضا التحقق ما إذا كان المتصفح لا يدعم خاصية مُعينة على النحو التالي:

<script>
  if (Modernizr.canvas) {
    alert("This browser supports HTML5 canvas!");
  } else {
    alert("no canvas :(");
  }
</script>

أو اختصار الأمر على النحو التالي:

<script>
  if (!Modernizr.canvas) {
    alert("No canvas here");
  }
</script>

استكشاف الخواص وتعويض النقائص باستخدام YepNope

استعرضنا في المثال السابق أبسط طريقة لاستكشاف خواص المتصفح. الآن ماذا لو أردت التحقق من دعم المتصفح لخاصية مُعينة ثم أردت الاستعانة بالـ polyfill لجعل المتصفح يعمل بشكل أفضل؟ هذا ما يُمكنك القيام به لدى استخدامك لـ YepNope.

YepNope عبارة عن أداة تحميل شرطية conditional loader، مما يعني بأنها لن تقوم بتحميل سوى السكربتات التي يحتاجها المُتصفح. تم تضمين YepNope مُباشرة ضمن Modernizr وبالتالي لا حاجة لك للتفكير أو القيام بتحميل أو الربط مع مكتبة Javascript أُخرى.

لكن كيف نستعملها؟

سنقوم باستخدام Canvas كمثال هنا أيضا. يرغب المطورون عادة بدعم (القيام بـ Fallback لـ) المتصفحات التي لا تدعمها مثل IE8 أو الإصدارات السابقة له. الطريقة التقليدية للقيام بذلك هو ربط صفحة الـ HTML خاصتك بسكربت Polyfill يقوم بذلك كـ FlashCanvas مثلا:

<script src="http://flashcanvas.net/bin/flashcanvas.js"></script>

المشكل مع هذا الحل هو أن كل المتصفحات ستقوم بتحميل هذا السكربت، رغم أن ذلك غير مطلوب ولا فائدة تُرجى منه. هناك من يرى أن وضع السكربت في تعليق شرطي conditional comment يحل هذا المشكل، لكن إن كان بإمكاننا إبقاء السكربت خارج شفرة الصفحة بشكل كامل فسيكون ذلك أفضل بكثير، وهنا يأتي دور  Modernizr.load()‎ كما سبق ذكره فإنه تم تضمين YepNope داخل Modernizr وبالتالي فإنه من الممكن التحقق من خاصية مُعينة ومن ثم توفير Polyfill خاصة بها إن لم تكن مدعومة.

تجدر الإشارة إلى أنه لا يتم تضمين ()load. بشكل قياسي في ملف development، وبالتالي فإنه يجب عليك تضمينه لدى قيامك بـ'بناء' (build) الملف.

الاستعمال القاعدي للدالة ()load. يخص التحقق من خاصية مُعنية إن كانت مدعومة (yep) أو لا(nope). في المثال التالي سيقوم Modernizr بالتحقق من دعم Canvas وفي حال ما إذا لم تكن مدعومة، يقوم بتحميل FlashCanvas:

Modernizr.load({

test: Modernizr.canvas,

nope: 'http://flashcanvas.net/bin/flashcanvas.js'

});

إن كنت تملك IE8 على جهازك، الق نظرة على لسان تبويب Network في الـ Developer tools، ستلاحظ أن المتصفح يقوم بتحميل وتهيئة flashcanvas.js.

تحميل FlashCanvas في IE8

إليكم الآن مثالا أكثر فائدة والذي يقوم بالتحقق من دعم <input type="date"> ومن ثم تحميل ملفي jQuery وملف CSS لإنشاء مختار للتواريخ Data picker:

<script src="modernizr.js"></script>

<script>Modernizr.load({

test: Modernizr.inputtypes.date,

nope: ['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 'jquery-ui.css'],

complete: function () {

$('input[type=date]').datepicker({

dateFormat: 'yy-mm-dd'

});

}

});

</script>

كما هو ظاهر من هذا السكربت، ستقوم الصفحة بالتحقق من دعم <input type="date"‎>، وفي حالة ما إذا لم تكن مدعومة، ستقوم بتحميل ملفي jQuery وملف CSS (في هذا المثال يُفترض بملف CSS أن يكون محليا). بعد الفراغ من ذلك (on complete) تتم مناداة الإضافة مع كل <input type="date"‎> الموجودة في الـ DOM. سيتم تحميل ملفات jQuery في العديد من المتصفحات، لكنه لن يتم ذلك على Opera (أو على أحدث إصدارات Chrome).

عنصر منتقي التاريخ من jQuery  في متصفح فيرفوكس

عنصر منتقي التاريخ الأصلي في متصفح أوبرا

نعتظهر الصورتان السابقتان الاختلافات الناتجة عن تحميل المتصفح لإضافة jQuery في الأول ودعمه للخاصية في الثاني.

ويظهر الأمر أيضا بشكل واضح في قائمة الملفات التي يقوم كل متصفح بتحميلها:

تحميل موارد عنصر منتقي التاريخ في متصفح فيرفوكس

تحميل عنصر منتقي التاريخ في متصفح أوبرا

لاحظوا هنا أن المتصفح يقوم بتحميل ملفي jQuery مرتين، وهو سلوك طبيعي لمكتبة YepNope، ولذلك لا تقلق من الأمر فهو طبيعي.

يُمكنك القيام بأكثر مما قُمنا به في هذين المثالين مع مكتبة YepNope. إليك المثال التالي والمأخوذ مباشرة من موقع المكتبة والذي سيتعرض كافة الخواص الممكنة لها (كل الخواص ليست مطلوبة):

yepnope([{

test : /* boolean(ish) - Something truthy that you want to test */,

yep : /* array (of strings) | string - The things to load if test is true */,

nope : /* array (of strings) | string - The things to load if test is false */,

both : /* array (of strings) | string - Load everytime (sugar) */,

load : /* array (of strings) | string - Load everytime (sugar) */,

callback : /* function ( testResult, key ) | object { key : fn } */,

complete : /* function */ }, /* ... */ ]);

الخلاصة

Modernizr عبارة عن مكتبة استكشافية في غاية القوة، تسمح لك بالتحقق من إن كان المتصفح يدعم الخواص التي ترغب في استعمالها على صفحاتك، وبناء على ذلك تقوم الصفحات باستخدام تلك الخواص كما تدعمها تلك المتصفحات أو تقوم بالاستعانة بـ polyfill لتعويض النقص الناجم عن قصور المتصفح المستخدم في استعراض تلك الصفحات. قمنا في هذا المقال باستعراض كيفية إنشاء ملف Modernizr ومن ثم استخدامه بطريقتين مختلفين: استخدام كائن Modernizr بشكل مباشر (Modernizr.<featurename>) أو الاستعانة بـ YepNope.

ترجمة –وبتصرف- للمقال: Using Modernizr to detect HTML5 features and provide fallbacks لصاحبه: Tom Leadbetter