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()

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()

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ı

--

--

Yazılım geliştiririm, kısa film yönetirim ve yazılar yazarım.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Safa Gayret

Yazılım geliştiririm, kısa film yönetirim ve yazılar yazarım.