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>
لجعل محتواه ظاهراً بشكل إفتراضي عندما تفتح الصفحة.
تصميمه الإفتراضي
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
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; }