הפודקאסט של שירות ה-CSS – 005: ירושה
נניח שכתבתם שירות 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-spacing
- בצד הכיתוב
- צבע
- סמן
- כיוון
- ריקים-תאים
- font-family
- font-size
- font-style
- ווריאנט הגופן
- משקל הגופן
- גופן
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- יתומים
- מירכאות
- יישור טקסט
- כניסת טקסט
- text-transform
- חשיפה
- רווח לבן
- אלמנה
- 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
מגדירה את font-weight
כ-500
.
כדי ליצור רכיבי <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
color
font-size
line-height
text-align
איזה ערך מתנהג כמו inherit
, אלא אם אין שום דבר בירושה
ואז פועל כמו initial
?
superset
reset
unset