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

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