הנושאים עסקנו בקצרה במאמר סקירה כללית של HTML. הגיע הזמן להתעמק בנושא.
המאפיינים הם שהופכים את ה-HTML לעוצמתי כל כך. המאפיינים הם שמות וצמדי שם/ערך המופרדים ברווחים וצמדי שם/ערך שמופיעים בתג הפותח, ומספקים מידע על הרכיב ועל הפונקציונליות שלו.
המאפיינים מגדירים את ההתנהגות, הקישורים והפונקציונליות של רכיבים. חלק מהמאפיינים הם גלובליים, כלומר יכולים להופיע בתוך התג הפותח של כל רכיב. מאפיינים אחרים רלוונטיים לכמה רכיבים אבל לא לכולם, ואילו מאפיינים אחרים הם ספציפיים לרכיב ורלוונטי רק לרכיב אחד. ב-HTML, נדרש ערך לכל המאפיינים מלבד מאפיינים בוליאניים, ובמידה מסוימת גם מאפיינים שצוינו בספירה.
אם ערך מאפיין כולל רווח או תווים מיוחדים, צריך לצטט את הערך. מהסיבה הזו, וכדי לשפר את הקריאוּת, תמיד מומלץ לצטט.
HTML לא תלוי אותיות רישיות, אבל חלק מערכי המאפיינים כן. ערכים שהם חלק ממפרט ה-HTML אינם תלויי-רישיות. הערכים שמוגדרים למחרוזות, כמו שמות של מחלקות ומזהים, הם תלויי אותיות רישיות. אם ערך מאפיין הוא תלוי אותיות רישיות ב-HTML, הוא תלוי אותיות רישיות כשמשתמשים בו כחלק מבורר המאפיינים ב-CSS וב-JavaScript. אחרת זה לא המצב.
<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">
<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">
מאפיינים בוליאניים
אם קיים מאפיין בוליאני, הוא תמיד TRUE. המאפיינים הבוליאניים כוללים: autofocus, inert, checked, disabled,
required, reversed, allowfullscreen, default, loop, autoplay, controls, muted, readonly, multiple, וגם selected.
אם אחד או יותר מהמאפיינים האלה קיים, הרכיב מושבת, מוגדר כחובה, מוגדר לקריאה בלבד וכו'. אם הוא לא נמצא, הרכיב מושבת.
אפשר להשמיט ערכים בוליאניים, להגדיר אותם כמחרוזת ריקה או להיות שם המאפיין, אבל לא
צריך להגדיר אותם בפועל למחרוזת true. כל הערכים, כולל true, false ו-😀, גם אם הם לא חוקיים, יקבלו את הערך True.
שלושת התגים הבאים מקבילים:
<input required>
<input required="">
<input required="required">
אם ערך המאפיין הוא False, יש להשמיט את המאפיין. אם המאפיין מוגדר כ-true, כוללים את המאפיין, אבל לא מציינים ערך.
לדוגמה, required="required" אינו ערך חוקי ב-HTML; אך מכיוון ש-required הוא בוליאני, ערכים לא חוקיים מקבלים את הערך True.
אבל מכיוון שמאפיינים במספור לא חוקיים לא בהכרח מפנים לאותו ערך כמו ערכים חסרים, קל יותר להתרגל להשמטת ערכים מאשר לזכור אילו מאפיינים הם בוליאניים לעומת ערכים נקובים ואילו מאפיינים עשויים לספק ערך לא חוקי.
כשמחליפים בין TRUE ל-FALSE, מוסיפים ומסירים את המאפיין לחלוטין באמצעות JavaScript, במקום להחליף את הערך.
const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");
שימו לב שבשפות XML, כמו SVG, כל המאפיינים צריכים לכלול ערך, כולל מאפיינים בוליאניים.
המאפיינים שצוינו
לפעמים מתבלבלים בין מאפיינים שצוינו לבין מאפיינים בוליאניים. המאפיינים הם מאפייני HTML עם קבוצה מוגבלת של ערכים חוקיים שהוגדרו מראש.
בדומה למאפיינים בוליאניים, יש להם ערך ברירת מחדל אם המאפיין קיים אבל הערך חסר. לדוגמה, אם כוללים את השדה <style contenteditable>, ברירת המחדל שלו היא <style contenteditable="true">.
עם זאת, בשונה ממאפיינים בוליאניים, השמטת המאפיין לא בהכרח מעידה על כך שהמאפיין הנוכחי הוא False. מאפיין קיים עם ערך חסר
לא בהכרח נחשב כ-true; וברירת המחדל של ערכים לא חוקיים לא בהכרח זהה למחרוזת אפסית. בהמשך לדוגמה, הערך של contenteditable מוגדר כברירת מחדל לערך inherit אם הוא חסר או לא תקין, ואפשר להגדיר אותו באופן מפורש כ-false.
ערך ברירת המחדל תלוי במאפיין. בניגוד לערכים בוליאניים, המאפיינים לא מקבלים 'true' באופן אוטומטי אם יש כאלה. אם כוללים את הפרמטר <style contenteditable="false">, אי אפשר לערוך את הרכיב. אם הערך לא חוקי, למשל <style contenteditable="😀">, או באופן מפתיע <style contenteditable="contenteditable">, הערך לא חוקי וברירת המחדל שלו היא inherit.
ברוב המקרים עם ספירה של מאפיינים, הערכים החסרים והערכים הלא חוקיים זהים. לדוגמה, אם המאפיין type ב-<input> חסר, קיים אבל ללא ערך, או שיש לו ערך לא חוקי, ברירת המחדל היא text. התנהגות זו היא נפוצה, אך היא אינה כלל.
לכן, חשוב לדעת אילו מאפיינים הם בוליאניים לעומת ספירה. השמיטו ערכים אם אפשר כדי שלא תטעו ולחפש את הערך לפי הצורך.
מאפיינים גלובליים
מאפיינים גלובליים הם מאפיינים שניתן להגדיר לכל רכיב HTML, כולל רכיבים ברכיב <head>. יש יותר מ-30 מאפיינים גלובליים. באופן כללי, ניתן להוסיף את כל אלה לכל רכיב HTML, אבל למאפיינים גלובליים מסוימים אין השפעה
כשהם מוגדרים על רכיבים מסוימים. לדוגמה, הגדרה של hidden ב-<meta> כמטא תוכן לא מוצגת.
id
המאפיין הגלובלי id משמש להגדרת מזהה ייחודי של רכיב. הוא משרת מטרות רבות, כולל:
- היעד של מזהה המקטע של קישור.
- זיהוי רכיב לסקריפט.
- שיוך של רכיב טופס לתווית שלו.
- הוספת תווית או תיאור לטכנולוגיות מסייעות.
- סגנונות טירגוט עם (ספציפיות גבוהה או כבוררי מאפיינים) ב-CSS.
הערך id הוא מחרוזת ללא רווחים. אם יש רווח, המסמך לא ייקטע, אבל תצטרכו לטרגט ל-id באמצעות תווי escape ב-HTML, ב-CSS וב-JS. כל שאר התווים חוקיים. ערך id יכול להיות 😀 או .class,
אבל זה לא רעיון טוב. כדי להקל עליך בתכנות בעתיד ובעתיד, יש להפוך את התו הראשון של id לאות, ולהשתמש רק באותיות ASCII, ספרות, _ ו--. מומלץ להגיע למוסכמה של id למתן שמות ולאחר מכן לפעול לפיה, כי הערכים של id הם תלויי אותיות רישיות.
הערך id צריך להיות ייחודי למסמך. סביר להניח שהפריסה של הדף לא תיכשל אם משתמשים ב-id יותר מפעם אחת, אבל יכול להיות שה-JavaScript, הקישורים והאינטראקציות עם הרכיבים לא יפעלו כצפוי.
מזהה של מקטע קישור
סרגל הניווט כולל ארבעה קישורים. נסביר על רכיב הקישור בהמשך, אבל בשלב זה שימו לב שקישורים לא מוגבלים לכתובות URL שמבוססות על HTTP. הם יכולים להיות מזהי קטעים של קטעים בדף במסמך הנוכחי (או במסמכים אחרים).
באתר של סדנת למידת המכונה, סרגל הניווט בכותרת של הדף כולל ארבעה קישורים:
המאפיין href מספק את ההיפר-קישור שהפעלת הקישור מפנה אליו את המשתמש. כשכתובת URL כוללת סימן גיבוב (hash) (#) ואחריה מחרוזת של תווים, המחרוזת הזו היא מזהה מקטע. אם המחרוזת תואמת ל-id של רכיב בדף האינטרנט, המקטע הוא עוגן, או סימנייה, לרכיב הזה. הדפדפן יגלול לנקודה שבה מוגדר העוגן.
ארבעת הקישורים האלה מפנים לארבעה קטעים בדף שלנו, שמזוהים באמצעות המאפיין id. כשהמשתמש לוחץ על אחד מארבעת הקישורים בסרגל הניווט, מתבצעת גלילה לתצוגה של הרכיב שאליו מקושר מזהה המקטע, הרכיב שמכיל את המזהה התואם, פחות #.
התוכן של <main> בסדנת למידת המכונה כולל ארבעה קטעים עם מזהים. כשהמבקר באתר לוחץ על אחד מהקישורים ב-<nav>, הקטע עם מזהה המקטע הזה נגלל לתצוגה. תגי העיצוב דומים ל:
<section id="reg">
<h2>Machine Learning Workshop Tickets</h2>
</section>
<section id="about">
<h2>What you'll learn</h2>
</section>
<section id="teachers">
<h2>Your Instructors</h2>
<h3>Hal 9000 <span>&</span> EVE</h3>
</section>
<section id="feedback">
<h2>What it's like to learn good and do other stuff good too</h2>
</section>
אם משווים בין מזהי הקטעים בקישורים של <nav>, תוכלו לראות שכל אחד מהם תואם ל-id של <section> ב-<main>.
הדפדפן נותן לנו קישור חינמי ל "ראש הדף". אם מגדירים את href="#top", לא תלוי-רישיות או פשוט href="#", המשתמשים גוללים לחלק העליון של הדף.
מפריד סימני ה-hash ב-href אינו חלק ממזהה הקטע. מזהה המקטע הוא תמיד החלק האחרון של כתובת ה-URL, והוא לא נשלח לשרת.
סלקטורים ב-CSS
ב-CSS אפשר לטרגט כל קטע באמצעות בורר מזהים, כמו #feedback, או בורר מאפיינים תלוי אותיות רישיות
לצורך כך ספציפיות, [id="feedback"].
ביצוע סקריפטים
ב-MLW.com יש ביצת הפתעה שמיועדת רק למשתמשי עכבר. לחיצה על מתג התאורה מעבירה את הדף למצב מופעל או כבוי.
תגי העיצוב של התמונה של מתג התאורה הם:
html
<img src="svg/switch2.svg" id="switch"
alt="light switch" class="light" />
אפשר להשתמש במאפיין id כפרמטר לשיטה getElementById(), ועם קידומת #, כחלק
מפרמטר עבור השיטות querySelector() ו-querySelectorAll().
const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");
פונקציית JavaScript היחידה שלנו משתמשת ביכולת הזו לטרגט רכיבים באמצעות המאפיין id שלהם:
<script>
/* switch is a reserved word in js, so we us onoff instead */
const onoff = document.getElementById('switch');
onoff.addEventListener('click', function(){
document.body.classList.toggle('black');
});
</script>
<label>
לרכיב <label> HTML יש מאפיין for שמקבל את הערך id של פקד הטופס שאליו הוא משויך.
יצירת תווית מפורשת, על ידי הכללת id בכל פקד טופס, והתאמת כל אחד מהם למאפיין for של התווית, מבטיחה שלכל פקד טופס תהיה תווית משויכת.
ניתן לשייך כל תווית לפקד טופס אחד בלבד, אבל לפקד טופס יכול להיות יותר מתווית אחת משויכת.
אם פקד הטופס מקונן בין תגי הפתיחה והסגירה של <label>, המאפיינים for ו-id לא נדרשים: התווית הזו נקראת "implicit" (תווית משתמעת). תוויות מאפשרות לכל המשתמשים לדעת למה מיועד כל פקד של טופס.
<label>
Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.
השיוך בין for לבין id הופך את המידע לזמין למשתמשים בטכנולוגיות מסייעות. בנוסף, לחיצה במקום כלשהו בתווית מפנה את המיקוד לרכיב המשויך ומרחיבה את אזור הקליק של הפקד. זה לא רק מועיל לאנשים עם בעיות במוטוריקה עדינה, שהופך את השימוש בעכבר לפחות מדויק; הוא גם עוזר לכל משתמש בנייד עם אצבעות רחבות יותר מלחצן בחירה.
בדוגמת הקוד הזו, השאלה החמישית המזויפת בחידון מזויף היא שאלה אמריקאית יחידה. לכל פקד טופס יש תווית מפורשת, עם id ייחודי לכל פקד. כדי שלא נשכפל בטעות מזהה, ערך המזהה הוא שילוב של מספר השאלה והערך.
כשכוללים לחצני בחירה, מאחר שהתוויות מתארות את הערך של לחצני הבחירה, אנחנו מקבצים את אותם לחצני בחירה ב-<fieldset>, כאשר <legend> הוא התווית או השאלה – לכל הסט.
שימושים אחרים בנגישות
השימוש בתכונה id בנגישות ובנוחות השימוש לא מוגבל לתוויות. בקטע Introduction to text, <section> הומר לציון אזור על ידי התייחסות ל-id של <h2> כערך של ה-aria-labelledby של <section>, כדי לכלול את השם הנגיש:
<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>
יש יותר מ-50 aria-* מצבים ומאפיינים שבהם ניתן להשתמש כדי להבטיח נגישות. הערכים aria-labelledby, aria-describedby, aria-details ו-aria-owns הם רשימת הפניות id שמופרדת באמצעות רווח. aria-activedescendant, שמזהה את רכיב הצאצא שנמצא כעת במוקד, מקבל כערך שלו הפניה אחת של id: הפניה של הרכיב היחיד שבו יש מיקוד (אפשר להתמקד רק ברכיב אחד בכל פעם).
class
המאפיין class מספק דרך נוספת לטירגוט רכיבים באמצעות CSS (ו-JavaScript), אבל הוא לא משמש למטרות אחרות ב-HTML (למרות ש-frameworks וספריות רכיבים עשויות להשתמש בהן). המאפיין class מקבל את הערך שלו כרשימה מופרדת ברווחים של המחלקות תלויות אותיות רישיות עבור הרכיב.
בניית מבנה סמנטי קולי מאפשרת טירגוט של אלמנטים על סמך המיקום והתפקוד שלהם. מבנה הצליל מאפשר להשתמש בבוררי רכיבי צאצא, בבוררי קשר ובבוררי מאפיינים. כשתלמדו על מאפיינים בסעיף זה, נסו לחשוב איך אפשר לסגנן רכיבים עם אותם מאפיינים או ערכי מאפיינים. גם אם לא צריך להשתמש במאפיין class, רוב המפתחים לא מבינים שלרוב אין צורך בכך.
עד כה, MLW לא השתמשה באף סיווג. האם ניתן להפעיל אתר ללא שם מחלקה אחד? עוד מעט נראה.
style
המאפיין style מאפשר להחיל סגנונות בתוך השורה, שהם סגנונות שחלים על הרכיב היחיד שבו המאפיין מוגדר.
המאפיין style מקבל את הערך שלו כצמדי ערכים של מאפיין CSS. התחביר של הערך זהה לתוכן של
בלוק סגנון CSS: אחרי מאפיינים יש נקודתיים, בדיוק כמו ב-CSS. התחביר של כל הצהרה אחרי הערך כולל נקודה-פסיק.
הסגנונות חלים רק על הרכיב שבו המאפיין מוגדר. הצאצאים יורשים ערכי נכסים שעברו בירושה אם הם
לא עוקפים על ידי הצהרות סגנון אחרות באלמנטים מקוננים, או בבלוקים או בגיליונות סגנונות של <style>. מכיוון שהערך מורכב מהתוכן שווה-ערך לתוכן של בלוק סגנון יחיד שחל רק על אותו רכיב, אי אפשר להשתמש בו לתוכן שנוצר, ליצירת אנימציות עם תמונות מפתח או להחלת כללים אחרים מסוג in-stream.
style הוא מאפיין גלובלי, אבל לא מומלץ להשתמש בו. במקום זאת, אפשר להגדיר סגנונות בקובץ או בקבצים נפרדים.
עם זאת, המאפיין style יכול להיות שימושי במהלך הפיתוח כדי לאפשר עיצוב מהיר, כמו למטרות בדיקה. לאחר מכן משתמשים בסגנון ה-'solution' ומדביקים אותו בקובץ ה-CSS המקושר.
tabindex
ניתן להוסיף את המאפיין tabindex לכל רכיב כדי לאפשר לו להתמקד. הערך של tabindex קובע אם הוא יתווסף לסדר הכרטיסיות, ואם רוצים, לסדר של כרטיסיות שלא מוגדר כברירת מחדל.
המאפיין tabindex מקבל את הערך שלו כמספר שלם. ערך שלילי (המוסכמה היא להשתמש ב--1) מאפשר לרכיב לקבל מיקוד, למשל דרך JavaScript, אבל לא מוסיף את הרכיב לרצף של הכרטיסיות. ערך tabindex של 0 מאפשר
למקד את הרכיב ולגשת אליו באמצעות Tab, ולהוסיף אותו לסדר הכרטיסיות המוגדר כברירת מחדל בדף לפי סדר קוד המקור. ערך של 1 או יותר מעביר את הרכיב לרצף מיקוד בעדיפות גבוהה, ולא מומלץ להשתמש בו.
בדף הזה יש פונקציונליות שיתוף שמשתמשת ברכיב מותאם אישית <share-action> שפועל כ-<button>. השדה tabindex של אפס נכלל כדי להוסיף את הרכיב המותאם אישית לסדר הכרטיסיות שמוגדר כברירת מחדל במקלדת:
<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
<svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
התכונה role של button מודיעה למשתמשים בקורא מסך שהרכיב הזה צריך להתנהג כמו לחצן. אנחנו משתמשים ב-JavaScript כדי להבטיח שהפונקציונליות של הלחצנים נשמרת, כולל טיפול באירועי click ו-keydown וטיפול בהקשה על מקש Enter ועל מקש הרווח.
פקדי טופס, קישורים, לחצנים ורכיבי תוכן שניתן לעריכה יכולים לקבל מיקוד. כשמשתמש במקלדת לוחץ על מקש Tab, המיקוד עובר לאלמנט הבא שניתן להתמקד בו, כאילו הוגדר tabindex="0". כברירת מחדל, לא ניתן להתמקד ברכיבים אחרים. הוספת המאפיין tabindex לרכיבים האלה מאפשרת להם להתמקד במקרים אחרים.
אם מסמך כולל רכיבים עם tabindex של 1 או יותר, הם ייכללו ברצף כרטיסיות נפרד. כפי שתראו ב-codepen, הכרטיסיות מתחילה ברצף נפרד, מהערך הנמוך ביותר לערך הגבוה ביותר, לפני העברתן ברצף הרגיל לפי סדר המקור.
שינוי סדר הכרטיסיות עלול לגרום לחוויית משתמש גרועה מאוד. קשה יותר להסתמך על טכנולוגיה מסייעת (כמו מקלדות וקוראי מסך) כדי לנווט בתוכן. גם כמפתחים קשה לנהל ולתחזק אותה. המיקוד חשוב; יש מודול שלם שעוסק במיקוד ובסדר המיקוד.
role
המאפיין role הוא חלק ממפרט ARIA, ולא מפרט whatWG HMTL. אפשר להשתמש במאפיין role
כדי לספק משמעות סמנטית לתוכן וכך לאפשר לקוראי מסך ליידע את משתמשי האתר לגבי האינטראקציה הצפויה של אובייקט.
יש כמה ווידג'טים נפוצים בממשק המשתמש, כמו שילובים, סרגלי תפריטים, רשימות כרטיסיות וטריגרידים, שאין להם מקבילה ב-HTML מקורי.
לדוגמה, כשיוצרים תבנית עיצוב עם כרטיסיות, אפשר להשתמש בתפקידים tab, tablist ו-tabpanel. מישהו שיכול לראות פיזית את ממשק המשתמש למד לאחר ניסיון לנווט בווידג'ט ולהפוך לוחות שונים לגלויים על ידי לחיצה על כרטיסיות משויכות.
הכללת התפקיד tab ב-<button role="tab">, כאשר קבוצה של לחצנים משמשת להצגת לוחות שונים, מאפשרת למשתמשים בקורא המסך לדעת ש-<button> שהמיקוד עליו כרגע יכול לעבור לתצוגה של חלונית קשורה במקום ליישם פונקציונליות כמו של לחצן רגיל.
המאפיין role לא משנה את התנהגות הדפדפן או את האינטראקציות עם הסמן במכשיר. הוספה של role="button" ל-<span>
לא הופכת אותו ל-<button>. לכן מומלץ להשתמש ברכיבי HTML סמנטיים למטרה שלשמה הם נועדו. עם זאת, אם לא ניתן להשתמש
ברכיב הנכון, המאפיין role מאפשר לעדכן את המשתמשים בקורא מסך אם אלמנט לא סמנטי שודרג
לתפקיד של אלמנט סמנטי.
contenteditable
רכיב עם המאפיין contenteditable שהוגדר ל-true ניתן לעריכה, ניתן להתמקד בו ומתווסף לסדר הכרטיסיות כאילו הוגדר הערך tabindex="0". Contenteditable הוא מאפיין ממוספר שתומך בערכים true ו-false, עם ערך ברירת מחדל של inherit
אם המאפיין לא קיים או אם יש לו ערך לא חוקי.
שלושת התגים הפותחים הבאים מקבילים:
<style contenteditable>
<style contenteditable="">
<style contenteditable="true">
אם כוללים <style contenteditable="false">, אי אפשר לערוך את הרכיב (אלא אם כן הוא ניתן לעריכה כברירת מחדל, כמו <textarea>).
אם הערך לא חוקי, למשל <style contenteditable="😀"> או <style contenteditable="contenteditable">, ערך ברירת המחדל הוא inherit.
כדי לעבור בין מצבים, שולחים שאילתה לגבי הערך של המאפיין לקריאה בלבד HTMLElement.isContentEditable.
const editor = document.getElementById("myElement");
if(editor.contentEditable) {
editor.setAttribute("contenteditable", "false");
} else {
editor.setAttribute("contenteditable", "");
}
לחלופין, אפשר לציין את המאפיין הזה על ידי הגדרת הערך editor.contentEditable לערך true, false או inherit.
אפשר להחיל מאפיינים גלובליים על כל הרכיבים, כולל על רכיבי <style>. אפשר להשתמש במאפיינים וקצת CSS כדי ליצור עורך CSS פעיל.
<style contenteditable>
style {
color: inherit;
display:block;
border: 1px solid;
font: inherit;
font-family: monospace;
padding:1em;
border-radius: 1em;
white-space: pre;
}
</style>
כדאי לנסות לשנות את color של style לערך שאינו inherit. לאחר מכן נסו לשנות את style לבורר p.
אין להסיר את נכס התצוגה, אחרת גוש הסגנון ייעלם.
מאפיינים מותאמים אישית
נגענו רק בפני השטח של מאפיינים גלובליים של HTML. יש אפילו יותר מאפיינים שחלים רק על קבוצה אחת או על קבוצה מוגבלת של רכיבים. גם אם יש מאות מאפיינים מוגדרים, יכול להיות שתצטרכו מאפיין שלא מופיע במפרט. כל הכבוד על ה-HTML.
אפשר ליצור כל מאפיין מותאם אישית שרוצים על ידי הוספת הקידומת data-. אפשר לתת למאפיין כל שם שמתחיל ב-data-
ואחריו מופיעות כל סדרות של תווים באותיות קטנות שלא מתחילות ב-xml ולא כוללות נקודתיים (:).
HTML הוא אומנם גמיש ולא קורס אם יוצרים מאפיינים שאינם נתמכים שלא מתחילים ב-data, וגם אם המאפיין המותאם אישית מתחיל ב-xml או שכולל :, אבל יש יתרונות ביצירת מאפיינים מותאמים אישית שמתחילים ב-data-.
בעזרת מאפייני נתונים מותאמים אישית אתם יודעים שלא השתמשתם בטעות בשם מאפיין קיים. מאפיינים של נתונים מותאמים אישית יכולים להיות בטוחים לעתיד.
דפדפנים לא יטמיעו התנהגויות ברירת מחדל לאף מאפיין ספציפי עם קידומת data-, אבל יש API מובנה של מערך נתונים
כדי לחזור על המאפיינים המותאמים אישית. מאפיינים מותאמים אישית הם דרך מצוינת להעביר מידע ספציפי לאפליקציות באמצעות JavaScript. אפשר להוסיף מאפיינים מותאמים אישית לרכיבים בצורת data-name ולגשת אליהם דרך ה-DOM באמצעות dataset[name]
ברכיב הרלוונטי.
<blockquote data-machine-learning="workshop"
data-first-name="Blendan" data-last-name="Smooth"
data-formerly="Margarita Maker" data-aspiring="Load Balancer"
data-year-graduated="2022">
HAL and EVE could teach a fan to blow hot air.
</blockquote>
אפשר להשתמש במאפיין getAttribute() באמצעות השם המלא של המאפיין, או להשתמש בנכס הפשוט יותר dataset.
el.dataset[machineLearning]; // workshop
e.dataset.machineLearning; // workshop
המאפיין dataset מחזיר אובייקט DOMStringMap של מאפייני data- של כל רכיב. יש כמה מאפיינים מותאמים אישית
ב<blockquote>. המשמעות של מאפיין מערך הנתונים היא שלא אתם צריכים לדעת מהם המאפיינים המותאמים אישית כדי לגשת לשמות ולערכים שלהם:
for (let key in el.dataset) {
customObject[key] = el.dataset[key];
}
המאפיינים במאמר הזה הם גלובליים, כך שניתן להחיל אותם על כל רכיב HTML (למרות שלא כולם משפיעים על הרכיבים האלה). בשלב הבא נציג את שני המאפיינים מתמונת המבוא שלא התייחסנו אליהם – target ו-href,
וכמה מאפיינים נוספים שהם ספציפיים לרכיבים, בזמן שאנחנו בוחנים את הקישורים בצורה מעמיקה יותר.
בדיקת ההבנה
בחינת הידע שלכם לגבי מאפיינים.
id צריך להיות ייחודי במסמך.
בוחרים את המאפיין המותאם אישית שנוצר כראוי.
data-birthdaybirthdaydata:birthday