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 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, uzun seçici kullanmaktan kaçınırken :is() kullanarak okunabilirliği iyileştirebilirsiniz:

: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çicilerdir. Sondaki () öğesine ve : ile başlamalarına dikkat edin. Bunları, öğelerle eşleşen çalışma zamanı dinamik işlev çağrıları olarak düşünebilirsiniz. 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

Gruplandırma ile ilgili olarak :is() adlı kullanıcının yapabileceği her şeyi :where() da yapabilir. Buna seçicinin herhangi bir yerinde kullanım, iç içe yerleştirme ve yığma 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;
}

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şemez. Yani hatalar konusunda toleranslı 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. Farklarını anlamanın zamanı geldi.

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

Kesinlik söz konusu olduğunda :is() ve :where() birbirinden oldukça farklı. Belirliliğe dair bilgi edinmek için CSS'yi Öğren'deki belirlilik modülüne bakın.

Kısaca

• :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 kullanmak, gruplandırma konusunda çok heyecanlandığım zamanlarda beni yanılttı. Yüksek belirginlikli seçiciyi, çok fazla etkisi olmayacağı kendi seçicisine taşıyarak okunabilirliği her zaman iyileştirmeyi başardım. 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 belirlilik 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şturup virgülleri kaldırarak eğlenin.

Fotoğraf: Unsplash'taki Markus Winkler