אפשרויות נוספות לעיצוב <details>

Bramus

פורסם: 6 בנובמבר 2024

ב-Chrome 131 יש לכם יותר אפשרויות לעיצוב המבנה של רכיבי <details> ו-<summary>. עכשיו אפשר להשתמש ברכיבים האלה כשיוצרים ווידג'טים של גילוי נאות או של אקורדיון.

בפרט, השינויים שהוצגו ב-Chrome 131 מאפשרים שימוש במאפיין display ברכיבים האלה, ומוסיפים פסאודו-אלמנט ::details-content כדי לעצב את החלק שמתרחב ומתכווץ.

הגדרת display ברכיב <details>

בעבר, לא הייתה אפשרות לשנות את סוג התצוגה של רכיב <details>. ההגבלה הזו הוסרה, ועכשיו אפשר למשל להשתמש בפריסות של רשת או flex ברכיב <details>.

בדוגמה הבאה, האקורדיון הבלעדי מורכב מכמה רכיבי <details> שמוצבים זה לצד זה. כשמרחיבים אחד מהרכיבים של <details>, התוכן שלו מוצב לצד <summary>.

כדי לעשות את זה, משתמשים בפריסת flex ברכיב <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 בגיליון הסגנונות של UA, בעוד שלפני כן הוא היה 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 ולניווט ברכיב fragment. ההגדרה הזו לא משתנה.

עם זאת, לפני שמשתמשים באקורדיונים בלעדיים, כדאי לשקול אם הם מועילים למשתמשים או פוגעים בהם. שימוש באקורדיון בלעדי מצמצם את השטח החזותי שהתוכן תופס, אבל יכול להיות שהמשתמשים יצטרכו לפתוח הרבה פריטים כדי לצרוך את כל המידע. הדבר עלול לתסכל משתמשים שרוצים להסתכל על כמה פריטים בו-זמנית.

מה לגבי עיצוב הסמן?

נכון לעכשיו, העיצוב של סמן הרשימה לא פועל בצורה הדדית כי יש שתי גישות שונות: גישה אחת של 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 של wrapper. תג ה-div של ה-wrapper מקבל את סגנונות הפריסה כמו padding, והפסאודו ::details-content מונפש.