HTMLالوسم <details>
- تعريفه
- دعم المتصفحات
- خصائصه
- إستخدامه
- تصميمه الإفتراضي
- نصائح و ملاحظات
تعريفه
نستخدم الوسم <details> مع الوسم <summary> على النحو التالي لعرض معلومات إضافية يستطيع المستخدم إظهارها و إخفائها.
- مكان الكلمة
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 | مدعوم | مدعوم | 49 | 14 | 6.1 | مدعوم |
خصائصه
الخاصية open
يمكن إضافتها له لجعل المحتوى الذي يمكن إخفائه فيه ظاهراً بشكل إفتراضي.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
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 | 6.1 | مدعوم |
إستخدامه
في المثال التالي قمنا باستخدام الوسمين <details> و <summary> لعرض عنوان و معلومات إضافية يستطيع المستخدم إظهارها و إخفائها.
المثال الأول
في المثال التالي قمنا بإضافة الخاصية open
للوسم <details> لجعل محتواه ظاهراً بشكل إفتراضي عندما تفتح الصفحة.
المثال الثاني
تصميمه الإفتراضي
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
نصائح و ملاحظات
يمكنك وضع أي شيء تريده بداخل الوسم <details> مثل فقرة, رابط, صورة, قائمة إلخ..
و يمكنك أيضاً تعديل تصميمه بواسطة كود CSS ليظهر بشكل أفضل.
في المثال التالي قمنا بتحسين تصميم الوسوم الموضعة بداخل الوسم <details> بواسطة كود CSS.
المثال الأول
في المثال التالي قمنا بتحسين تصميم الوسم <details> بالإضافة إلى الوسوم الموضعة بداخله بواسطة كود CSS.