פרטים וסיכום

מגלים איך פועלים הפרטים ורכיבי הסיכום השימושיים, ואיפה להשתמש בהם.

ווידג'ט הגילוי הנאות הוא אמצעי בקרה בממשק המשתמש להסתרה ולהצגה של תוכן. אם אתם קוראים את זה באתר web.dev, אזור התצוגה קטן מ-106 ems, לחיצה על "בדף הזה" מעל לפסקה זו תחשוף את תוכן העניינים עבור בקטע הזה. אם האפשרות הזו לא מופיעה, כווץ את הדפדפן כדי להציג את הניווט של תוכן העניינים בדף הזה בתור ווידג'ט חשיפה.

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

jQuery כולל דפוס של ממשק המשתמש אקורדיון מאז 2009 לפחות. הגרסה המקורית ללא JavaScript הפתרון של אקורדיון כלל את האפשרות להפוך כל שאלה של שאלות נפוצות ל-<label>, לאחר מכן סימן הווי שלה, ואז להציג את <div> התשובה כאשר סימן הווי סומן. שירות ה-CSS נראה בערך כך:

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

למה דווקא ההיסטוריה? ווידג'טים של גילוי נאות, כמו אקורדיון, ללא JavaScript או פריצות לניהול טפסים, הם ווידג'טים חדשים יחסית הוספה; <details> ו<summary> קיימת תמיכה מלאה באלמנטים רק בכל הדפדפנים המתקדמים מאז ינואר 2020. עכשיו תוכלו ליצור תכונות מועילות, אבל מאשר ווידג'טים אטרקטיביים עם גילוי נאות שמשתמשים ב-HTML סמנטי בלבד. הרכיבים <details> ו-<summary> הם כל מה שצריך: הם דרך מובנית לטפל בהם תוכן מתרחב ומכווץ. כשמשתמש לוחץ או מקיש על <summary>, או משחרר את המקש Enter כאשר <summary> מודגש. התוכן של מתג ההורה <details> גלוי.

כמו כל התוכן הסמנטי, אפשר לשפר בהדרגה את התכונות והמראה שמוגדרים כברירת מחדל. במקרה הזה, CSS נוסף, אבל לא שום דבר נוסף:

חשוב לשים לב שהקודים האלה לא מכילים JavaScript.

החלפת מצב הגישה: המאפיין open

הרכיב <details> הוא הקונטיינר של הווידג'ט לגילוי נאות. <summary> הוא הסיכום או המקרא של ההורה <details>. תמיד מוצג, והוא משמש כלחצן להחלפת מצב התצוגה של שאר התוכן של ההורה. אינטראקציה באמצעות <summary> החלפת מצב התצוגה של פריטי הסיכום שתויגו בתווית עצמית על ידי החלפת המצב של <details> המאפיין open של הרכיב.

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

המאפיין open נוסף והוסר באופן אוטומטי כשהמשתמש יוצר אינטראקציה עם אמצעי הבקרה, ולכן אפשר להשתמש בו ב-CSS כדי: לעצב את הרכיב באופן שונה בהתאם למצב שלו.

אפשר ליצור אקורדיון עם רשימה של מספר רכיבי <details>, ולכל אחד מהם יש צאצא <summary>. השמטת המאפיין open ב-HTML שלך, <details> יכווצ או ייסגר, ורק כותרות הסיכום יהיו גלויות כשהדף ייטען. כל כותרת היא הפתיחה לשאר התוכן שבהורה <details>. אם כוללים את המאפיין open ב-HTML, הערך של <details> יוצג במצב מורחב, והתוכן שלו יוצג כשהדף ייטען.

אפשר לחפש את התוכן המוסתר במצב מכווץ בדפדפנים מסוימים, אבל לא באחרים, למרות התוכן המכווץ לא חלק מה-DOM. אם מחפשים ב-Edge או ב-Chrome, הפרטים שמכילים מונח חיפוש יורחבו ויוצגו. את האירוע. ההתנהגות הזו לא משוכפלת ב-Firefox או ב-Safari.

הרכיב <summary> חייב להיות הצאצא הראשון של רכיב <details>, ולייצג סיכום, כיתוב או מקרא של השאר מהתוכן של רכיב ההורה <details> שבו הוא מקונן. התוכן של הרכיב <summary> יכול להיות כל כותרת תוכן, טקסט פשוט או HTML שאפשר להשתמש בהם בתוך פסקה.

הפעלה של סמן הסיכום

בשני קודי הקוד הקודמים, יופיע החץ שמצביע אל inline-start של הסיכום. ווידג'ט חשיפה לרוב מוצג במסך באמצעות משולש קטן שמסתובב (או פיתול) כדי לציין סטטוס פתוח/סגור, עם תווית ליד המשולש. לתוכן של הרכיב <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 */
}

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

אם רוצים שבלוק הפרטים ייפתח כברירת מחדל, צריך לכלול את המאפיין open בתג הפותח <details>. אפשר גם להוסיף רווח בין כל תיבת דו-שיח ולהעביר את הסיבוב של הסמן שנוצר עם התוכן שנוצר, כדי לשפר את המראה:

אופן הטיפול בשגיאות

אם לא תכללו <summary>, הדפדפן ייצור בשבילכם את: עם סמן והמילה "פרטים". הסיכום הזה הוא חלק משורש צל, ולכן לא יחולו עליו סגנונות סיכום של ה-CSS של המחבר. לצערנו, Safari לא כולל הפרטים בסדר המיקוד של המקלדת.

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

הממשק של HTMLDetailsElement

כמו כל רכיבי ה-HTML, התג HTMLDetailsElement יורש את כל נכסים, שיטות ואירועים מ-HTMLElement, ומוסיפה את מאפיין מופע open ו-toggle אירוע. הנכס HTMLDetailsElement.open הוא בוליאני המשקף את מאפיין ה-HTML open, שמציין האם יש להציג למשתמש את תוכן הרכיב (לא כולל <summary>) אירוע המתג מופעל כשמצב הרכיב <details> במצב פתוח או סגור. אפשר להאזין לאירוע הזה באמצעות addEventListener().

כדי לכתוב סקריפט שיסגור את הפרטים הפתוחים כשהמשתמש פותח פרטים אחרים, צריך להסיר את המאפיין הפתוח באמצעות removeAttribute("open"):

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

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

בדיקת ההבנה

בוחנים את הידע שלכם לגבי פרטים וסיכום.