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

CSS seçici söz dizimine eklenen bu küçük eklemelerin büyük bir etkisi olacak.

Adam Argyle

CSS yazarken bazen aynı stil kurallarına sahip birden fazla öğeyi hedeflemek için uzun seçici listeleri oluşturabilirsiniz. Örneğin, bir başlık öğesinin içindeki <b> etiketlerinin rengini ayarlamak istiyorsanız şunları yazabilirsiniz:

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

Bunun yerine, :is() kullanarak uzun bir seçiciden kaçınırken okunabilirliği artırabilirsiniz:

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

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

Tarayıcı uyumluluğu

:is()

:where()

:is() ve :where() ile tanışın

Bunlar işlevsel sözde sınıf seçicileridir. Sonundaki () ve : ile başlama şekline dikkat edin. Bunları, öğelerle eşleşen çalışma zamanında 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ı sağlar. Ayrıca, özgünlüğü değiştirerek özgünlüğü geçersiz kılma veya artırma gücünü size verebilir.

Seçici gruplandırma

:is()'nin gruplandırmayla ilgili yapabileceği her şeyi :where() da yapabilir. Seçicinin herhangi bir yerinde kullanılması, iç içe yerleştirilmesi ve yığılması da buna dahildir. Bildiğiniz ve sevdiğiniz tam CSS esnekliği. Aşağıda birkaç örnek verilmiştir:

/* 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. Kodunuzda :is() veya :where()'ten yararlanabilecek alanları bulmak için birden fazla virgül ve seçici tekrarı içeren seçicileri arayın.

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

Seçiciler hakkında bilgi edinmek için Learn CSS'deki seçiciler modülüne göz atın. Bu özelliği açıklamaya yardımcı olması için basit ve karmaşık seçicilere dair birkaç örnek verilmiştir:

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öz dizimi açısından birbirinin yerine kullanılabilir. Şimdi bu iki yöntem arasındaki farklara bakalım.

:is() ile :where() arasındaki fark

:is() ve :where(), belirlilik açısından birbirinden çok farklıdır. Belirliliğe dair bilgi edinmek için CSS'yi Öğren'deki belirlilik modülüne bakın.

Özet

• :where() özgünlüğü yoktur.
  :where(), işlevsel parametreler olarak iletilen seçici listesindeki tüm özgünlüğü sıkıştırır. Bu, türünün ilk seçici özelliğidir.
• :is(), en belirgin seçicisinin spesifikliğini alır.
  :is(a,div,#id), 100 puan olan bir kimlik spesifiklik puanına sahiptir.

Listeden en yüksek özgünlük seçiciyi kullanmam, gruplandırma konusunda çok heyecanlandığım bir dönemde bana sorun oldu. Yüksek özgünlük seçiciyi, çok fazla etkisi olmayacağı kendi seçicisine taşıyarak okunabilirliği her zaman iyileştirebiliyordum. Ne demek istediğimi anlamak için aşağıdaki örneği inceleyebilirsiniz:

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

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

:where() ile birlikte, kitaplıkların belirli olmayan sürümler sunmasını bekliyorum. Yazar stilleri ile kitaplık stilleri arasındaki özgünlük rekabeti sona erebilir. CSS yazarken rekabet edilecek bir özgünlük olmaz. CSS, bu tür bir gruplandırma özelliği üzerinde uzun süredir çalışıyor. Bu özellik kullanıma sunuldu ancak henüz büyük ölçüde keşfedilmemiş bir alan. Daha küçük stil sayfaları oluşturma ve virgülleri kaldırma konusunda iyi eğlenceler dileriz.

Fotoğraf: Unsplash'taki Markus Winkler