תגיות details & summary

תגית אינפורמציה חשובה שאפשר לעשות איתה עוד המון דברים מעניינים.
לוגו של תקן HTML5

עולם הפרונט אנד מתפתח בצורה מטורפת בשנים האחרונות – ג'אווהסקריפט מתעדכנת בצורה מסחררת והג'אווהסקריפט המודרני שונה דרמטית מזה שהיה לפני חמש שנים. טרנספיילרים חדשים עושים חיים קלים מאוד ומעלימים אתגרים שונים שהיו בעבר כאב ראש אדיר למפתחים (מי מתעסק בקרוס בראוזר היום? בעבר זה היה שליש מהעבודה שלי). כלי CLI חדשים, פריימוורקים חדשים ועוד שפע של דברים מעניינים וחדשניים.

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

מה שמראים בציוץ זה שימוש בתגיות details ו-summary. מדובר בתגיות שהגיעו עם התקן החדש של HTML5 שהפדפנים מרנדרים אותן באופן יפה למדי. שימו לב לדוגמה החיה של הקוד הזה:

<details>
  <summary>Header</summary>
  <div>
    <h2>Content</h2>
    <p>This is content</p>
  </div>
</details>
Header

Content

This is content

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

details with open attribute

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

ומסתבר שגיטהאב גם משתמשים בזה ועוד מקומות. והאמת? זה תפס אותי בהפתעה מוחלטת כי הייתי בטוח שההתנהגות הזו, של modal, היא משהו שאפשר לבצע רק עם ג'אווהסקריפט. טוב לדעת, טוב להכיר וחשוב להכיר את כלי העבודה הבסיסיים של הדפדפן: HTML ו-CSS לפני שרצים לג'אווהסקריפט. זה פתרון אלגנטי, יפה וגם סמנטי.

See the Pen
details & summary
by Ran Bar-Zik (@barzik)
on CodePen.

פוסטים נוספים שכדאי לקרוא

תמונה מצוירת של רובוט שמנקה HTML
יסודות בתכנות

סניטציה – למה זה חשוב

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

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

יישום של nonce על מנת להגן מפני התקפות injection

בפוסט הקודם הסברתי על hash עם CSP על משאבי inline – שזה נחמד ומעולה אבל פחות ישים בעולם האמיתי שבו בדרך כלל התוכן ה-inline (בין

מיקרו בקרים

בית חכם עם ESPHome ו Home Assistant

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

ספריות ומודולים

מציאת PII באמצעות למידת מכונה

כך תגנו על משתמשים שלכם שמעלים מידע אישי רגיש כמו תעודות זהות באמצעות שירות אמאזוני.

גלילה לראש העמוד