Modaller, web sitelerinde yirmi yıldır önemli bir yer tutuyor. İçerikleri üst üste yerleştirmek ve fetch kullanarak işlemleri gerçekleştirmek, hem masaüstü hem de mobil cihazlarda kullanıcı deneyimini iyileştiren harika bir yöntemdir. Ancak birçok geliştirici, HTML ve JavaScript spesifikasyonlarının popover özelliği aracılığıyla native bir modal sistemi uyguladığını bilmiyor. Gelin bu özelliği birlikte inceleyelim.
HTML tarafında, native bir modal oluşturmak için tetikleyici olarak popovertarget özniteliğini ve içerik öğesini tanımlamak için popover özniteliğini bir id ile eşleştirerek kullanıyoruz. Örneğin: vePopover içeriği burada. Butona tıklandığında popover açılır, ancak popover geleneksel bir arka plan katmanı rengine sahip olmadığı için bunu kendi CSS'imizle uygulamamız gerekir.
Popover içeriğini stillendirmek oldukça standarttır, ancak tarayıcı stillendirme seçicisinin sözde seçicisini kullanarak modalın arka planını stillendirebiliriz. Örneğin: [popover] { background: lightblue; padding: 20px; } ve [popover]:-internal-popover-in-top-layer::backdrop { background: rgba(0, 0, 0, .5); }. Burada :-internal-popover-in-top-layer::backdrop, modalın arka planını temsil eder. Geleneksel olarak bu kullanıcı arayüzü, katmanlama ilişkisini göstermek için opaklık içeren bir öğe olmuştur.
Popover özelliği, modern web geliştirmede modal oluşturmayı kolaylaştıran güçlü bir araçtır. Native olarak desteklenmesi sayesinde harici kütüphanelere ihtiyaç duymadan, daha hızlı ve erişilebilir bir yapı sunar. Geliştiricilerin bu özelliği keşfetmesi, daha temiz ve performanslı kod yazmalarına yardımcı olacaktır. Siz de projelerinizde popover kullanarak kullanıcı deneyimini bir üst seviyeye taşıyabilirsiniz.
