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

CSS seçici söz dizimine yapılan 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 tablodaki başlık öğesinin içinde bulunan <b> etiketlerini ayarladığınızda şöyle 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.

:is() kullanmadan önceki ve sonraki durumu gösteren sonsuz bir 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. Sonundaki () ve : ile başlama şekline dikkat edin. Bunları, çalışma zamanı dinamik fonksiyon çağrıları olarak eşleşme öğeleri. CSS yazarken, öğeleri bir seçicinin ortasında, başında veya sonunda gruplandırmanızı sağlar. Ayrıca kapsamı belirli bir düzende belirginliği geçersiz kılabilir veya artırabilirsiniz.

Seçici gruplandırma

Gruplandırma ile ilgili olarak :is() adlı kullanıcının 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 örneklerin her biri, bu iki yöntemin esnekliğini göstermektedir işlevsel sanal sınıflar oluşturuyor. 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çicilerle ilgili bilgilerinizi tazelemek için Google Play Müzik'teki CSS gibi diğer öğelerde kullanabilirsiniz. İşte bunlardan bazıları yeteneğin gösterilmesine yardımcı olacak basit ve karmaşık seçici örnekleri:

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

Normalde, seçici listesi oluşturmak için bir , kullanıldığında, seçicilerden herhangi biri geçersizse tüm seçiciler geçersiz hale gelir ve liste öğelerle eşleşmez. Yani hatalar için affedici değiller. Yine de :is() ve :where() affeder ve bağlılıktan kurtulmanıza yardımcı olabilir.

Şu ana kadar :is() ve :where() söz dizimi açısından birbirinin yerine kullanılabilir. Bu iki yöntem arasındaki farklara göz atalım.

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

Kesinlik söz konusu olduğunda :is() ve :where() birbirinden oldukça farklı. Örneğin, daha fazla bilgi edinmek için, Google Play Yardım Merkezi'ndeki CSS gibi diğer öğelerde kullanabilirsiniz.

Kısaca

• :where() belirli bir belirginliğe sahip değil.
  :where() işlevsel parametreler olarak iletilen seçici listesi. Bu, proje yönetiminin tür seçici özelliği.
• :is(), en spesifik olanı alır seçici.
  :is(a,div,#id), 100 puanlık bir kimlik puanına sahip.

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, 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 belirlilik yoktur. CSS, epey süredir bunun gibi bir gruplandırma özelliği üzerinde çalışıyor bugün burada ve hâlâ büyük ölçüde keşfedilmemiş bir idari bölge. Eğlenin ve virgülleri kaldırabilirsiniz.

Fotoğraf: Unsplash'taki Markus Winkler