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

HTMLالوسم <summary>

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

تعريفه

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

<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 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>
<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>

جرب الكود

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

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

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

جرب الكود

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