המפל

The CSS Podcast - 004: The Cascade

CSS הוא ראשי תיבות של 'גיליונות סגנונות מדורגים'. המדרג הוא האלגוריתם לפתרון התנגשויות שבהן חלים כללי CSS מרובים על רכיב HTML. זו הסיבה לכך שהטקסט של הלחצן שמעוצב עם ה-CSS הבא יהיה כחול.

button {
  color: red;
}

button {
  color: blue;
}

אם תבינו את אלגוריתם המדרגות, תוכלו להבין איך הדפדפן פותר התנגשויות כאלה. אלגוריתם המדרגות מתחלק ל-4 שלבים נפרדים.

  1. מיקום וסדר של הופעה: הסדר שבו כללי ה-CSS מופיעים
  2. ספציפיות: אלגוריתם שקובע לאיזה סלקטור ב-CSS יש את ההתאמה החזקה ביותר
  3. Origin: הסדר שבו CSS מופיע ומאיפה הוא מגיע, בין אם מדובר בסגנון דפדפן, CSS מתוסף לדפדפן או את ה-CSS שכתבתם
  4. חשיבות: לכללי CSS מסוימים יש משקל גבוה יותר מאשר כללים אחרים, במיוחד עם כלל מסוג !important

מיקום וסדר ההופעה

המדרג לוקח בחשבון את הסדר שבו כללי ה-CSS מופיעים ואת האופן שבו הם מופיעים בזמן החישוב של יישוב סכסוכים.

ההדגמה הישירה בתחילת השיעור הזה היא הדוגמה הישירה ביותר למיקום. יש שני כללים עם בוררים בעלי מאפיינים ספציפיים זהים, כך שהכלל האחרון שיוצהר הוא זה שזכה בהם.

סגנונות יכולים להגיע ממקורות שונים בדף HTML, כמו תג <link>, תג <style> מוטמע ו-CSS מוטמע כפי שמוגדר במאפיין style של רכיב.

אם יש <link> שכולל CSS בחלק העליון של דף ה-HTML, אז <link> נוסף שכולל CSS בחלק התחתון של הדף: ה-<link> התחתון יהיה ספציפי ביותר. אותו דבר קורה גם עם רכיבי <style> מוטמעים. ככל שהמודעות יהיו ספציפיות יותר, כך הן יופיעו במיקום נמוך יותר בדף.

ללחצן יש רקע כחול, כפי שהוגדר על ידי CSS שכלול על ידי רכיב <link />. כלל CSS שמגדיר את המצב כהה נמצא בגיליון סגנונות מקושר שני, והוא מוחל בגלל המיקום מאוחר יותר שלו.

הסדר הזה חל גם על רכיבי <style> מוטמעים. אם הוצהר עליהן לפני <link>, ל-CSS של גיליון הסגנונות המקושר תהיה את הספציפיות הגבוהה ביותר.

הרכיב <style> מוצהר ברכיב <head>, בעוד שהרכיב <link /> מוצהר במסגרת <body>. כלומר, הוא ספציפי יותר מהרכיב <style>

מאפיין style מוטבע שיש בו הצהרה של CSS יבטל את כל שירותי ה-CSS האחרים, ללא קשר למיקום שלו, אלא אם הוגדרה הצהרה !important.

המיקום חל גם לפי הסדר של כלל ה-CSS. בדוגמה הזו, לרכיב יהיה רקע סגול כי הוצהר האחרון background: purple. בגלל שהרקע הירוק הוצהר לפני הרקע הסגול, הדפדפן מתעלם ממנו עכשיו.

.my-element {
  background: green;
  background: purple;
}

האפשרות לציין שני ערכים לאותו נכס יכולה להיות דרך פשוטה ליצירת חלופות לדפדפנים שלא תומכים בערך מסוים. בדוגמה הבאה, font-size מוצהר פעמיים. אם יש תמיכה ב-clamp() בדפדפן, ההצהרה font-size הקודמת תימחק. אם הדפדפן לא תומך ב-clamp(), ההצהרה הראשונית תכובד וגודל הגופן יהיה 1.5rem

.my-element {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}

בדיקת ההבנה

בדקו את הידע שלכם על המפל

אם הדף שלכם מכיל את קוד ה-HTML הבא:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <button>I am a button</button>
    <style>
      button {
        background: pink;
      }
    </style>
  </body>
