הפודקאסט של שירות ה-CSS - 004: The Cascade
פירוש ראשי התיבות CSS הוא 'גיליונות סגנונות מדורגים'. הדירוג הוא האלגוריתם לפתרון התנגשויות כאשר כמה כללי CSS חלים על רכיב HTML. זו הסיבה לכך שהטקסט של הלחצן המעוצב באמצעות ה-CSS הבא יהיה כחול.
button {
color: red;
}
button {
color: blue;
}
הבנת האלגוריתם המדורג עוזרת להבין איך הדפדפן פותר התנגשויות כאלה. אלגוריתם המדורג מחולק ל-4 שלבים נפרדים.
- מיקום וסדר ההצגה: הסדר שבו כללי ה-CSS מופיעים
- ספציפיות: אלגוריתם שקובע לאיזה סלקטור ב-CSS יש את ההתאמה הטובה ביותר
- מקור: הסדר שבו מופיע ה-CSS והמקור שלו, אם זה סגנון דפדפן, שירות CSS מתוסף לדפדפן או משירות ה-CSS שכתבתם
- חשיבות: לחלק מכללי ה-CSS יש משקל גבוה יותר מאשר אחרים,
במיוחד עם סוג הכלל
!important
המיקום והסדר שבו הם הופיעו
סדר ההצגה של כללי ה-CSS והאופן שבו הם מופיעים מובאים בחשבון ברמת השלב בזמן שהוא מחשב את יישוב הסכסוכים.
ההדגמה בתחילת השיעור הזה היא הדוגמה הישירה ביותר למיקום. יש שני כללים עם בוררים זהים של ספציפיות: כך שהמשחק האחרון שהוכרז ניצח.
סגנונות יכולים להגיע ממקורות שונים בדף HTML,
כמו תג <link>
,
תג <style>
מוטמע,
ו-CSS מוטבע, כפי שמוגדר במאפיין style
של הרכיב.
אם יש לכם <link>
שכולל את CSS בחלק העליון של דף ה-HTML,
ואז <link>
נוסף שכולל CSS בחלק התחתון של הדף: <link>
בחלק התחתון יקבל את מידת הספציפיות ביותר.
אותו דבר קורה גם עם רכיבי <style>
מוטמעים.
הן יהיו ספציפיות יותר, כך שהן יופיעו במיקום נמוך יותר בדף.
הסדר הזה חל גם על רכיבי <style>
מוטמעים.
אם הן הוצהרו לפני <link>
,
ה-CSS של גיליון הסגנונות המקושר יקבל את רמת הספציפיות ביותר.
מאפיין 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; }
מהו צבע הרקע של הלחצן?
ספציפיות
ספציפיות היא אלגוריתם שקובע איזה סלקטור ב-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 שיצרתם. סדר הספציפיות של המקורות האלה, מהכי פחות ספציפי לספציפי ביותר, הוא כך:
- סגנונות בסיסיים של סוכני משתמש. אלה הסגנונות שהדפדפן מחיל על רכיבי HTML כברירת מחדל.
- סגנונות משתמשים מקומיים. הגורמים האלה יכולים להגיע מרמת מערכת ההפעלה, למשל גודל גופן בסיסי, או העדפה של צמצום התנועה. הם יכולים להגיע גם מתוספים לדפדפן, כמו תוסף לדפדפן שמאפשר למשתמש לכתוב CSS מותאם אישית משלו לדף אינטרנט.
- שירות CSS מורשה. שירות ה-CSS שיצרתם.
- נכתב בתאריך
!important
. כל!important
שמוסיפים להצהרות מחברים. - סגנונות משתמש מקומיים
!important
. כל!important
שמגיע מרמת מערכת ההפעלה, או CSS ברמת תוסף הדפדפן. - סוכן המשתמש
!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
?
חשיבות
לא כל כללי ה-CSS מחושבים באופן זהה זה לזה, או שניתן לתת להם אותן ספציפיות.
סדר החשיבות, מהכי פחות חשוב, והחשוב ביותר הוא:
- סוג כלל רגיל, כמו
font-size
,background
אוcolor
- סוג כלל אחד (
animation
) - סוג כלל אחד (
!important
) (לפי סדר זהה לזה של המקור) - סוג כלל אחד (
transition
)
לסוגים פעילים של כללי אנימציה ומעבר יש חשיבות גבוהה יותר מכללים רגילים.
במקרה של העברות יש חשיבות גבוהה יותר מ-!important
סוגי כללים.
הסיבה לכך היא שכשאנימציה או מעבר הופכים לפעילים,
ההתנהגות הצפויה שלו היא לשנות את המצב החזותי.
להשתמש בכלי הפיתוח כדי לבדוק למה חלק משירות ה-CSS לא מופעל
כלי הפיתוח בדפדפן יציגו בדרך כלל את כל ה-CSS שיכול להתאים לרכיב מסוים, עם אלו שלא נעשה בהם שימוש, תסומן בקו חוצה.
אם שירות ה-CSS שציפיתם להחיל לא מופיע בכלל, היא לא תאמה לרכיב. במקרה כזה, צריך לחפש מקום אחר, אולי בגלל שגיאת הקלדה בשם של מחלקה או רכיב, או שירות CSS לא חוקי.
בדיקת ההבנה
בוחנים את הידע שלכם לגבי המפל
ניתן להשתמש בדירוג עבור...