Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing

HTMLالوسم <summary>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي
  • نصائح و ملاحظات

تعريفه

نستخدم الوسم <summary> مع الوسم <details> على النحو التالي لعرض معلومات إضافية يستطيع المستخدم إظهارها و إخفائها.

<details>
    <summary>visible-content</summary>
    hidden-content
</details>
  • مكان الكلمة visible-content نضع المحتوى الذي نريده أن يظهر دائماً أمام المستخدم و الذي يمكنه النقر عليه.
  • مكان الكلمة hidden-content نضع المحتوى الذي نريده أن يظهر فقط حين يقوم المستخدم بالنقر على المحتوى الظاهر.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <details>.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
12 79 49 15 6 4 مدعوم 49 14 مدعوم مدعوم

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا باستخدام الوسمين <details> و <summary> لعرض عنوان و معلومات إضافية يستطيع المستخدم إظهارها و إخفائها.

المثال الأول

<details>
    <summary>Computer Science</summary>
    <p>Computer Science is the study of computers and computational systems.
    Unlike electrical and computer engineers, computer scientists deal 
    mostly with software and software systems; this includes their theory,
    design, development, and application.</p>
</details>
جرب الكود

في المثال التالي قمنا بإضافة الخاصية open للوسم <details> لجعل محتواه ظاهراً بشكل إفتراضي عندما تفتح الصفحة.

المثال الثاني

<details open>
    ...
</details>
جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

summary {
    display: block;
}

نصائح و ملاحظات

يمكنك وضع أي شيء تريده بداخل الوسم <details> مثل رابط، صورة أو صورة صغيرة كأيقونة بجانب النص الذي ستظهره فيه.
و يمكنك تعديل تصميمه بواسطة كود CSS ليظهر بشكل أفضل.


في المثال التالي قمنا بتحسين تصميم الوسوم الموضعة بداخل الوسم <details> بواسطة كود CSS.

المثال الأول

details > summary {
    padding: 4px;
    width: 200px;
    background-color: #eeeeee;
    border: none;
    box-shadow: 1px 1px 2px #bbbbbb;
    cursor: pointer;
}
details > p {
    background-color: #eeeeee;
    padding: 4px;
    margin: 0;
    box-shadow: 1px 1px 2px #bbbbbb;
}
جرب الكود

في المثال التالي قمنا بتحسين تصميم الوسم <details> بالإضافة إلى الوسوم الموضعة بداخله بواسطة كود CSS.

المثال الثاني

details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 10px 10px 0;
}
summary {
    font-weight: bold;
    margin: -10px -10px 0;
    padding: 10px;
    cursor: pointer;
}
details[open] {
    padding: 10px;
}
details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: 10px;
}
جرب الكود