❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
عودة للدرس❯ ❮عودة للدرس

HTMLالوسم <details>

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

تعريفه

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

<details>
<summary>visible-content</summary>
hidden-content
</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 مدعوم مدعوم 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> لعرض عنوان و معلومات إضافية يستطيع المستخدم إظهارها و إخفائها.

المثال الأول

<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>
<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>
<details open> ... </details>

جرب الكود

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

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

details {
display: block;
}
details { 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 > 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;
}
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; }

جرب الكود

عودة للدرس❯ ❮عودة للدرس