אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » תגיות details & summary

תגיות details & summary

רן בר-זיק מאי 12, 2019 7:07 am 15 תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

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

?? Something you probably didn't know HTML/CSS could do. SUPER useful! pic.twitter.com/qNTDTj1Hl1

— Caleb Porzio (@calebporzio) April 29, 2019

מה שמראים בציוץ זה שימוש בתגיות 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

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

Header

Content

This is content

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

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
HTML 5

15 תגובות

  1. משתמש אנונימי (לא מזוהה) הגב מאי 12, 2019 בשעה 11:29 am

    נתמך *ברוב* הדפדפנים:
    https://caniuse.com/#feat=details

  2. שחר אלדד הגב מאי 12, 2019 בשעה 12:44 pm

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

    • משתמש אנונימי (לא מזוהה) הגב מאי 12, 2019 בשעה 4:21 pm

      אני עם edge ורואה את זה

      • שחר אלדד הגב מאי 13, 2019 בשעה 10:10 am

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

    • משתמש אנונימי (לא מזוהה) הגב מאי 14, 2019 בשעה 4:38 am

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

  3. yanai edri הגב מאי 12, 2019 בשעה 1:57 pm

    תאמת – הכרתי את זה – אבל השימוש כפופאפ – הפתיע!
    מגניב! – רק חבל בחוסר תמיכה…

  4. משתמש אנונימי (לא מזוהה) הגב מאי 13, 2019 בשעה 2:16 am

    איך מפתחים היום קרוס-בראוזר?

    • אהד הגב מאי 13, 2019 בשעה 9:18 am

      http://dowebsitesneedtolookexactlythesameineverybrowser.com/

      • משתמש אנונימי (לא מזוהה) הגב מאי 29, 2019 בשעה 6:04 pm

        האתר נראה בדיוק אותו הדבר בשני דפדפנים שונים
        אז…

    • שחר אלדד הגב מאי 13, 2019 בשעה 10:08 am

      אתה יכול לקרוא בפוסט הזה:
      http://html5doctor.com/the-details-and-summary-elements/#fallbacks
      איך ניתן לתת תמיכה כאשר זה לא נתמך

  5. אורן צו״ש הגב מאי 13, 2019 בשעה 10:23 am

    כרגיל, אתה מעולה. חיבוקי.

  6. עומר בן שושן הגב מאי 13, 2019 בשעה 4:54 pm

    אחלה פיצ'ר בהחלט אפשר לעשות עם זה דברים מגניבים מאוד 🙂 תודה

  7. ירון הגב מאי 14, 2019 בשעה 8:36 am

    איך עובדים עם זה בצורה אסניכרונית וכן עם react מבחינת lifeCycle?

  8. אבישי הגב מאי 17, 2019 בשעה 6:40 pm

    שוק עולם! באמת שהייתי שם כסף שאין דבר כזה.

  9. אילנה הגב מאי 29, 2019 בשעה 10:42 am

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

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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