ירושה

הפודקאסט של שירות ה-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:

איך פועלת הירושה

לכל רכיב 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
אנימציות לא מועברות לילדים.
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

איזה ערך מתנהג כמו inherit, אלא אם אין שום דבר בירושה ואז פועל כמו initial?

reset
ערך לא חוקי, יש לנסות שוב.
unset
🎉
superset
ערך לא חוקי, יש לנסות שוב.

משאבים