פרטים וסיכום

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

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

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

‫jQuery כולל תבנית של ממשק משתמש מסוג אקורדיון לפחות מאז 2009. הפתרון המקורי של אקורדיון ללא JavaScript כלל יצירת כל שאלה ב-FAQ כ-<label> ואחריה סימן ה-V שסומן, ואז הצגת התשובה <div> כשסימן ה-V סומן. קוד ה-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:

כלומר, בקוד הזה ב-CodePen (ובכל הדוגמאות ב-CodePen) אין 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 שאפשר להשתמש בו בתוך פסקה.

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

בשני ה-Codepen הקודמים, יש חץ בצד inline-start של התקציר. בדרך כלל מוצג על המסך חץ להרחבה, משולש קטן שמסתובב (או מתפתל) כדי לציין את מצב הפתיחה או הסגירה, ותווית לצד המשולש. התוכן של התווית של רכיב <summary> מציין את הווידג'ט של הגילוי הנאות.

החץ המסתובב בחלק העליון של כל קטע הוא ::marker שמוגדר ברכיב <summary>. בדומה לפריטים ברשימה, רכיב <summary> תומך במאפיין הקיצור list-style ובמאפיינים המלאים שלו, כולל list-style-type. אפשר להגדיר את הסגנון של משולש הגילוי באמצעות CSS, כולל שינוי הסמן שמשמש כמשולש לכל סוג אחר של תבליט, כולל תמונה עם list-style-image.

כדי להחיל סגנונות אחרים, משתמשים בסלקטור דומה ל-details summary::marker. ::marker האלמנט הווירטואלי מקבל רק מספר מוגבל של סגנונות. נהוג להסיר את ::marker ולהחליף אותו ב-::before, שקל יותר להגדיר לו סגנון. סגנונות CSS משנים את הסגנון של התוכן שנוצר מעט בהתאם לנוכחות (או להיעדר) של מאפיין open. אפשר להגדיר את הערך list-style: none כדי להסיר את סמל הווידג'ט של הגילוי הנאות, או להגדיר את התוכן של הסמן לערך none, אבל תמיד צריך לכלול אינדיקטורים חזותיים כדי ליידע משתמשים עם ראייה תקינה שאפשר להחליף את התוכן של הסיכום כדי להציג ולהסתיר תוכן.

details summary::before {
  /* all the styles */
}
details[open] summary::before {
  /* changes applied when open only */
}

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

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

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

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

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

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

הממשק HTMLDetailsElement

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

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

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

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

בדיקת ההבנה

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