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