Yeni CSS işlevsel sözde sınıf seçicileri “:is()” ve “:where()”

CSS yazarken, bazen birden çok öğeyi aynı stil kurallarına göre hedeflemek için uzun seçici listelerle karşılaşabilirsiniz. Örneğin, herhangi bir rengi ayarlamak istiyorsanız &LTb> bir başlık öğesinin içinde bulunan etiketler için şunları yazabilirsiniz:

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

Bunun yerine, :is() ve uzun bir seçiciden kaçınarak okunabilirliği artırın:

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

Okunabilirlik ve daha kısa seçici kolaylıkları, değerin yalnızca bir parçasıdır. :is() Ve :where() CSS’ye getirin. Bu gönderide, bu iki işlevsel sözde seçicinin sözdizimini ve değerini keşfedeceksiniz.

Tarayıcı Uyumluluğu #

:is() #

:where() #

Tanışmak :is() Ve :where() #

Bunlar işlevsel sözde sınıf seçicileridir, dikkat edin () sonunda ve başladıkları şekilde :. Bunları, öğelerle eşleşen çalışma zamanı dinamik işlev çağrıları olarak düşünün. CSS yazarken, öğeleri bir seçicinin ortasında, başında veya sonunda gruplandırmanız için size bir yol sunarlar. Ayrıca, özgüllüğü geçersiz kılma veya artırma gücü vererek özgüllüğü değiştirebilirler.

Seçici gruplama #

Herhangi bir şey :is() gruplama ile ilgili yapabilir, böylece yapabilir :where(). Bu, seçicide herhangi bir yerde kullanılmayı, iç içe yerleştirmeyi ve istiflemeyi içerir. Bildiğiniz ve sevdiğiniz tam CSS esnekliği. İşte birkaç örnek:

/* 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;
}

Yukarıdaki seçici örneklerinin her biri, bu iki işlevsel sözde sınıfın esnekliğini gösterir. Kodunuzun yararlanabilecek alanlarını bulmak için :is() veya :where()birden çok virgül ve seçici tekrarı içeren seçicileri arayın.

ile basit ve karmaşık seçicileri kullanma :is() #

Seçiciler hakkında bilgi edinmek için Learn CSS’deki seçiciler modülüne göz atın. Yeteneği göstermeye yardımcı olacak birkaç basit ve karmaşık seçici örneği aşağıda bulabilirsiniz:

article > :is(p,blockquote) {
color: black;
}
:is(.dark-theme.hero > h1) {
font-weight: bold;
}
article:is(.dark-theme:not(main .hero)) {
font-size: 2rem;
}

Şu ana kadar, :is() Ve :where() sözdizimsel olarak değiştirilebilir. Nasıl farklı olduklarına bakmanın zamanı geldi.

Arasındaki fark :is() Ve :where() #

Spesifikliğe gelince, :is() Ve :where() güçlü bir şekilde farklılaşır. Spesifikliği tazelemek için Learn CSS’deki spesifiklik modülüne bakın.

Kısacası

• :where() özgüllüğü yoktur.
  :where() fonksiyonel parametreler olarak iletilen seçici listesindeki tüm özgüllüğü ezer. Bu türünün ilk örneği seçici özelliğidir.
• :is() en spesifik seçicisinin özgüllüğünü alır.
  :is(a,div,#id) bir kimliğin özgüllük puanına sahiptir, 100 puan.

Listeden en yüksek özgüllüğe sahip seçiciyi almak, yalnızca gruplama konusunda çok heyecanlandığımda benim için bir başarı oldu. Yüksek özgüllüğe sahip seçiciyi, çok fazla etkisinin olmayacağı kendi seçicisine taşıyarak okunabilirliği her zaman iyileştirebildim. İşte ne demek istediğime bir örnek:

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

İle :where(), Kitaplıkların belirli bir özelliği olmayan sürümler sunmasını bekliyorum. Yazar stilleri ve kitaplık stilleri arasındaki özgüllük rekabeti sona erebilir. CSS yazarken rekabet edecek hiçbir özgüllük olmayacaktır. CSS bir süredir bunun gibi bir gruplandırma özelliği üzerinde çalışıyor, burada ve hala büyük ölçüde keşfedilmemiş bir bölge. Daha küçük stil sayfaları oluştururken ve virgülleri kaldırırken iyi eğlenceler.

fotoğrafı çeken Markus Winkler Açık Unsplash