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

CSS seçici söz diziminde yapılan bu küçük görünüşte eklemelerin büyük bir etkisi olacaktır.

Adam Argyle

CSS yazarken bazen aynı stil kurallarına sahip birden çok öğeyi hedeflemek için uzun seçici listeleri kullanabilirsiniz. Örneğin, bir başlık öğesinin içinde bulunan <b> etiketlerinin rengini ayarlamak isterseniz şunu yazabilirsiniz:

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

Bunun yerine, uzun bir seçiciden kaçınarak okunabilirliği artırmak için :is() kullanabilirsiniz:

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

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

:is() kullanımının öncesinde ve sonrasında yaşanan sonsuz görsel

Tarayıcı uyumluluğu

:is()

Tarayıcı Desteği

  • 88
  • 88
  • 78
  • 14

Kaynak

:where()

Tarayıcı Desteği

  • 88
  • 88
  • 78
  • 14

Kaynak

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

Bunlar işlevsel sözde sınıf seçicileridir. Sondaki () öğesine ve : ile başlama şekillerine dikkat edin. 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 bir yol sunarlar. Ayrıca belirlilik düzeyini de değiştirebilir, böylece spesifikliği etkisiz hale getirebilir veya artırabilirler.

Seçici gruplandırması

Gruplandırmayla ilgili olarak :is() tarafından yapılan her şey :where() tarafından da yapılabilir. Buna seçicinin herhangi bir yerinde kullanılma, iç içe yerleştirme ve yığınlama 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() ifadesinden yararlanabilecek alanları bulmak için birden çok virgüle ve seçici tekrarına sahip seçicileri bulun.

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

Seçiciler hakkında bilgilerinizi tazelemek için Learn CSS'deki seçiciler modülüne göz atın. Beceriyi göstermeye yardımcı olması için basit ve karmaşık seçicilere birkaç örnek:

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 birbirinin yerine kullanılabilir. Şimdi bunların arasındaki farkları görme zamanı.

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

Spesifikasyon söz konusu olduğunda :is() ve :where() arasında büyük farklar vardır. Spesifikasyon hakkındaki bilgilerinizi tazelemek için Learn CSS'deki özellik modülüne bakın.

Kısaca

  • :where() belirli bir kesinliğe sahip değil.
    :where(), seçici listede işlevsel parametre olarak iletilen tüm belirliliği ortadan kaldırır. Bu, türünün ilk örneği.
  • :is(), en spesifik seçicinin belirliliğini alır.
    :is(a,div,#id) belirli bir kimlik puanına (100 puan) sahiptir.

Listedeki en yüksek belirginlik seçicisini seçmek, gruplandırma konusunda çok heyecanlandığım dönemde benim için büyük bir sorundu. Yüksek ayrıntı düzeyi seçiciyi çok fazla etkisi olmayacak kendi seçicisine taşıyarak her zaman okunabilirliği iyileştirebildim. Ne demek istediğime ilişkin bir örnek:

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

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

:where() ile kitaplıkların belirli olmayan sürümler sunduğunu görmeyi bekliyorum. Yazar stilleri ile kitaplık stilleri arasındaki belirlilik rekabeti sona erebilir. CSS yazarken rekabet edilecek belirli bir konu yoktur. CSS uzun süredir bunun gibi bir gruplandırma özelliği üzerinde çalışıyor ve hâlâ büyük ölçüde keşfedilmemiş bir alanda bulunuyor. Daha küçük stil sayfaları hazırlayıp virgülleri kaldırarak eğlenin.

Fotoğrafçı: Markus Winkler'ın Unsplash'teki fotoğrafı