شرح العنصر <summary> في HTML

HTML

مقدمة عن عنصر <summary>

عنصر <summary> هو جزء من مواصفات HTML5 ويستخدم مع عنصر <details> لإنشاء واجهة مستخدم قابلة للطي والتوسيع. هذا العنصر يوفر طريقة سهلة لإنشاء محتوى مخفي يمكن للمستخدمين إظهاره أو إخفاؤه بنقرة واحدة.

البنية الأساسية

<details>
  <summary>عنوان أو ملخص المحتوى</summary>
  <!-- المحتوى الذي سيظهر عند النقر -->
  <p>هذا المحتوى سيكون مخفيًا في البداية وسيظهر عند النقر على الملخص.</p>
</details>

السمات (Attributes)

السمات العامة

• accesskey: تحديد مفتاح اختصار للعنصر
• class: تحديد فئة CSS
• dir: تحديد اتجاه النص (rtl/ltr)
• id: معرف فريد للعنصر
• lang: تحديد لغة المحتوى
• style: تحديد أنماط CSS مدمجة
• tabindex: تحديد ترتيب التنقل بين العناصر
• title: معلومات إضافية تظهر عند تمرير المؤشر

السمة المخصصة

open (لعنصر <summary>): تحدد ما إذا كان المحتوى مفتوحًا افتراضيًا

التوافق مع المتصفحات

عنصر <summary> مدعوم في جميع المتصفحات الحديثة:

Chrome 12+

Firefox 49+

Safari 6+

Edge 79+

Opera 15+

الاستخدام الأمثل

1 إنشاء قائمة أسئلة شائعة (FAQ)

<details>
  <summary>كيف يمكنني استعادة كلمة المرور؟</summary>
  <p>لإستعادة كلمة المرور، اتبع الخطوات التالية:
    1. انتقل إلى صفحة تسجيل الدخول
    2. انقر على "نسيت كلمة المرور"
    3. أدخل بريدك الإلكتروني
    4. اتبع التعليمات في الرسالة التي ستصل إليك</p>
</details>

2 إنشاء قوائم تنقل متداخلة

<details>
  <summary>القائمة الرئيسية</summary>
  <ul>
    <li><a href="#">الصفحة الرئيسية</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">اتصل بنا</a></li>
  </ul>
</details>

3 عرض معلومات إضافية

<details>
  <summary>معلومات تقنية إضافية</summary>
  <table>
    <tr><th>المواصفة</th><th>القيمة</th></tr>
    <tr><td>الأبعاد</td><td>10x20x5 سم</td></tr>
    <tr><td>الوزن</td><td>250 جرام</td></tr>
  </table>
</details>

التخصيص باستخدام CSS

يمكنك تخصيص مظهر عنصر <summary> باستخدام CSS:

details {
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
}

summary {
  cursor: pointer;
  font-weight: bold;
  padding: 5px;
  outline: none;
}

summary:hover {
  background-color: #f5f5f5;
}

details[open] summary {
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
}

التفاعل مع JavaScript

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

// الحصول على جميع عناصر details
const detailsElements = document.querySelectorAll('details');

// إضافة مستمع حدث لكل عنصر
detailsElements.forEach(details => {
  details.addEventListener('toggle', function() {
    if (this.open) {
      console.log('تم فتح العنصر');
    } else {
      console.log('تم إغلاق العنصر');
    }
  });
});

أفضل الممارسات

• استخدم عناوين واضحة: اجعل نص <summary> واضحًا ودالًا على المحتوى المخفي
• لا تضع عناصر تفاعلية داخل <summary>: مثل أزرار أو روابط
• استخدمه للمحتوى الاختياري: المعلومات التي لا يحتاجها جميع المستخدمين
• تجنب الإفراط في الاستخدام: الكثير من العناصر القابلة للطي قد تربك المستخدم
• ضع في الاعتبار إمكانية الوصول: تأكد من أن العنصر يمكن الوصول إليه باستخدام لوحة المفاتيح

إمكانية الوصول (Accessibility)

لتحسين إمكانية الوصول:

details.querySelector('summary').setAttribute('aria-expanded', details.open);

• استخدم tabindex="0" للسماح بالتركيز على العنصر
• تأكد من أن العنصر يعمل بشكل صحيح مع قارئات الشاشة

البدائل عند عدم التوافق

إذا كنت بحاجة إلى دعم متصفحات قديمة، يمكنك استخدام حل بديل:

<div class="details">
  <button class="summary">عنوان أو ملخص المحتوى</button>
  <div class="content" hidden>
    <p>هذا المحتوى سيكون مخفيًا في البداية وسيظهر عند النقر على الملخص.</p>
  </div>
</div>

<script>
document.querySelectorAll('.summary').forEach(button => {
  button.addEventListener('click', function() {
    const content = this.nextElementSibling;
    content.hidden = !content.hidden;
    this.setAttribute('aria-expanded', !content.hidden);
  });
});
</script>

الخلاصـــة

عنصر <summary> مع <details> يوفر طريقة سهلة لتحسين تجربة المستخدم عن طريق إدارة المساحة على الصفحة وعرض المحتوى عند الحاجة فقط. هذا العنصر سهل التنفيذ، خفيف الوزن، ويدعمه معظم المتصفحات الحديثة، مما يجعله خيارًا ممتازًا لتحسين واجهات المستخدم على الويب.

كيف كان المقال؟