20 דרכים פשוטות לעיצוב אלמנט ה-details ב-HTML

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

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

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

Table of Contents

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

הכרות עם אלמנט הפרטים

הנה הקוד הבסיסי עבור האלמנט <details>:

<details>
  <summary>Click me!</summary>
  <p>Peekaboo! Here's some hidden content!</p>
</details>

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

הנה דוגמה חייה של הקוד זה:

Click me!

פיקאבו! הנה תוכן חבוי!

בואו נבחן את כל הדרכים בהן נוכל להשתמש ב-CSS כדי לשפר את המראה של האלמנט <details> שלנו.

צבעי רקע, גבולות ושוליים

A really simple way to enhance the look of the <details> element is to add some padding along with a border or some background colors.

הוספת גבול

כפי שנראה בסימניה למעלה, גבול פשוט יכול לעשות הרבה כדי לשפר ולהגדיר את האלמנט <details>, יחד עם שוליים ורדיוס גבול קל:

details {
  padding: 10px; 
  border: 5px solid #f7f7f7;
  border-radius: 3px;
}

זהו הקוד הפשוט שהשתמשנו בו למעלה כדי להתאים את מראה שולחן הניווט שלנו.

הוספת צבע רקע

בואו נוסיף צבע רקע לאלמנט <details> שלנו במקום גבול:

details {
  padding: 10px;
  background-color: #e4eaef;
  border-radius: 5px;
}

התוצאה מוצגת בפנק למטה.

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

אנו יכולים גם לתת צבע רקע שונה לאלמנט <summary> כדי להבדיל אותו משאר התוכן, ולשנות את צבע הטקסט שלו:

summary {
  background-color: #2196F3;
  color: white;
  padding: 10px;
}

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

עיצוב הסמל

האלמנט <summary> מוגדר כdisplay של list-item. לכן החץ הברור (▶) שמגיע עימו יכול להשתנות בדיוק כמו הסמלים הברורים בפריטי רשימת HTML. אנו יכולים לשנות את התו שמשמש ולשנות בנפרד את צבעו.

שינוי צבע הסמל

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

summary::marker {
  color: #e162bf;
  font-size: 1.2em;
}

התוצאה מוצגת למטה.

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

שינוי המרחק של הסמל

כברירת מחדל, החץ הסמלי קרוב למדי לטקסט הסיכום. המאפיין list-style-position מוגדר כinside. אם נשנה אותו לoutside, נוכל להוסיף מרחק בין טקסט הסיכום לבין הסמל על ידי הוספת כמה פרדינג שמאלי. עלינו גם להוסיף מרווח שמאלי כדי שהמשולש לא יצא מחוץ למכלאה:

summary {
  list-style-position: outside;
  margin-left: 30px;
  padding: 10px 10px 10px 20px;
  border-radius: 5px;
}

התוצאה מוצגת למטה.

I’ve exaggerated the spacing between the arrow marker and the summary text just to make it obvious. Unfortunately, using list-style-position: outside; with the <summary> element doesn’t work in Safari. Fortunately, there are other options, as we’ll see below.

שינוי צורת הסמל

הסמן על האלמנט <summary> שלנו לא חייב להיות משולש. אנו יכולים להחליף אותו בכל תו שנרצה:

summary {
  list-style-type: '⬇ ';
}

שימו לב שהשתמשנו ב'⬇ ' (עם רווח ליד החץ), שהוא אלטרנטיבי לרווח שניסינו לעיל.

עכשיו יש לנו חץ מטה במקום משולש. אבל… החץ המטה הזה לא ישתנה כשהאלמנט <details> פתוח. זה משום שלאלמנט <details> יש שתי מצבים — סגור ופתוח — וקבענו את סגנון הסמן רק עבור המצב סגור. אז בואו נקבע גם סמן עבור המצב פתוח:

details[open] > summary {
  list-style-type: '⬆ ';
}

הפעם השתמשנו בחץ מכוון מעלה. זה נותן לנו את התוצאה המוצגת למטה.

לעזאזל! שוב, ספארי מאכזבת אותנו, שכן היא לא תומכת גם בlist-style-type על האלמנט <summary> גם לא. אל תייאשו, עם זאת, שכן נבחן פתרונות מפוארים למטה.

אנו יכולים לנסות כל מיני תווים אחרים, כגון + ו–, ✓ וΧ או ✗, ⋁ ו⋀ , ואפילו להנות מתווים אחרים כמו ★ או פירות צבעוניים כמו 🍏 🍌 🍓 🍋 ו🍐, אך יש לזכור שתווים אלה אולי לא יעבדו בכל המערכות, אז היזהרו קצת, ושוב, list-style-type בהחלט לא יעבוד בספארי.

יצירת סמן מUSTOM לאלמנט summary

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

הסרת המסמך המותאם אישית

כמו שקורה עם סמני פריטי רשימה, אנו יכולים להסיר את הסמן לגמרי:

summary  {
  list-style: none;
}

/* נאנחים, שוב ספארי */

summary::-webkit-details-marker {
  display: none;
}

