The CSS Podcast – 005: Inheritance
נניח שכתבתם לאחרונה קטע CSS כדי שרכיבים ייראה כמו לחצן.
<a href="http://example.com" class="my-button">I am a button link</a>
.my-button {
display: inline-block;
padding: 1rem 2rem;
text-decoration: none;
background: pink;
font: inherit;
text-align: center;
}
לאחר מכן מוסיפים אלמנט קישור לכתבה עם תוכן,
עם ערך class
של .my-button
. עם זאת, זו בעיה, הטקסט לא בצבע שציפיתם לו. איך זה קרה?
חלק ממאפייני ה-CSS עוברים בירושה אם לא מציינים עבורם ערך.
במקרה של הלחצן הזה, הוא יירש את color
משירות ה-CSS הזה:
article a {
color: maroon;
}
בשיעור הזה נסביר למה זה קורה ואיך ירושה היא תכונה עוצמתית שעוזרת לכתוב פחות CSS.
תהליך הורשה
בואו נראה איך פועלת הורשה באמצעות קטע קוד ה-HTML הזה:
<html>
<body>
<article>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</body>
</html>
רכיב הבסיס (<html>
) לא יורש שום דבר מפני שהוא הרכיב הראשון במסמך.
מוסיפים CSS לרכיב ה-HTML,
והפעולה הזו מתחילה לרדת כלפי מטה במסמך.
html {
color: lightslategray;
}
הנכס color
עובר בירושה כברירת מחדל לרכיבים אחרים.
לרכיב html
יש color: lightslategray
,
לכן כל הרכיבים שיכולים לרשת צבע יקבלו מעכשיו את הצבע lightslategray
.
body {
font-size: 1.2em;
}
p {
font-style: italic;
}
רק הרכיב <p>
יכלול טקסט נטוי, מאחר שהוא הרכיב המקונן ביותר.
הורשה מועברת רק למטה, ולא מגובה אל רכיבי הורה.
אילו נכסים עוברים בירושה כברירת מחדל?
חלק ממאפייני ה-CSS עוברים בירושה כברירת מחדל, אבל יש הרבה מאפיינים כאלה. לפניכם רשימה מלאה של המאפיינים שעוברים בירושה כברירת מחדל, מתוך קובץ העזר ב-W3 של כל מאפייני ה-CSS:
- אזימוט
- border-collapse
- border-spacing
- צד הכתוביות
- צבע [color]
- סמן
- direction
- תאים ריקים
- משפחת גופנים
- font-size
- font-style
- font-variant
- font-weight
- גופן
- ריווח בין אותיות
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- יתומים
- מירכאות
- text-align
- text-indent
- text-transform
- חשיפה
- white-space
- אלמנות
- word-spacing
איך פועלת הורשה
לכל רכיב HTML יש כל מאפיין CSS המוגדר כברירת מחדל עם ערך ראשוני. ערך ראשוני הוא נכס שלא עובר בירושה, ומוצג כברירת מחדל אם המדרג לא מצליח לחשב את הערך של אותו רכיב.
מאפיינים שיכולים לעבור בירושה למטה,
ורכיבי צאצא יקבלו ערך מחושב שמייצג את ערך ההורה שלו.
המשמעות היא שאם font-weight
מוגדר לרכיב bold
, כל רכיבי הצאצא יהיו מודגשים, אלא אם font-weight
מוגדר לערך אחר, או שגיליון הסגנונות של סוכן המשתמש מכיל ערך עבור font-weight
עבור הרכיב הזה.
כיצד לרשת בצורה מפורשת ולשלוט בהורשה
ירושה יכולה להשפיע על רכיבים בדרכים בלתי צפויות, ולכן ל-CSS יש כלים שיכולים לעזור בכך.
מילת המפתח inherit
אפשר לגרום לכל נכס לרשת את הערך המחושב של ההורה שלו באמצעות מילת המפתח inherit
.
דרך יעילה להשתמש במילת המפתח הזו היא ליצור חריגים.
strong {
font-weight: 900;
}
קטע קוד ה-CSS הזה מגדיר לכל רכיבי <strong>
את הערך font-weight
של 900
, במקום את ערך ברירת המחדל bold
, שהוא שווה הערך ל-font-weight: 700
.
.my-component {
font-weight: 500;
}
במחלקה .my-component
מוגדר הערך 500
במקום font-weight
.
כדי לגרום לרכיבי <strong>
שבתוך .my-component
להוסיף גם font-weight: 500
:
.my-component strong {
font-weight: inherit;
}
עכשיו, לרכיבי <strong>
שבתוך .my-component
יהיה font-weight
של 500
.
אפשר להגדיר את הערך הזה באופן מפורש, אבל אם תשתמשו ב-inherit
וב-CSS של .my-component
ישתנו בעתיד, תוכלו להבטיח שה-<strong>
יתעדכן באופן אוטומטי.
מילת המפתח initial
ירושה יכולה לגרום לבעיות ברכיבים, ו-initial
מספקת אפשרות איפוס עוצמתית.
קודם למדתם שלכל נכס יש ערך ברירת מחדל ב-CSS.
מילת המפתח initial
מחזירה נכס לערך ברירת המחדל הראשוני הזה.
aside strong {
font-weight: initial;
}
קטע הקוד יסיר את המשקל המודגש מכל רכיבי <strong>
שבתוך רכיב <aside>
, ובמקום זאת יהפוך אותם למשקל רגיל, שהוא הערך הראשוני.
מילת המפתח unset
אופן הפעולה של הנכס unset
יהיה שונה אם נכס עובר בירושה כברירת מחדל או לא.
אם נכס עובר בירושה כברירת מחדל, מילת המפתח unset
תהיה זהה ל-inherit
.
אם הנכס לא עובר בירושה כברירת מחדל, מילת המפתח unset
תהיה שווה ל-initial
.
לפעמים קשה לזכור אילו מאפייני CSS עוברים בירושה כברירת מחדל,
unset
יכול להיות שימושי בהקשר הזה.
לדוגמה, הקוד color
עובר בירושה כברירת מחדל, אבל הערך margin
לא עובר בירושה, לכן אפשר לכתוב כך:
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
}
/* The p needs to be reset in asides, so you can use unset */
aside p {
margin: unset;
color: unset;
}
עכשיו, margin
הוסר ו-color
חוזר להיות הערך המחושב שעבר בירושה.
אפשר להשתמש בערך unset
גם עם המאפיין all
.
נחזור לדוגמה שלמעלה.
מה קורה אם לסגנונות הגלובליים של p
מקבלים כמה נכסים נוספים?
רק הכלל שהוגדר עבור margin
ו-color
יחול.
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
padding: 2em;
border: 1px solid;
}
/* Not all properties are accounted for anymore */
aside p {
margin: unset;
color: unset;
}
אם תשנו במקום זאת את הכלל aside p
ל-all: unset
,
לא משנה אילו סגנונות כלליים יחולו על p
בעתיד,
הם תמיד יוגדרו.
aside p {
margin: unset;
color: unset;
all: unset;
}
בדיקת ההבנה
בחינת הידע שלכם בנושא ירושה
אילו מהנכסים הבאים עוברים בירושה?
animation
font-size
color
text-align
line-height
איזה ערך יתנהג כך: inherit
, אלא אם אין שום דבר שיורש
ואז מתנהג כך: initial
?
reset
unset
superset