انتخابگرهای شبه کلاس کاربردی جدید 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()

Meet :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() شدیداً واگرا می شوند. برای اطلاعات بیشتر در مورد ویژگی، به ماژول ویژگی در Learn CSS مراجعه کنید.

به طور خلاصه

• :where() هیچ ویژگی خاصی ندارد.
  :where() تمام ویژگی های موجود در لیست انتخابگر را که به عنوان پارامترهای تابعی ارسال شده اند، له می کند. این اولین ویژگی انتخابگر در نوع خود است.
• :is() ویژگی خاص ترین انتخابگر خود را می گیرد.
  :is(a,div,#id) دارای امتیاز ویژگی یک ID، 100 امتیاز است.

انتخاب کننده بالاترین ویژگی از لیست تنها زمانی برای من مشکل ساز بود که در مورد گروه بندی بسیار هیجان زده شده بودم. من همیشه می‌توانستم خوانایی را با جابجایی انتخابگر با ویژگی بالا به انتخاب‌گر خودش بهبود بخشم، جایی که تاثیر زیادی نداشته باشد. در اینجا یک مثال از آنچه منظور من است:

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

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

با :where() منتظرم ببینم کتابخانه ها نسخه هایی را بدون خاصیت ارائه می دهند. رقابت اختصاصی بین سبک های نویسنده و سبک های کتابخانه ای می تواند به پایان برسد. هنگام نوشتن CSS هیچ ویژگی خاصی برای رقابت وجود ندارد. CSS مدت زیادی است که روی یک ویژگی گروه‌بندی مانند این کار می‌کند، این ویژگی اینجاست، و هنوز هم منطقه‌ای تا حد زیادی ناشناخته است. از ساختن شیوه نامه های کوچکتر و حذف کاما لذت ببرید.

عکس از مارکوس وینکلر در Unsplash