جزئیات و خلاصه

کشف کنید که جزئیات بسیار مفید و عناصر خلاصه چگونه کار می کنند و کجا از آنها استفاده کنید.

ویجت افشا یک کنترل رابط کاربری است که محتوا را پنهان و نمایش می دهد. اگر در حال خواندن این مطلب در web.dev هستید و وسعت دید شما کمتر از 106 ems است، با کلیک بر روی "در این صفحه" در بالای این پاراگراف فهرست مطالب این بخش نشان داده می شود. اگر آن را نمی‌بینید، مرورگر را کوچک کنید تا پیمایش فهرست مطالب در این صفحه را به‌عنوان ویجت افشاگری مشاهده کنید.

رابط کاربری گرافیکی آکاردئونی مجموعه‌ای از ویجت‌های افشای عمودی است. یک مورد رایج برای رابط کاربری آکاردئون، صفحه سؤالات متداول (FAQ) در بسیاری از سایت ها است. سؤالات متداول آکاردئون حاوی لیستی از سؤالات قابل مشاهده است. با کلیک بر روی یک سوال، پاسخ آن سوال گسترش می یابد، یا "افشا" می شود.

jQuery حداقل از سال 2009 یک الگوی رابط کاربری آکاردئونی را شامل می‌شود. راه‌حل اصلی آکاردئون بدون جاوا اسکریپت شامل قرار دادن هر سؤال متداول به عنوان <label> و سپس علامت زدن علامت گذاری شده و سپس نمایش پاسخ <div> هنگامی که علامت علامت زده می‌شد، را نشان می‌داد. CSS چیزی شبیه به این بود:

#FAQ [type="checkbox"] + div.answer {
  /* all the answer styles */
  display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
  display: block;
}

چرا تاریخ؟ ویجت‌های افشا، مانند آکاردئون‌ها، بدون جاوا اسکریپت یا هک‌های کنترل فرم، اضافه‌شده نسبتاً جدید هستند. عناصر <details> و <summary> فقط از ژانویه 2020 در همه مرورگرهای مدرن به طور کامل پشتیبانی می‌شوند. اکنون می‌توانید ویجت‌های افشای کاربردی، البته کمتر جذاب، تنها با استفاده از HTML معنایی ایجاد کنید. عناصر <details> و <summary> تنها چیزی است که شما نیاز دارید: آنها راهی داخلی برای مدیریت محتوای در حال گسترش و جمع شدن هستند. وقتی کاربر روی <summary> کلیک می کند یا ضربه می زند، یا زمانی که <summary> فوکوس دارد، کلید Enter را رها می کند، محتویات <details> والد به نمایان شدن تغییر می کند!

مانند تمام محتوای معنایی، شما می توانید به تدریج ویژگی ها و ظاهر پیش فرض را افزایش دهید. در این مورد، کمی CSS اضافه شده است، اما هیچ چیز دیگری:

توجه داشته باشید، این کدپن ها حاوی جاوا اسکریپت نیستند.

تغییر حالت دید: ویژگی open

عنصر <details> محفظه ویجت افشا است. <summary> خلاصه یا افسانه <details> والد خود است. خلاصه همیشه نمایش داده می شود و به عنوان دکمه ای عمل می کند که نمایش بقیه محتویات والدین را تغییر می دهد. تعامل با <summary> نمایش خواهر و برادر خلاصه خود را با تغییر دادن ویژگی open عنصر <details> ' تغییر می دهد.

ویژگی open یک ویژگی بولی است. اگر وجود داشته باشد، بدون توجه به مقدار یا کمبود آن، نشان می دهد که تمام محتوای <details> به کاربر نشان داده می شود. اگر ویژگی open وجود نداشته باشد، فقط محتوای <summary> نشان داده می شود.

از آنجایی که ویژگی open به طور خودکار با تعامل کاربر با کنترل اضافه و حذف می شود، می توان از آن در CSS برای استایل متفاوت بر اساس حالت عنصر استفاده کرد.

می‌توانید یک آکاردئون با فهرستی از عناصر <details> متعدد، که هر کدام دارای یک فرزند <summary> هستند ایجاد کنید. حذف ویژگی open در HTML به این معنی است که <details> همه جمع می‌شوند یا بسته می‌شوند و فقط سرفصل‌های خلاصه در هنگام بارگیری صفحه قابل مشاهده است. هر عنوان بازکننده بقیه مطالب در والد <details> است. اگر ویژگی open را در HTML خود وارد کنید، <details> در هنگام بارگیری صفحه، با محتویات قابل مشاهده، باز شده نمایش داده می شود.

محتوای پنهان در حالت جمع‌شده در برخی از مرورگرها قابل جستجو است اما در برخی دیگر قابل جستجو نیست، حتی اگر محتوای جمع‌شده بخشی از DOM نباشد. اگر در Edge یا Chrome جستجو کنید، جزئیات حاوی یک عبارت جستجو برای نمایش این رخداد گسترش می‌یابد. این رفتار در فایرفاکس یا سافاری تکرار نمی شود.

<summary> باید اولین فرزند عنصر <details> باشد، که نمایانگر یک خلاصه، عنوان یا افسانه برای بقیه محتویات عنصر والد <details> است که در آن قرار دارد. محتویات عنصر <summary> می تواند هر محتوای عنوان، متن ساده یا HTML باشد که می تواند در یک پاراگراف استفاده شود.

روشن کردن نشانگر خلاصه

