סלקטורים חדשים בפסאודו-מחלקה פונקציונליים של 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()

תאימות דפדפן

:is()

תמיכה בדפדפנים

• 88
• 88
• 78
• 14

מקור

:where()

תמיכה בדפדפנים

• 88
• 88
• 78
• 14

מקור

נעים להכיר: :is() ואת :where()

אלה סלקטורים ברמה פסאודו פונקציונלית. שימו לב ל-() בסוף ולאופן שבו הם מתחילים ב-:. אפשר לחשוב עליהם כקריאות לפונקציות דינמיות של סביבת זמן הריצה שתואמות לרכיבים. כשכותבים 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()

כשמדובר בספציפיות, יש הבדל משמעותי בין :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