50 کامل شده تا

برچسب <details> در اچ‌تی‌ام‌ال

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
جزئیات دیگری را تعریف می‌کند که کاربر می‌تواند مشاهده یا مخفی کند
معرفی شده در نسخهٔ:۵
حذف شده در نسخهٔ: هنوز در حال استفاده است
ویژگی‌های مجاز:به پائین مراجعه کنید
تنظیمات پیش‌فرض CSS:display: block;


{{منو اسکرول چپ|نام منو={{مرجع منو اچ‌تی‌ام‌ال|expanded=مرجع}}}}

مثال

جزئیاتی (details) را مشخص کنید که کاربر می‌تواند در صورت تمایل، مشاهده یا پنهان کند:

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>


تعریف و کاربرد

برچسب <details> جزئیات بیشتری را مشخص می‌کند که کاربر در صورت تمایل می‌تواند مشاهده یا پنهان کند.[۱]

از برچسب <details> می‌توان برای ایجاد یک ویجت تعاملی استفاده کرد که کاربر می‌تواند باز کند و ببندد. هر گونه محتوایی را می‌توان درون برچسب <details> قرار داد.

محتوای عنصر <details> نباید نمایان باشد مگر آنکه ویژگی باز بودن از قبل تنظیم شده باشد.

پشتیبانی مرورگر

عددهای جدول، نخستین نسخهٔ مرورگر را مشخص می‌کند که بطور کامل از عنصر پشتیبانی می‌کند.

عنصر Chrome Internet Explorer / Edge Firefox Safari Opera
<details> ۱۲٫۰ ۷۹٫۰ ۴۹٫۰ ۶٫۰ ۱۵٫۰

نکات و ملاحظات

نکته: برچسب <summary> برای مشخص کردن یک عنوان نمایان برای details به کار می‌رود. می‌توان با کلیک بر روی عنوان به مشاهده/پنهان‌سازی جزئیات details اقدام کرد.

ویژگی‌ها

ویژگی مقدار شرح
open open مشخص می‌کند که details برای کاربر نمایان (باز) باشد

ویژگی‌های سراسری

همچنین برچسب <details> از ویژگی‌های سراسری (Global Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

ویژگی‌های رویداد

همچنین برچسب <details> از ویژگی‌های رویداد (Event Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

صفحات مرتبط

HTML DOM reference: مرجع DOM اچ‌تی‌ام‌ال: شیء Details (Details Object)

تنظیمات پیش‌فرض CSS

بیش‌تر مرورگرها عنصر <details> را با مقادیر پیش‌فرض زیر نمایش می‌دهند:

details {
  display: block;
}


منابع آموزشی