Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Modern Selector'ler: :is(), :where(), :has(), :not() ve State Pseudo-class'ları
:is() specificity'yi en spesifik argümanından alır, :where() ise her zaman sıfırdır; :not() ve :has() da :is() gibi hesaplanır. Bookstore'un katalog ve checkout sayfalarında specificity'yi DevTools'un protokolüyle ölçüyor, :has() ile kapaksız kitap kartını, :user-invalid ile hatalı form satırını JavaScript'siz stillendiriyor, :focus-visible, :open, :nth-child(of S) ve :empty'nin gerçek davranışını Chromium ve WebKit'te gösteriyoruz.
CSS Nasıl Karar Verir? Cascade, Specificity, Inheritance ve Cascade Layers (@layer)
Bir element'e yazılan değerlerden hangisinin kazanacağına cascade karar verir ve sıra şöyledir: origin ve importance, context, style attribute, layer, specificity, kaynak sırası; layer specificity'den önce gelir. Bookstore'un "neden bu buton kırmızı değil?" hatasını DevTools'un kullandığı CDP ile adım adım çözüyor, @layer ile üçüncü parti CSS'i kendi stillerimizin altına alıyor ve inherit/initial/unset/revert/revert-layer farkını iki tarayıcı motorunda ölçüyoruz.