مزيد من خيارات التصميم <details>

Bramus

تاريخ النشر: 6 نوفمبر 2024

بدءًا من الإصدار 131 من Chrome، تتوفّر لك خيارات إضافية لتنسيق بنية العنصرَين <details> و<summary>. يمكنك الآن استخدام هذه العناصر عند إنشاء أدوات الإفصاح أو التطبيقات المصغّرة القابلة للتوسيع.

على وجه الخصوص، تتيح التغييرات التي تم إدخالها في الإصدار 131 من Chrome استخدام السمة display على هذه العناصر، كما تضيف العنصر الزائف ::details-content لتنسيق الجزء الذي يتم توسيعه وتصغيره.

ضبط display على العنصر <details>

في السابق، لم يكن من الممكن تغيير نوع العرض للعنصر <details>. تم تخفيف هذا القيد الآن، ما يتيح لك، على سبيل المثال، استخدام تخطيطات الشبكة أو التخطيطات المرنة على العنصر <details>.

في المثال التالي، يتألف الأكورديون الحصري من عدة عناصر <details> موضوعة جنبًا إلى جنب. عند توسيع أحد عناصر <details>، يتم وضع محتواه بجانب <summary>.

يتم تحقيق ذلك باستخدام تخطيط مرن على العنصر <details>، وذلك باستخدام CSS التالي:

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

يُسمح أيضًا بقيم العرض الأخرى، مثل grid.

ملاحظة حول استخدام display: inline

قيمة display التي يمكن أن تؤدي إلى نتيجة غير متوقّعة هي inline. ليس لأنّها لا تعمل، بل بسبب القيود المفروضة على محلّل HTML.

عند وضع عنصر <details> داخل فقرة، يتم إجبار محلّل HTML على إغلاق الفقرة المفتوحة أولاً، كما هو موضّح في الفقرة 13.2.6.4.7 من معيار HTML:

علامة بداية يكون اسم العلامة فيها أحد الأسماء التالية: "address" أو "article" أو "aside" أو "blockquote" أو "center" أو "details" أو "dialog" أو "dir" أو "div" أو "dl" أو "fieldset" أو "figcaption" أو "figure" أو "footer" أو "header" أو "hgroup" أو "main" أو "menu" أو "nav" أو "ol" أو "p" أو "search" أو "section" أو "summary" أو "ul"

إذا كانت حزمة العناصر المفتوحة تتضمّن عنصر p في نطاق الزر، أغلِق عنصر p. أدرِج عنصر HTML للرمز المميّز.

نتيجةً لذلك، يسير <details> في اتجاه الحظر، بغض النظر عمّا إذا كنت قد ضبطت display: inline أم لا.

على سبيل المثال، الترميز التالي

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

يصبح هذا بعد التحليل:

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

يمكنك الاطّلاع على ذلك بنفسك في هذا العرض التوضيحي من خلال فحص الترميز الذي تم تحليله باستخدام "أدوات مطوّري البرامج في Chrome".

يُرجى العِلم أنّ هذا ينطبق فقط على التداخل <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-content فقط عندما يكون العنصر <details> في الحالة [open].

تم ضبط نوع display من ::details-content على block في ورقة الأنماط الخاصة بالإصدار Universal Analytics، بينما كان في السابق 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 لتفعيلها.

بالإضافة إلى العرض التوضيحي الحصري الذي تمت مشاركته سابقًا، تصبح النتيجة كما يلي:

يمكن أيضًا تحريك 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> بشكل جميل.

في المتصفّحات التي لا تتوافق مع ::details-content، يظلّ المكوّن يعمل بشكل جيد. الشيء الوحيد الذي لا يراه الزوّار هو الصورة المتحركة.

رصد الميزات

لإتاحة ميزة رصد دعم العنصر الزائف ::details-content في CSS، استخدِم المقتطف التالي.

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

يمكنك أيضًا استخدام عملية الرصد هذه كفحص دقيق لمعرفة ما إذا كان المتصفّح الذي يستخدمه الزائر يتيح قيم العرض الإضافية أم لا.

اعتبارات تسهيل الاستخدام

لا يؤثر تقديم العنصر الزائف ::details-content وإمكانية تغيير نوع العرض في إمكانية الوصول إلى العنصر <details>.

كما كان الحال من قبل، على الأقل في المتصفحات المستندة إلى Chromium ووفقًا لمعيار HTML، يمكن البحث عن العنصر <details> ويتوسّع تلقائيًا عندما يحاول المتصفح الانتقال إلى محتواه المخفي استجابةً لعمليات البحث في الصفحة وScrollToTextFragment والتنقّل بين أجزاء العناصر. ولن يتغيّر ذلك.

ومع ذلك، قبل استخدام الأكورديون الحصري، يجب التفكير في ما إذا كان مفيدًا للمستخدمين أو ضارًا بهم. على الرغم من أنّ استخدام قائمة حصرية قابلة للطي يقلّل من المساحة المرئية التي يشغلها المحتوى، قد يضطر المستخدمون إلى فتح العديد من العناصر للاطّلاع على جميع المعلومات. قد يؤدي ذلك إلى إحباط المستخدمين الذين يريدون الاطّلاع على عدة عناصر في الوقت نفسه.

ماذا عن تصميم العلامة؟

في الوقت الحالي، لا يمكن التشغيل التفاعلي لأسلوب علامة القائمة لأنّ هناك طريقتَين مختلفتَين، إحداهما تستخدمها Gecko وChromium (الحالي)، والأخرى تستخدمها WebKit (التي كانت تتم مشاركتها سابقًا مع Chromium).

بعد أن تصبح الميزة قابلة للتشغيل التفاعلي، نهدف إلى منحك تحكّمًا أفضل في طريقة تصميم العلامة.

المزيد من العروض التوضيحية

في الختام، إليك بعض العروض التوضيحية الأخرى التي يمكنك الاطّلاع عليها. تستخدم جميعها ::details-content.

أكورديون UIKit

تم إنشاء هذا العرض التوضيحي بعد UIKit Accordion. الرمز هو نفسه عمليًا رمز الأكورديون في Material UI الذي تمت مشاركته من قبل.

أداة عرض مفتوحة جزئيًا

يعرض هذا العرض التوضيحي أداة إفصاح مفتوحة جزئيًا يظهر محتواها على الشاشة. لتحقيق ذلك، يتم ضبط 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 */
}

لتسهيل عملية تصميم المحتوى، يتم تضمينه في عنصر div. ويتم تطبيق أنماط التنسيق، مثل padding، على عنصر div، ويتم تحريك العنصر الزائف ::details-content.