گزینه های بیشتر برای یک ظاهر طراحی شده <جزئیات>

براموس

تاریخ انتشار: 6 نوامبر 2024

از Chrome 131 گزینه های بیشتری برای استایل دادن به ساختار عناصر <details> و <summary> دارید. اکنون می توانید از این عناصر هنگام ساخت ویجت های افشا یا آکاردئون استفاده کنید.

به طور خاص، تغییرات ایجاد شده در کروم 131 استفاده از ویژگی display را در این عناصر امکان‌پذیر می‌سازد و یک شبه عنصر ::details-content اضافه می‌کند تا به بخشی که گسترش می‌یابد و جمع می‌شود، استایل دهید.

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

  • کروم: 131.
  • لبه: پشتیبانی نمی شود.
  • فایرفاکس: پشتیبانی نمی شود.
  • سافاری: پشتیبانی نمی شود.

تنظیم display در عنصر <details>

از لحاظ تاریخی امکان تغییر نوع نمایش عنصر <details> وجود نداشت. این محدودیت اکنون کاهش یافته است و به شما امکان می دهد، برای مثال، از طرح بندی شبکه ای یا انعطاف پذیر در عنصر <details> استفاده کنید.

در مثال زیر، آکاردئون انحصاری شامل چندین عنصر <details> است که در کنار هم قرار گرفته اند. هنگام گسترش یکی از عناصر <details> ، محتوای آن در کنار <summary> قرار می گیرد.

نسخه ی نمایشی

در حال ضبط

ضبط https://codepen.io/web-dot-dev/pen/VwoBQjY در Chrome 131

این با استفاده از یک طرح انعطاف پذیر در عنصر <details> ، با استفاده از CSS زیر به دست می آید:

details {
  display: flex;
  flex-direction: row;
}

همچنین مقادیر نمایشگر دیگری مانند grid مجاز هستند.

نکته ای در مورد استفاده از display: inline

یک مقدار display که می‌تواند نتیجه غیرمنتظره‌ای داشته باشد inline است. نه به این دلیل که کار نمی کند بلکه به دلیل محدودیت های تجزیه کننده HTML.

هنگام قرار دادن یک عنصر <details> در داخل یک پاراگراف، تجزیه کننده HTML را مجبور می کند تا ابتدا پاراگراف باز را ببندد، همانطور که در بخش 13.2.6.4.7 استاندارد HTML تعریف شده است:

یک تگ شروع که نام تگ آن یکی از موارد زیر است: "آدرس"، "مقاله"، "کنار"، "بلاک نقل قول"، "مرکز"، "جزئیات"، "گفتگو"، "dir"، "div"، "dl"، "fieldset"، "figcaption"، "figure"، "footer"، "header"، "hgroup"، "main"، "menu"، "nav"، "ol"، "p"، "search"، "section" "، "خلاصه"، "ul"

اگر پشته عناصر باز دارای عنصر ap در محدوده دکمه است، عنصر ap را ببندید. یک عنصر HTML برای توکن درج کنید.

در نتیجه، <details> در جهت بلوک جریان می یابد، بدون توجه به اینکه شما display: inline .

به عنوان مثال، نشانه گذاری زیر

<p>Hello <details>…</details> world</p>

پس از تجزیه به این تبدیل می شود:

<p>Hello </p><details>…</details> world<p></p>

می‌توانید با بررسی نشانه‌گذاری تجزیه‌شده با استفاده از Chrome DevTools، خودتان در این نسخه نمایشی ببینید.

توجه داشته باشید که این فقط برای قرار دادن <details> در داخل <p> صدق می کند. استفاده از display: inline روی <details> در داخل <div> به خوبی کار می کند.

شبه ::details-content

در مرورگرها، عنصر <details> با استفاده از Shadow DOM پیاده سازی می شود. این شامل یک <slot> برای خلاصه (با یک فرزند خلاصه پیش‌فرض) و یک <slot> برای همه محتوای باقی‌مانده است، به این معنی که همه فرزندان عنصر <details> به جز عنصر <summary> .

<details>
  ↳ #shadow-root (user-agent)
      <slot id="details-summary">
        <summary>Details</summary>
        <!-- The summary goes here -->
      </slot>
      <slot id="details-content">
        <!-- All content goes here -->
      </slot>
</details>

علاوه بر استفاده از انواع نمایش بیشتر در <details> ، اکنون می توان با استفاده از عنصر شبه ::details-content جایگاه محتوا را هدف قرار داد. می‌توانید از این شبه برای استایل دادن به محفظه‌ای که محتوای عنصر <details> را می‌پیچد، استفاده کنید.

details::details-content {
  border: 5px dashed hotpink;
}

برای اعمال سبک مجموعه فقط زمانی که عنصر <details> در حالت باز است، انتخابگر [open] را به آن اضافه کنید.

[open]::details-content {
  border: 5px dashed hotpink;
}

توصیه می شود که فقط زمانی که عنصر <details> در حالت [open] است، استایل را برای شبه ::details-content اعمال کنید.

نسخه ی نمایشی

در حال ضبط

ضبط https://codepen.io/web-dot-dev/pen/oNKMEYv در Chrome 131

نوع display ::details-content به گونه ای تنظیم شده است که در شیوه نامه UA block ، در حالی که قبلا display: contents . این تغییر ممکن است در برخی موارد علیه شما کارساز باشد، مانند محتوای فاش شده با تکیه بر height: 100% . اگر این مشکل برای شماست، می‌توانید با تنظیم نوع display بر روی contents ، آن را حل کنید، مانند: details[open]::details-content { display: contents; } .

متحرک سازی شبه ::details-content

می‌توانید محتوای عنصر <details> را با گسترش آن متحرک کنید. در مثال زیر، عرض از 0px به 300px متحرک می شود.