</html>

ב-styles.css מופיע כלל ה-CSS הבא:

button {
  background: yellow;
}

מה צבע הרקע של הלחצן?

ורוד
המקור המוטמע של <style> נמצא במיקום נמוך יותר בדף מאשר התג <link>, כך שלמרות שהספציפיות של button זהה, המיקום של כלל הסגנון הופך אותו למנצח.
צהוב
במסמך ה-HTML, ייתכן שהרקע של הלחצן הצהוב נקרא תחילה, אבל מאוחר יותר התגלה כלל חדש יותר באותה ספציפיות, ולכן הכלל לא חל על הלחצן.

ספציפיות

ספציפיות היא אלגוריתם שקובע איזה סלקטור ב-CSS הוא הספציפי ביותר, באמצעות מערכת שקלול או ניקוד כדי לבצע את החישובים האלה. הגדרת כלל ספציפי יותר מאפשרת לכם להחיל אותו גם אם שירות CSS אחר שתואם לסלקטור מופיע מאוחר יותר ב-CSS.

בשיעור הבא נסביר איך מחושבת ספציפית, אבל חשוב לזכור כמה דברים שיעזרו לכם להימנע מיותר מדי בעיות ספציפיות.

טירגוט CSS למחלקה ברכיב מסוים יהפוך את הכלל הזה לספציפי יותר, ולכן יהיה יותר חשוב ליישם אותו, מאשר CSS שמטרגט רק את הרכיב. המשמעות היא שב-CSS הבא, ה-h1 ייצבע באדום על אף ששני הכללים תואמים והכלל של הבורר h1 יופיע מאוחר יותר בגיליון הסגנונות.

<h1 class="my-element">Heading</h1>

.my-element {
  color: red;
}

h1 {
  color: blue;
}

id הופך את ה-CSS לספציפי עוד יותר, כך שסגנונות שהוחלו על מזהה יבטלו את אלה המוחלים בדרכים רבות אחרות. זו אחת הסיבות לכך שבאופן כללי לא כדאי לצרף סגנונות ל-id. ייתכן שיהיה קשה להחליף את הסגנון הזה בניסוח אחר.

הספציפיות היא מצטברת

כפי שתראו בשיעור הבא, כל סוג של בורר מקבל נקודות שמציינות עד כמה הוא ספציפי, הנקודות של כל הסלקטורים שהשתמשתם בהם כדי לטרגט רכיב מסוים מחברים יחד. המשמעות היא שאם מטרגטים רכיב עם רשימת סלקטורים כמו a.my-class.another-class[href]:hover, מקבלים משהו די קשה להחליף ב-CSS אחר. לכן, מומלץ להקפיד שהסלקטורים יהיו פשוטים ככל האפשר, וכדי שיהיה קל יותר לעשות שימוש חוזר ב-CSS. תוכלו להיעזר בספציפיות ככלי שעוזר לשים לב לרכיבים כשצריך, אבל תמיד כדאי ליצור מחדש רשימות בורר ארוכות וספציפיות, אם אפשר.

מקור

שירות ה-CSS שאתם כותבים הוא לא ה-CSS היחיד שמופעל בדף. הדרגה מביאה בחשבון את מקור ה-CSS. המקור הזה כולל את גיליון הסגנונות הפנימי של הדפדפן, סגנונות שנוספו על ידי תוספי הדפדפן או מערכת ההפעלה ואת ה-CSS שיצרת. הסדר של המקורות האלה, מהספציפיים ביותר ועד להכי ספציפיים, הוא:

  1. הסגנונות הבסיסיים של סוכני המשתמש. אלה הסגנונות שהדפדפן מחיל על רכיבי HTML כברירת מחדל.
  2. סגנונות של משתמשים מקומיים. הן יכולות להגיע מרמת מערכת ההפעלה, כמו גודל גופן בסיסי או העדפה לצמצום התנועה. הן יכולות להגיע גם מתוספי דפדפן, כמו תוסף לדפדפן שמאפשר למשתמש לכתוב CSS מותאם אישית לדף אינטרנט.
  3. CSS ישירות. שירות ה-CSS שאתם מחברים.
  4. פורסם בתאריך !important. כל !important שמוסיפים להצהרות שכתבת.
  5. סגנונות של משתמשים מקומיים !important. כל !important שמגיע מרמת מערכת ההפעלה או מ-CSS ברמת תוסף הדפדפן.
  6. סוכן משתמש !important. כל סוג של !important שמוגדר ב-CSS כברירת המחדל, שמסופק על ידי הדפדפן.
