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

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

فلش توسعه دهنده، که گاهی اوقات به عنوان ویجت افشا شناخته می شود، یک کنترل رابط کاربری است که محتوا را پنهان و نشان می دهد. اگر در حال خواندن این مطلب در 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 اضافه شده است:

یعنی این CodePen (و همه نمونه های CodePen) جاوا اسکریپت ندارد.

قابلیت مشاهده را با ویژگی 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 نویسنده اعمال نمی شود.

اگر یک <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 در اکثر موارد به طور پیش فرض در دسترس است. وظیفه ما به عنوان توسعه دهندگان این است که مطمئن شویم محتوایمان در دسترس باقی می ماند.

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

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