סלקטורים חדשים בפסאודו-מחלקה פונקציונליים של CSS :is() ו-:where()

התוספות הקטנות לכאורה לסינטקס של בוחרי CSS ישפיעו מאוד.

Adam Argyle

כשכותבים CSS, לפעמים נוצרות רשימות ארוכות של סלקטורים כדי לטרגט כמה רכיבים עם אותם כללי סגנון. לדוגמה, אם רוצים לשנות את הצבע של תגי <b> שנמצאים בתוך אלמנט כותרת, אפשר לכתוב:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

במקום זאת, אפשר להשתמש ב-:is() כדי לשפר את הקריאוּת ולהימנע מבורר ארוך:

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

הקריאוּת והנוחות של הבוררים הקצרים הם רק חלק מהערך ש-:is() ו-:where() מביאים ל-CSS. במאמר הזה נסביר על התחביר והערך של שני בוררי הפסאודו הפונקציונליים האלה.

תאימות דפדפן

:is()

:where()

:is() ו-:where() ב-Meet

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

קיבוץ של בוררים

כל מה שאפשר לעשות ב-:is() לגבי קיבוץ, אפשר לעשות גם ב-:where(). אפשר להשתמש בהם בכל מקום בבורר, להטמיע אותם בתוך אחרים ולערום אותם. גמישות מלאה של CSS שאתם מכירים ואוהבים. ריכזנו כאן כמה דוגמאות:

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

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

שימוש בבוררים פשוטים ומורכבים באמצעות :is()

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

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

עד עכשיו, אפשר להשתמש ב-:is() וב-:where() באופן סינטקטי ללא הבדל. עכשיו נסביר מה ההבדל ביניהן.

ההבדל בין :is() לבין :where()

כשמדובר בספציפיות, יש הבדל משמעותי בין :is() לבין :where(). למידע נוסף על ספציפיות, אפשר לעיין במודול הספציפיות ב-Learn CSS.

בקצרה

• ל-:where() אין ספציפיות.
  :where() מוחקת את כל הספציפיות ברשימת הבוררים שמועברת כפרמטרים פונקציונליים. זוהי תכונת הסלקטורים הראשונה מסוגה.
• הערך של :is() הוא הערך של הספציפיות של הבורר הספציפי ביותר שלו.‏
  :is(a,div,#id) יש ציון ספציפיות של מזהה, 100 נקודות.

הבחירה בבורר עם רמת הספציפיות הגבוהה ביותר ברשימה גרמה לי לבעיות רק כשהתלהבותי מהקיבוץ הייתה גדולה מדי. תמיד הצלחתי לשפר את הקריאוּת על ידי העברת הבורר עם רמת הספציפיות הגבוהה לבורר משלו, שבו הוא לא ישפיע כל כך. דוגמה לכך:

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

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

תמונה של Markus Winkler ב-Unsplash