המפל

הפודקאסט של שירות ה-CSS - 004: The Cascade

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

button {
  color: red;
}

button {
  color: blue;
}

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

  1. מיקום וסדר ההצגה: הסדר שבו כללי ה-CSS מופיעים
  2. ספציפיות: אלגוריתם שקובע לאיזה סלקטור ב-CSS יש את ההתאמה הטובה ביותר
  3. מקור: הסדר שבו מופיע ה-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.5 rem

.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 שלו מנצח?

בדיקת ההבנה

בחינת הידע שלכם על מקורות מדורגים

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

סגנון User-agent

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?

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

חשיבות

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

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

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

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

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

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

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

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

בדיקת ההבנה

בוחנים את הידע שלכם לגבי המפל

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

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

משאבים