Modaller, on yılı aşkın süredir web sitelerinin önemli bir parçasıdır. İçerikleri üst üste yığmak ve fetch kullanarak görevleri tamamlamak, hem masaüstü hem de mobil cihazlarda kullanıcı deneyimini geliştirmenin harika bir yoludur. Ancak çoğu geliştirici, HTML ve JavaScript spesifikasyonlarının popover attribute aracılığıyla yerel bir modal sistemi uyguladığını bilmez. Gelin birlikte inceleyelim!
Yerel bir HTML modal oluşturmak, tetikleyici olarak popovertarget attribute'unu ve içerik öğesini tanımlamak için popover attribute'unu bir id ile eşleştirmekten oluşur. Örneğin: '' ve 'Popover içeriği' koduyla butona tıklandığında popover açılır. Ancak popover, geleneksel bir arka plan katmanı rengine sahip olmayacağından, bunu CSS ile kendimiz uygulamamız gerekir.
Popover içeriğini stillendirmek oldukça standarttır, ancak tarayıcı stil sayfası seçicisinin pseudo-seçicisini kullanarak modalın 'arka planını' da stillendirebiliriz. Örneğin: '[popover] { background: lightblue; padding: 20px; }' ve '[popover]:-internal-popover-in-top-layer::backdrop { background: rgba(0, 0, 0, .5); }' koduyla popover içeriği ve arka planı şeffaflıkla kaplanır. Bu, geleneksel olarak öğeler arasındaki yığın ilişkisini göstermek için opaklık içeren bir UI öğesidir.
Popover attribute, modern tarayıcılarda desteklenir ve JavaScript kullanmadan hızlı ve erişilebilir modal pencereler oluşturmanıza olanak tanır. Bu özelliği kullanarak, kullanıcı deneyimini iyileştirirken kod tabanınızı da sadeleştirebilirsiniz. Denemekten çekinmeyin!