הסטנדרטי list-style: none עובד בכל הדפדפנים למעט… (אתה יכול לנחש?) … ספארי. לפחות יש אופציה פריטית -webkit- במקרה זה.

הערה: דרך נוספת להסיר את הסמן מהאלמנט <summary> היא להעניק לאלמנט <summary> ערך של display שונה מ- list-item – כמו block או flex. זה עובד בכל הדפדפנים למעט… (אפילו צריך לומר את זה?) … ספארי.

עכשיו לאלמנט שלנו אין סמן.

ללא סמן לא מבהיר בכלל שהאלמנט הזה ניתן ללחיצה, אז זה לא רעיון טוב להשאיר את זה ככה.

שימוש בתמונת רקע כסמן

יכולנו למקם תמונה על הרקע, כך:

summary {
  list-style: none;
  padding: 10px 10px 10px 40px;
  background: url(arrow.svg) no-repeat 14px 50%;
  background-size: 18px;
  font-weight: bold;
}

התוצאה מוצגת להלן.

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

שימוש בתמונת רקע כסמן עם ::after

בואו נשים את תמונת הרקע בתוך האלמנט הווירטואלי ::after:

summary {
  display: flex;
}

summary::after {
  content: '';
  width: 18px;
  height: 10px;
  background: url('arrow.svg');
  background-size: cover;
  margin-left: .75em;
  transition: 0.2s;
}

details[open] > summary::after {
  transform: rotate(180deg);
}

הנה דוגמה חייה של הקוד הזה.

השתמשנו ב-display: flex על האלמנט <summary> כדי להקל על מיקום החץ בצורה אופקית.

הדבר הנחמד בסידור זה הוא שאפשר להוסיף תנועה לחץ. (התנועה לא נראית כמעט בספארי, אך ההתנהגות די טובה, ואני מתחיל להשתומם מדפדפן האינטרנט הזה!)

הפיכת אלמנט הסיכום להראות כמו תפריט

הקיבוצה של אלמנט <summary> לרוחב מלא, אך זה לא חייב להיות כך. נוכל להפוך אותו להראות יותר כמו תפריט, עם שינוי פשוט זה:

summary {
  display: inline-flex;
}

דוגמה מוצגת להלן.

הגבלת רוחב אלמנט הפרטים

בכל הדוגמאות שלנו עד כה, האלמנט <details> התארך לרוחב מלא של האריגן שלו, מכיוון שזה אלמנט רגיל. אנו יכולים להעניק לו רוחב אחר, עם זאת, אם אנו לא רוצים שזה יהיה כל כך רחב, כמו width: 50%;. או שיכולנו לקבוע שזה יהיה בתצוגה קווית כך שזה יהיה רק ברוחב התוכן שלו:

details {
  display: inline-block;
}

לחץ על הכרטיסיה למטה כדי לחשוף את הרוחב הצר יותר של האלמנט <details>.

נסה לשנות display: inline-block ל width: 50% בפנים מעלה.

מקמת חץ הסמן בקצה הרחוק של הסיכום

בואו נעשה משהו קצת שונה עכשיו, ממקמים את חץ הסמן בצד ימין של האלמנט <summary>. מכיוון שהשתמשנו ב display: flex, העברת החץ לקיצוני הימין היא קלה כמו הוספת justify-content: space-between לאלמנט <summary>:

summary {
  display: flex;
  justify-content: space-between;
}

שימוש ב ::after כסמן בלי תמונת רקע

ישנן דרכים אחרות שנוכל להשתמש ב ::after בלי תמונה אמיתית. הנה דוגמה שמשתמשת רק ב ::after עם גבולות:

summary::after {
  content: '';
  width: 0; 
  height: 0; 
  border-top: 10px solid #15171b;
  border-inline: 7px solid transparent;
  transition: 0.2s;
}

הנה הדגמה חייב.

עכשיו יש לנו חץ שמסתובב בין המצב הסגור והפתוח. הוספנו גם צללית נעימה לאלמנט <details>.

דרך נוספת להשתמש ב ::after בלי תמונה היא להכניס תווים Unicode בתוך מצביע התכונה:

summary::after {
  content: "\25BC";
  transition: 0.2s;
}

זה מגדיר צורת משולש של (▼) כסמן שלנו, כפי שמוצג בדף ההדגמה בCodePen זה.

יש אלפי סמלים Unicode, והם די כיף לחקור. כל אחד מגיע עם קוד כמו U + 25BC או U + 025BC. כדי להשתמש בקוד זה בתכונה content, קח את התווים אחרי ה + והכנס אותם בתוך הציטוטים של content, עם \ בחזית: content: "\25BC". אם יש אחד או יותר אפסים בהתחלה, אפשר להשאיר אותם. (לדוגמה, U + 02248 יכול להפוך ל "\02248" או "\2248".)

מספר שונות נוספות

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

אפקט של מצב על האלמנט `<details>`

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

details {
  transition: 0.2s background linear;
}

details:hover {
  background: #dad3b1;
}

בזמן שאנו נמצאים בזה, בואו גם נעבור את צבע הטקסט של האלמנט <summary> במצב open:

