אנו זקוקים לדרך קלה כדי להתייחס לאלמנטים באתר שלנו בכדי שנוכל להחיל עליהם תכונות בהמשך הדרך. בבניית אתרים עושים זאת בעזרת קלאסים (class) וID. מזהים אלו עוזרים לנו לעצב תגי פסקאות (p), תגי כותרות כמו H1, H2, H3 וכו'.
בבניית אתרים אנו מגדירים קלאסיים שונים עבור מיכלים ותת מיכלים (כמו לדוגמה Div, Span וכו) כדי להתייחס בצורה פרטנית למיכל ספציפי, להחיל הגדרות עיצוביות כוללניות והגדרות עיצוביות ספציפיות רק עבור אותו אלמנט
לדוגמה:
<div class="container"> <div class="inner"> <ul class="custom-list"> <li></li> <li></li> <li></li> </ul> </div> </div>
קלאס (class) אינו חייב להיות ייחודי
- אתם יכולים להשתמש באותם הקלאסים עבור מספר אלמנטים
- אתם יכולים להשתמש במספר קלאסים עבור כל אלמנט
ניתן ואפילו מומלץ (כדי לחסוך קוד מיותר) להשתמש באותו קלאס עבור אלמנטים רבים באותו עמוד וברחבי האתר שלכם. קחו לדוגמה את את ההדגמה הבאה בה uline משמעו קשט עם קו תחתון [html] <ul> <li class="uline">אני טקסט עם קו תחתון</li> <li class="uline">אני טקסט עם קו תחתון</li> <li class="uline">אני טקסט עם קו תחתון</li> </ul> [/html]
שילוב הגדרות קבועות עם הגדרות מתחלפות
עוד דרך נפוצה לשילוב של קלאסים וכדי ליצור הבדלה היא לעשות שימוש באותו קלאס עבור מספר אלמנטים ולהוסיף עוד קלאס כדי להחיל הבדלה מסוימת עבור אלמנט מסוים. לדוגמה…
[html] <ul> <li class="uline">אני טקסט עם קו תחתון</li> <li class="uline">אני טקסט עם קו תחתון</li> <li class="uline bold">אני טקסט עם קו תחתון</li> </ul> [/html]
ID חייב להיות ייחודי (או לפחות מומלץ)
- מומלץ להשתמש בID אחד ייחודי עבור אלמנט רצוי
- ניתן להשתמש פעם אחד בלבד בID מסוים באותו עמוד
בשונה מקלאס הדרך המומלצת להשתמש בID היא עבור אלמנט אחד ספציפי פעם אחד מקסימום בדף. למעשה אם אותו ID יופיע פעמיים בעמוד אחד זאת נחשבת שגיאת ולידציה על פי הוולידטור של w3c.
[html] <div id="element1"></div> <div id="element1"></div> [/html]
[html] <div id="element1"></div> <div id="element2"></div> [/html]
איפה זה חשוב?
קיים הבדל בין בצורה בה שפות שונות כלומר Javascript, Css ואפילו הדפדפן שלכם מתייחס לקלאסים ולID… בואו נראה מה ההבדלים ונבין מדוע חשוב ליצור הבדלה בהתייחסות שלנו אל Class ואל ID.הדפדפן מחפש אלמנט עם ID שכלול בURL
הדפדפן שלכם לא שם קצוץ על קלאסים ואין להם שום חשיבות מבחינתו אך ID הם נושא אחר לגמרי. אם כתובת הדף מכילה ID יחפש הדפדפן אלמנט עם אותו ID ויגלול את הדף אליו.
https://www.example.com/#some-element
לשפת CSS לא ממש אכפת
לשפת העיצוב CSS (Cascading Style Sheets) לא ממש אכפת אם אתם עושים שימוש חוזר באותו ID והיא תחיל את ההגדרות העיצוביות על כל האלמנטים אשר כוללים בהגדרתם את אותו ID. מבחינה זאת לID כפול באותו הדף אין שום חשיבות מיוחדת. רק זכרו כי זאת טעות וולידציה על פי התקנים של W3C.
לג'אווה סקריפט אכפת!
בשונה מCSS, אם אתם משתמשים בID כדי ליצור הגדרות ופעולות בJavascript אינכם יכולים שיהיה ID כפול באותו הדף. למקרה כזה עשויות להיות תוצאות לא ברורות, לעיתים שגיאה ולעיתים חוסר פעולה או התייחסות רק לאלמנט הראשון בדף אשר מכיל את הID המדובר.
מסקנות? ברורות וענייניות!
- אם לא חייבים עדיף להמנע מID כפול
- ID כפול עלול לשבש סקריפטים של ג'אווה סקריפט
- לשפת CSS ממש לא אכפת מכפילויות של ID
- עם קלאסים הכל הולך!
אם אתם לא ממש ממש צריכים לעשות שימוש כפול באותו ID עדיף שלא לעשות זאת. מעבר לעובדה שאתם יוצרים שגיאת וולידציה אתם למעשה מבטלים את היכולת שלכם להתייחס אל אותו אלמנט בעזרת Javascript או jQuery ולכן הורגים חלק מהפונקציונליות. באופן כללי מדובר על פרקטיקה טובה לכל בונה אתרים.
אני מקווה שמצאתם את המיני מדריך לשימוש, מועיל ואינפורמטיבי (נכון?). נודה לכם אם תפרגנו לנו עם לייק או טוויט ואתם בהחלט מוזמנים להוסיף מידע נוסף בעזרת טופס התגובות או להרשם לרשימת התפוצה שלנו כדי להתעדכן בנושאים שמעניינים אתכם.
תגובה אחת