HTML5 كيفية استخدام <تفاصيل> و <ملخص> العلامات
من بين العديد من العلامات الجديدة المتوفرة في HTML5 ، المواصفات (مثل: الشكل, figcaption, و جانبا), التفاصيل و ملخص العلامات ، في رأيي ، هي الأكثر فائدة. باستخدام هذه العلامات الجديدة ، يمكنك إخفاء بعض المحتوى الطويل وعرض الملخص فقط.
غالبًا ما نرى هذا التأثير ، لكن معظمهم لا يزال مبنيًا على JavaScript أو أخيه: jQuery ، وهو ما لا يفهمه معظم الأشخاص. الآن ، مع هذه العناصر الجديدة - تفاصيل و ملخص - الأمور سوف تصبح أسهل.
لذلك ، دعونا نرى كيف تعمل العلامات في سيناريو حالة حقيقية.
في هذا العرض التوضيحي ، سنقوم بتلخيص وصف المنتج. أولاً ، دعنا ننشئ علامة "تفاصيل" ثم نضع كل المحتوى مع علامة "الملخص" بداخلها ، كما في المثال أدناه:
مواصفات ماك بوك برو
- شاشة عريضة لامعة بإضاءة خلفية مقاس 13.3 بوصة مع من الحافة إلى الحافة ، والزجاج دون انقطاع (1280 × 800 بكسل).
- معالج Intel Core i5 ثنائي النواة بسرعة 2.4 جيجاهرتز مع 3 ميغابايت من ذاكرة التخزين المؤقت المشتركة L3 لتعدد المهام الممتازة.
- انتل HD الرسومات 3000 مع 384 ميغابايت من DDR3 SDRAM مشترك مع الذاكرة الرئيسية.
- 500 جيجابايت محرك الأقراص الصلبة التسلسلي (5400 دورة في الدقيقة)
- 4 غيغابايت تثبيت ذاكرة الوصول العشوائي (1333 ميجاهرتز DDR3 ؛ يدعم ما يصل إلى 8 جيجابايت)
في هذا المثال ، أضفت تفاصيل مواصفات MacBook Pro ، والآن لنرى كيف يعرض المتصفح هذه العلامات.
لقد أضفت أيضًا عنوانًا ومزيدًا من أوصاف المنتج أعلى التفاصيل لجعل العرض التوضيحي أعلاه أكثر منطقية بالنسبة لك. فما رأيك؟ انها سهلة جدا ، أليس كذلك?
متصفح يدعم
ومع ذلك ، قبل الإسراع في تطبيق هذه العلامة على موقع الويب الخاص بك بالكامل ، تجدر الإشارة إلى أن التفاصيل وعلامة الملخص غير مدعومة حاليًا في Chrome 12 وما فوق.
حتى أحدث إصدار من Firefox لا يدعمهم حتى الآن.
لذلك ، إذا كنت ترغب في تطبيق هذه العلامة ، فأنت بحاجة إلى تضمين وظيفة احتياطية للمتصفحات غير المدعومة. والخبر السار هو ، انها بسيطة. يمكنك استخدام هذه التفاصيل polyfill ، والتي ستعمل تلقائيًا على تكرار وظيفة العلامة للمتصفحات القديمة.
قم بتنزيل هذا الملف واربطه بمستند html جنبًا إلى جنب مع jQuery (1.7+ على الأقل) وتأكد من وضع polyfill قبل علامة body close.
وداخل علامة الرأس ، أدخل العلامة الشرطية التالية لتضمين HTML5shiv لـ IE8 والإصدارات السابقة ، وإلا لن يتعرف Internet Explorer على هذه العلامات الجديدة.
الآن دعونا نرى كيف اتضح في برنامج Internet Explorer:
وهو يعمل الآن على برنامج Internet Explorer أيضًا.
- عرض
- تحميل المصدر
استنتاج
من السهل نسبياً إنشاء مثل هذا التأثير والاختباء باستخدام JavaScript أو jQuery ، ولكن من المؤكد أن الحصول على دعم أصلي من المتصفح يعد حلًا أسهل بكثير للعديد من الأشخاص. سواء كنت ترغب في القيام بذلك في JavaScript أو HTML5 ، فهذا قرارك. شكرا للقراءة ، وآمل أن تستمتع بها.