details > summary {
  transition: color 1s;
}

details[open] > summary {
  color: #d9103e;
}

התוצאה מוצגת להלן.

אנו יכולים גם פשוט לקבוע שינוי רקע על האלמנט <summary> במקום.

מתיחות בפתיחה וסגירה של האלמנט מפרטים

האהא, פיתית! נראה שאין אפשרות להנפיש את פתיחת וסגירת האלמנט <details>. לפי MDN:

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

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

details article {
  opacity: 0;
}

details[open] article {
  animation: fadeIn .75s linear forwards;
}

@keyframes fadeIn {
 0% {
   opacity: 0;
 }
 100% {
   opacity: 1;
 }
}

התוצאה מוצגת למטה.

טריק נוסף עשוי להיות להחליק את התוכן, כך:

details {
  overflow: hidden;
}

details[open] article {
  animation: animateUp .5s linear forwards;
}

@keyframes animateUp {
  0% {
    opacity: 0;
    transform: translatey(100%);
  }
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}

התוצאה מוצגת למטה.

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

שינוי תוכן הסיכום במצבים פתוח וסגור

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

summary::after {
  content: " to show hidden content";
}

details[open] summary::after {
  content: " to hide extra content";
}

זה נותן לנו את התוצאה המוצגת למטה.

שינוי סמן העקיצה של הסיכום

סרטון עכשיו

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

למרבה הכיף, בואו נשנה לסמן היד (או "סמן"):

summary {
  cursor: pointer;
}

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

יכולנו לקבוע את הסמן על האלמנט <details> במקום, מה שיכריח את סמן היד לרוחב כל האלמנט <details>. אני מעדיף לשמור אותו רק על הדבר שאנו צריכים ללחוץ.

שינוי סגנונות ההתמצאות לצופן נגישות

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

הם בעיקר סגנון פשוט, כהה (כחול או שחור), עיגול מלא שהוא בערך 3px רוחב.

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

summary:focus {outline: none;}
summary:focus-visible {outline: 3px dotted #ff0060;}
summary {padding: 10px;}

כברירת מחדל, המעיל של המיקום אינו מוצג כשאנו לוחצים על האלמנט <summary>. אך אם נשנה את עיצוב המיקום, העיצוב הזה מוצג אף למשתמשים שאינם משתמשים במקלדת (כלומר, כשאנו לוחצים על האלמנט <details> בעזרת עכבר). אז בקוד לעיל, הגדרנו את outline ל-none ובמקום זאת השתמשנו ב-focus-visible כדי לקבוע את העיצובים, מה שאומר שעיצובי המיקום יוצגו רק למשתמשי המקלדת (שזה באמת שימושי עבורם).

התמונה למטה מראה את העיצוב החדש שלנו.

הנה דגמה חיה.

נוכל לעשות הרבה כיף עם זה, באמצעות אנימציות, צבעי רקע וכן הלאה כשהאלמנט <details> במיקום. אני אשאיר לך לחקור רחב יותר.

שימוש במספר אלמנטי פרטים כמו רשימת אקורדיון

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

אין כרגע דרך לעשות זאת רק עם HTML ו-CSS, אך יש כמה דוגמאות ממציאותיות לעשיית זאת באמצעות JavaScript (כגון כאן, כאן, ו-כאן).

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

הנה דוגמה פשוטה:

details {
  background-color: #2196F3;
}

details[open] {
  background-color: #ce0e99;
}

עיצוב כותרת בתוך הסכימה

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

summary h2 {
  display: inline;
}

אתה יכול לבדוק הדגמה של זה ב- CodePen.

מסקנה

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

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

ללמוד עוד על האלמנט <details>, בדוק את הבאים:

הכניסה של MDN על אלמנט הפרטים
המפרט של whatwg.org לגבי אלמנט הפרטים

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

הכרות עם אלמנט הפרטים

צבעי רקע, גבולות ושוליים

הוספת גבול

הוספת צבע רקע

עיצוב הסמל

שינוי צבע הסמל

שינוי המרחק של הסמל

שינוי צורת הסמל

יצירת סמן מUSTOM לאלמנט summary

הסרת המסמך המותאם אישית

שימוש בתמונת רקע כסמן

שימוש בתמונת רקע כסמן עם ::after

הפיכת אלמנט הסיכום להראות כמו תפריט

הגבלת רוחב אלמנט הפרטים

מקמת חץ הסמן בקצה הרחוק של הסיכום

שימוש ב ::after כסמן בלי תמונת רקע

מספר שונות נוספות

אפקט של מצב על האלמנט <details>

מתיחות בפתיחה וסגירה של האלמנט מפרטים

שינוי תוכן הסיכום במצבים פתוח וסגור

שינוי סמן העקיצה של הסיכום

שינוי סגנונות ההתמצאות לצופן נגישות

שימוש במספר אלמנטי פרטים כמו רשימת אקורדיון

עיצוב כותרת בתוך הסכימה

מסקנה

אפקט של מצב על האלמנט `<details>`