פרטים וסיכום

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

ווידג'ט גילוי נאות הוא אמצעי בקרה בממשק המשתמש שמסתיר ומציג את התוכן. אם אתם קוראים את המידע הזה ב-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, אבל לא שום דבר נוסף:

שימו לב שה-Codepens האלה לא מכיל JavaScript.

החלפת מצב החשיפה: המאפיין 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, הפרטים שכוללים מונח חיפוש יורחבו ויציגו את האירוע. התנהגות זו לא משוכפלת ב-Firefox או ב-Safari.

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

החלפת מצב של סמן הסיכום

בשני ה-Codepens המוקדמים יותר תוכלו לראות את החץ לצד 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 לרוב נגיש כברירת מחדל. התפקיד שלנו כמפתחים הוא להבטיח שהתוכן שלנו יישאר נגיש.

בחינת ההבנה

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