הדגמה חזותית של סדר המקורות, כפי שמוסבר גם ברשימה.

אם יש לכם סוג כלל של !important ב-CSS שיצרתם, ולמשתמש יש סוג כלל !important ב-CSS המותאם אישית שלו, וה-CSS שלו זוכה?

בדיקת ההבנה

בדקו את הידע שלכם על מקורות המפלים

כדי לבדוק את הידע שלכם על מקורות של מפלים, כדאי להשתמש בכללי הסגנון הבאים ממקורות שונים:

סגנון הסוכן המשתמש

h1 { margin-block-start: 0.83em; }

אתחול

h1 { margin-block-start: 20px; }

סגנונות מחבר הדף

h1 { margin-block-start: 2ch; }

@media (max-width: 480px) {
  h1 { margin-block-start: 1ch; }
}

סגנון מותאם אישית של משתמש

h1 { margin-block-start: 2rem !important; }

לאחר מכן, בהתאם ל-HTML הבא:

<h1>Lorem ipsum</h1>

מהו הmargin-block-start הסופי של h1?

20px
Bootstrap הוא חלק מהמקור שנוצר, ומאבד לסגנון המקומי החשוב של המשתמשים.
0.83em
מקור הסגנון של סוכן המשתמש מאבד את הסגנון המקומי החשוב.
2rem
לסגנון המותאם אישית הזה של המשתמש !important יש את המקור הספציפי ביותר.
2 שעות
סגנון המחבר הזה הוא חלק מהמקור שנוצר, והוא מאבד את הסגנון החשוב של המשתמש המקומי.
דקה אחת
סגנון המחבר הזה הוא חלק מהמקור שנוצר, והוא מאבד את הסגנון החשוב של המשתמש המקומי.

חשיבות

לא כל כללי ה-CSS מחושבים באופן זהה זה לזה, או שניתן לזהות אותם בדיוק באותה מידת ספציפיות.

כך נראה סדר החשיבות, מהכי פחות חשוב ועד החשוב ביותר:

  1. סוג כלל רגיל, כמו font-size, background או color
  2. סוג כלל אחד (animation)
  3. סוג כלל אחד (!important) (לפי אותו סדר כמו במקור)
  4. סוג כלל אחד (transition)

לסוגים של כללי אנימציה והעברה פעילים יש חשיבות גבוהה יותר מכללים רגילים. במקרה של מעברים, חשיבות גבוהה יותר מ-!important סוגי כללים. הסיבה לכך היא שכאשר אנימציה או מעבר הופכים לפעילים, ההתנהגות הצפויה שלהם היא שינוי המצב החזותי.

שימוש בכלי פיתוח כדי לברר למה שירות CSS מסוים לא פועל

בדרך כלל, כלי הפיתוח לדפדפן מציגים את כל ה-CSS שיכול להתאים לרכיב מסוים, ואת אלה שלא משתמשים בהם עם קו חוצה.

תמונה של דפדפן כלי הפיתוח עם CSS שהוחלף עם קו חוצה

אם ה-CSS שרצית להחיל לא מופיע בכלל, המשמעות היא שהוא לא תאם לרכיב. במקרה כזה, תצטרכו לחפש אותו במקום אחר, אולי בגלל שגיאת הקלדה בשם המחלקה או הרכיב או ב-CSS לא חוקי.

בדיקת ההבנה

בדקו את הידע שלכם על המפל

ניתן להשתמש בדירוג עבור...

פתרון התנגשויות כשיש כמה סגנונות שחלים על רכיב מסוים.
זהו אחד מהיעדים העיקריים שלו, יישוב סכסוכים.
הבטחה שיש רק ערך סגנון אחד לכל נכס בזמן ציור.
ניתן להזין טקסט רק בצבע אחד, והדירוג מאפשר לקבוע מה הצבע הרצוי.
כללי סגנון ניקוד ושקלול.
ניקוד ושקלול הם חלק משלב המיון של הדירוג.
מאפייני סגנון מיון וסינון.
המיון והסינון הם השלבים של 'הדרגה' שמסייעים להבין היבטים של יישוב סכסוכים.

מקורות מידע