الفرق بين المراجعتين لصفحة: «HTML/details»

المراجعة الحالية بتاريخ 04:42، 24 فبراير 2018

يُستخدم العنصر <details> لعرض معلومات إضافية للمستخدم يمكنه إظهارها وإخفاؤها متى شاء. يمكن وضع أيّ نوع من المحتوى ضمن العنصر <details>، وتكون محتوياته مخفيةً افتراضيةً (إلا إذا ضُبِطَت الخاصية open).

مثال عن استخدام العنصر <details> مع العنصر <summary>، لاحظ أنَّ الخاصية open ستجعل المتصفح يُظهِر المحتوى عند تحميل الصفحة:

<details>
  <summary>أحد التفاصيل</summary>
  <p>معلومات إضافية حول التفصيل الأول</p>
</details>

<details open>
  <summary>تفصيلٌ آخر</summary>
  <p>معلومات إضافية حول التفصيل الثاني</p>
</details>

بطاقة العنصر

تصنيفات المحتوى	عنصر تنظيمي وعنصر تقسيمي وعنصر تفاعلي.
المحتوى المسموح	عنصر `<summary>` وحيد يليه محتوى عادي.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل المحتوى التنظيمي.
واجهة DOM	`HTMLDetailsElement`

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
12	49	قيد التطوير	6	15

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

`open`

قيمة منطقية تُشير إذا كانت التفاصيل ستظهر للمستخدم بعد تحميل الصفحة مباشرةً، القيمة الافتراضية هي false أي أنَّ المحتوى يكون مخفيًا بدايةً.

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <details> مع ضبط الخاصية display إلى block:

details {
  display: block;
}

مصادر ومواصفات

معيار HTML Living Standard.
مواصفة HTML 5.1.

@@ سطر 5: / سطر 5: @@
 <syntaxhighlight lang="html">
 <details>
-   <summary>Some details</summary>
+   <summary>أحد التفاصيل</summary>
-   <p>More info about the details.</p>
+   <p>معلومات إضافية حول التفصيل الأول</p>
 </details>
 <details open>
-   <summary>Even more details</summary>
+   <summary>تفصيلٌ آخر</summary>
-   <p>Here are even more details about the details.</p>
+   <p>معلومات إضافية حول التفصيل الثاني</p>
 </details>
 </syntaxhighlight>
+== بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 53: / سطر 54: @@
 قيمة منطقية تُشير إذا كانت التفاصيل ستظهر للمستخدم بعد تحميل الصفحة مباشرةً، القيمة الافتراضية هي <code>false</code> أي أنَّ المحتوى يكون مخفيًا بدايةً.
+==التنسيق الافتراضي==
+تعرض أغلبية المتصفحات العنصر <code><details></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>block</code>:<syntaxhighlight lang="css">
+details {
+  display: block;
+}
+</syntaxhighlight>
 ==مصادر ومواصفات==
 *معيار [https://html.spec.whatwg.org/multipage/forms.html#the-details-element HTML Living Standard].
 *مواصفة [https://www.w3.org/TR/2016/REC-html51-20161101/semantics.html#the-details-element HTML 5.1].
 [[تصنيف:HTML|{{SUBPAGENAME}}]]
-[[تصنيف:Forms|{{SUBPAGENAME}}]]
-[[تصنيف:Input Types|{{SUBPAGENAME}}]]