در دو Codepen قبلی، فلش را به سمت شروع درونی خلاصه یادداشت می‌کنید. ویجت افشا معمولاً با استفاده از یک مثلث کوچک که می‌چرخد (یا می‌پیچد) روی صفحه نمایش داده می‌شود تا وضعیت باز/بسته را نشان دهد، با یک برچسب در کنار مثلث. محتویات عنصر <summary> ویجت افشا را برچسب گذاری می کند. فلش چرخان در بالای هر بخش یک ::marker روی عنصر <summary> است. مانند آیتم های لیست، عنصر <summary> از ویژگی کوتاه نویسی list-style و ویژگی های طولانی آن، از جمله list-style-type پشتیبانی می کند. می‌توانید مثلث افشا را با CSS استایل دهید، از جمله تغییر نشانگر استفاده‌شده از مثلث به هر نوع گلوله دیگری، از جمله تصویری با list-style-image .

برای اعمال سبک های دیگر، از یک انتخابگر مشابه details summary::marker استفاده کنید. شبه عنصر ::marker فقط تعداد محدودی از سبک ها را می پذیرد. حذف ::marker و ​​جایگزینی آن با ساده تر به سبک ::before تمرین معمول است، با سبک های CSS که سبک محتوای تولید شده را کمی بر اساس وجود (یا عدم وجود) ویژگی باز تغییر می دهند. می‌توانید نماد ویجت افشا را با تنظیم list-style: none یا محتوای نشانگر را روی none تنظیم کنید، اما همیشه نشانگرهای بصری را برای اطلاع کاربران بینا قرار دهید که محتوای خلاصه یک دکمه جابه‌جایی است که پس از فعال‌سازی محتوا را نشان داده و پنهان می‌کند.

details summary::before {
  /* all the styles */
}
details[open] summary::before {
  /* changes applied when open only */
}

این مثال نشانگر پیش‌فرض را حذف می‌کند و محتوای تولید شده را برای ایجاد + در هنگام بسته شدن جزئیات و a - هنگام باز بودن جزئیات اضافه می‌کند.

اگر می‌خواهید بلوک جزئیات به‌طور پیش‌فرض باز باشد، ویژگی open را در تگ <details> باز کنید. همچنین می توانید بین هر گفتگو فاصله اضافه کنید و چرخش نشانگر ایجاد شده با محتوای تولید شده را برای بهبود ظاهر انتقال دهید:

نحوه رسیدگی به خطاها

اگر <summary> را وارد نکنید، مرورگر برای شما یک نشانگر و کلمه "جزئیات" ایجاد می کند. این خلاصه بخشی از یک ریشه سایه است و بنابراین سبک های خلاصه CSS نویسنده اعمال نمی شود. متأسفانه، Safari جزئیات را در ترتیب فوکوس صفحه کلید لحاظ نمی کند.

اگر یک <summary> وارد کنید، اما اولین عنصر در <details> نیست، مرورگر همچنان خلاصه را همانطور که باید نمایش می دهد. همچنین اگر یک پیوند، برچسب یا سایر عناصر تعاملی را در خلاصه قرار دهید، شکست نخواهد خورد، اما مرورگرها محتوای تعاملی را در محتوای تعاملی متفاوت مدیریت می‌کنند. به عنوان مثال، اگر پیوندی را در خلاصه قرار دهید، برخی از مرورگرها هم خلاصه و هم پیوند را به ترتیب برگه‌های پیش‌فرض اضافه می‌کنند، اما مرورگرهای دیگر به طور پیش‌فرض روی پیوند تمرکز نمی‌کنند. اگر روی <label> تو در تو در <summary> کلیک کنید، برخی از مرورگرها به کنترل فرم مرتبط تمرکز می‌کنند. مرورگرهای دیگر به کنترل فرم تمرکز می کنند و <details> را باز یا بسته می کنند.

رابط HTMLDetailsElement

مانند همه عناصر HTML، HTMLDetailsElement تمام ویژگی‌ها، متدها و رویدادها را از HTMLElement به ارث می‌برد و ویژگی نمونه open و یک رویداد toggle را اضافه می‌کند. ویژگی HTMLDetailsElement.open یک مقدار بولی است که ویژگی HTML open را منعکس می کند و نشان می دهد که آیا محتویات عنصر (بدون احتساب <summary> ) به کاربر نشان داده می شود یا خیر. رویداد toggle زمانی فعال می شود که عنصر <details> باز یا بسته شود. می توانید با استفاده از addEventListener() به این رویداد گوش دهید.

اگر می خواهید اسکریپتی بنویسید تا جزئیات باز شده را زمانی که کاربر جزئیات دیگری را باز می کند ببندید، ویژگی open را با استفاده از removeAttribute("open") حذف کنید:

این تنها مثال برای استفاده از جاوا اسکریپت است. احتمالاً به جاوا اسکریپت نیازی ندارید، به جز این قابلیت که سایر ویجت‌های افشای باز شده را ببندید.

به یاد داشته باشید، <details> و <summary> را می‌توان به شدت طراحی کرد و حتی می‌توان از آنها برای ایجاد نکات ابزار استفاده کرد. اما، اگر می‌خواهید از این عناصر معنایی برای موارد استفاده استفاده کنید که در آن معناشناسی بومی ناهماهنگ است، همیشه اطمینان حاصل کنید که دسترسی را حفظ می‌کنید . HTML در اکثر موارد به طور پیش فرض در دسترس است. وظیفه ما به عنوان توسعه دهندگان این است که اطمینان حاصل کنیم که محتوای ما در دسترس باقی می ماند.

درک خود را بررسی کنید

دانش خود را از جزئیات و خلاصه آزمایش کنید.