:has() Safari’ye İndi

Faydalı Alternatif Metin Yazma

Sadece birkaç gün önce Safari hepimize erken bir Noel hediyesi verdi: En son Safari Teknoloji Önizleme sürümü, :has() sözde sınıf! Aksi takdirde “ebeveyn seçici” olarak bilinir (ancak resmi olarak özellik ‘İlişkisel Sözde-sınıfı’), bir öğeyi onun soyundan gelenlere göre stillendirmemize izin verir. Aşağıdakileri içeren herhangi bir bölümü (kafamın tepesinden) stil gibi şeyler yapabiliriz. img elementler:

section:has(img) {
background: lightgray;
}

Ancak kartal gözlü CSS meraklıları, Bramus’un yazdığı gibi, bundan çok daha fazla olasılık açtığını fark edebilirler. onun blog yazısı. O da deney yapıyor form stiligirdilerinin geçerliliğine dayalı stil etiketleri dahil.

Geçersiz girdiler içeriyorsa, bir formun tamamını farklı şekilde biçimlendirebilirsiniz:

form:has(input:invalid) {
border: 2px solid red;
}

Ebeveyn seçici, CSS dünyasının bir süredir haykırdığı bir şey ve eminim ki önümüzdeki yıl çok daha yaratıcı kullanım örnekleri göreceğiz.

Destek için test edebileceğinizi belirtmekte fayda var. :has() özellik sorgularını kullanarak selector() işlevi, ayrıntılı olarak bu CSS Püf Noktaları gönderisinde. Daha önce kullanmaya hiç ihtiyaç duymadığım için, bu beni tamamen geçti, ancak yine de kullanışlı olacak bir başka harika CSS özelliği. Bramus, tarayıcının destekleyip desteklemediğine bağlı olarak, gönderisinde bir uyarı mesajını göstermek veya gizlemek için kullanır. :has():

@supports selector(:has(*)) {
.info,
.warning
{
display: none;
}
}

Ek bir not olarak, Safari’nin aşağıdaki gibi yeni CSS özelliklerinde öncülük ettiğini görmek harika. :has()yıllarca geride kaldıktan sonra – kuşkusuz Jen Simmons’ın takımdaki varlığının öncülüğünü yaptı.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.