::details-content {
  transition: width 0.5s ease, content-visibility 0.5s ease allow-discrete;
  width: 0;
}

[open]::details-content {
  width: 300px;
}

علاوه بر انتقال width ، ویژگی content-visibility نیز نیاز به انتقال دارد. این به این دلیل است که مقدار آن بین حالت باز نشده و باز شده، همانطور که در شیوه نامه User-Agent تعریف شده است، تغییر می کند. از آنجایی که این ویژگی یک ویژگی کاملا متحرک است، برای اینکه کار کند به کلمه کلیدی allow-discrete نیاز دارید.

با اضافه شدن به دمو انحصاری آکاردئون که قبلاً به اشتراک گذاشته شده بود، نتیجه این می شود:

نسخه ی نمایشی

در حال ضبط

ضبط https://codepen.io/web-dot-dev/pen/XWvBZNo در Chrome 131

height را نیز می توان متحرک کرد. برای متحرک سازی به height: auto ، باید از interpolate-size یا calc-size() استفاده کنید . علاوه بر این، برای جلوگیری از خروج محتوا از شبه ::details-content ، overflow: clip روی آن اعمال کنید.

::details-content {
    transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
    height: 0;
    overflow: clip;
}

/* Browser supports interpolate-size */
@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }

    [open]::details-content {
        height: auto;
    }
}

/* Fallback for browsers with no interpolate-size support */
@supports not (interpolate-size: allow-keywords) {
    [open]::details-content {
        height: 150px;
        overflow-y: scroll; /* In case the contents should be taller than 150px */
    }
}

می‌توانید این کد را در دمو زیر، با الهام از آکاردئون Material UI مشاهده کنید. محتوای هر عنصر <details> به خوبی متحرک می شود.

نسخه ی نمایشی

در حال ضبط

ضبط https://codepen.io/web-dot-dev/pen/ExqpQZM در Chrome 131

در مرورگرهایی که از ::details-content پشتیبانی نمی کنند، کامپوننت همچنان به خوبی کار می کند. تنها چیزی که بازدیدکنندگان نمی توانند ببینند انیمیشن است.

تشخیص ویژگی

برای قابلیت تشخیص پشتیبانی از شبه ::details-content در CSS، از قطعه زیر استفاده کنید.

@supports selector(::details-content) {
  …
}

همچنین می‌توانید از این تشخیص به‌عنوان یک بررسی هشداردهنده استفاده کنید تا بفهمید مرورگری که بازدیدکننده شما استفاده می‌کند از مقادیر نمایش اضافی پشتیبانی می‌کند یا خیر.

ملاحظات دسترسی

معرفی شبه عنصر ::details-content و قابلیت تغییر نوع نمایش تاثیری بر دسترسی عنصر <details> ندارد.

مانند قبل، حداقل در مرورگرهای مبتنی بر Chromium و طبق استاندارد HTML ، عنصر <details> قابل جستجو است و هنگامی که مرورگر سعی می‌کند به محتویات پنهان خود در پاسخ به جستجو در صفحه، ScrollToTextFragment و ناوبری قطعه عنصر پیمایش کند، به‌طور خودکار گسترش می‌یابد. . این تغییر نمی کند.

با این حال، قبل از استفاده از آکاردئون های انحصاری، در نظر بگیرید که آیا برای کاربران مفید یا مضر است. در حالی که استفاده از آکاردئون انحصاری میزان اشغال فضای بصری را کاهش می دهد، کاربران ممکن است مجبور شوند موارد زیادی را برای مصرف تمام اطلاعات باز کنند. این ممکن است کاربرانی را که می خواهند همزمان به چندین مورد نگاه کنند ناامید کند.

در مورد یک ظاهر طراحی شده نشانگر چطور؟

در حال حاضر شکل‌دهی نشانگر فهرست قابل همکاری نیست، زیرا دو رویکرد متفاوت وجود دارد، یکی توسط Gecko و (فعالی) Chromium و دیگری توسط WebKit (که قبلاً با Chromium به اشتراک گذاشته شده بود).

هنگامی که این ویژگی قابل تعامل است، هدف ما این است که به شما کنترل بهتری بر نحوه استایل دادن به نشانگر بدهیم.

دموهای بیشتر

برای بستن، در اینجا چند نسخه نمایشی دیگر برای شما آورده شده است که باید آنها را بررسی کنید. همه آنها از ::details-content استفاده می کنند.

آکاردئون UIKit

نسخه ی نمایشی

در حال ضبط

ضبط https://codepen.io/web-dot-dev/pen/rNXrJyQ در Chrome 131

این نسخه ی نمایشی پس از UIKit آکاردئون ساخته شده است. کد عملاً مشابه آکاردئون Material UI است که قبلاً به اشتراک گذاشته شده بود.

ویجت افشای نیمه باز شد

نسخه ی نمایشی

در حال ضبط

ضبط https://codepen.io/web-dot-dev/pen/PoMBQmW در Chrome 131

این نسخه نمایشی دارای یک ویجت افشای نیمه باز است که محتوای آن از قبل روی صفحه قابل مشاهده است. برای رسیدن به این هدف، content-visibility همیشه روی visible تنظیم شده است. height با استفاده از calc-size() متحرک می شود زیرا یک محاسبه در آن دخیل است. 

::details-content {
  content-visibility: visible; /* Make it always visible */
    
  transition: height 0.5s ease;
  height: 150px;
  overflow: clip;
}

[open]::details-content {
  height: calc-size(auto, size + 0.5rem); /* calc-size because we need to add a length */
}

برای راحتی ظاهر، محتوا در یک لفاف بسته بندی شده است. wrapper div سبک های چیدمان مانند padding اعمال می شود و شبه ::details-content متحرک می شود.