CSS seçici söz dizimine yapılan bu küçük eklemelerin büyük bir etkisi olacak.
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.
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ı, ç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;
}
Ş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