Yeni CSS özelikleri nasıl çalışıyor :is() :has()

Kod okunurluğu son derece önemli, projeye sonradan dahil olacak developar’ların hızlıca sürece adapte olabilmesi için kodların bir bakışta anlaşılır yazılması gerekiyor. Özellikle de son zamanlarda ülkemizdeki developar’ların çok sık firma değişikliği yapması sonucu kod okunurluğunun önemini daha çok hissetmeye başladık.

Yazılımın her alanında olduğu gibi CSS’te de bir şeyi yapmanın onlarca farklı yolu var. Bu durum kolaylaştırıcı olduğu kadar kod karmaşasına da zemin hazırlıyor. CSS’i geliştirenler de kod karmaşasının önüne geçmek için yeni yöntemler duyuruyorlar.

:is()

Birden çok elementin pseudo (sözde) özelliğine müdahale etmek için şimdiye kadar yazdığımız seçiçi kod şöyleydi.

h1 span:hover,
h2 span:hover,
h3 span:hover {
  CSS kodları buraya
}

Örnekteki gibi yazmanın iki olumsuz etkisi var, birincisi “span:hover”ı defalarca yazmak, ikincisi ise seçtiğimiz elementlerden birinin hatalı olduğunda browser’lar tarafından tüm CSS blok’nun atlanıyor (geçersiz sayılıyor) olması. is:() tam olarak bu sorunu çözüyor.

:is(h1, h2, h3) span:hover {
  CSS kodları buraya
}

:has()

Maalesef henüz neredeyse hiçbir browser desteklemiyor, ama yakın gelecekte desteklenmesi sürpriz olmaz.

Yine de açıklayalım, karmaşık büyük projelere dahil olduğunuzda CSS ile sınanmak çok can sıkıcıdır. Developer’ı zaman zaman çaresiz hissettirir. Ben böyle durumlarda birçok kez “Keşke child element üzerinden parent elementi seçmenin bir yolu olsa” diye içimden geçirmişimdir.

:has() tam olarak bunu yapıyor. Örneğin içerisinde video içereren div’leri seçmek için aşağıdaki gibi bir kod yazmanız gerekir.

div:has(video) {
  CSS kodları buraya
}

Bu özelliği kod okunurluğu açısından tartışmaya açık buluyorum ancak yine de böyle bir güncellemeye ihtiyaç var.

Yararlandığım kaynakları

• https://polypane.app/blog/where-is-has-new-css-selectors-that-make-your-life-easier/