تعريفه
نستخدم الوسم <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;
}
جرب الكود