Web tasarımında modal pencereler, yıllardır kullanıcı deneyimini iyileştirmek için vazgeçilmez bir araç olmuştur. İçerikleri üst üste istiflemek ve fetch ile veri alışverişi yapmak, hem masaüstü hem de mobil cihazlarda akıcı bir deneyim sunar. Ancak çoğu geliştirici, HTML ve JavaScript'in kendi bünyesinde popover niteliği aracılığıyla yerel bir modal sistemi sunduğunu bilmez. Bu makalede, bu özelliği nasıl kullanacağınızı adım adım inceleyeceğiz.
HTML tarafında yerel bir modal oluşturmak için tetikleyici elemana popovertarget niteliği, içerik elemanına ise popover niteliği ve bir id eklemeniz yeterlidir. Örnek olarak, bir butona popovertarget="popover-icerik" atayıp, aynı id'ye sahip bir div'e popover niteliği vererek modalı oluşturabilirsiniz. Butona tıklandığında popover açılır, ancak varsayılan olarak arka plan katmanı (backdrop) gelmez. Bunu CSS ile kendimiz eklememiz gerekir.
Popover içeriğini stilize etmek standart CSS ile mümkündür. Ancak modalın arka plan katmanını (backdrop) eklemek için tarayıcı stil sayfası seçicisini kullanabilirsiniz. Örneğin, [popover] seçicisi ile içerik alanına arka plan rengi ve dolgu ekleyebilir, [popover]:-internal-popover-in-top-layer::backdrop seçicisi ile ise modalın arkasında yarı saydam bir katman oluşturabilirsiniz. Bu sayede istifleme ilişkisi görsel olarak belirginleşir.
Önemli Gelişmeler
Bu yerel sistemin en büyük avantajı, herhangi bir JavaScript kütüphanesine (jQuery, Bootstrap vb.) ihtiyaç duymamasıdır. Popover, tarayıcı tarafından yerel olarak desteklendiği için daha hafif ve hızlıdır. Ayrıca erişilebilirlik konusunda da standartlara uygun çalışır. Klavye ile gezinme ve ekran okuyucu desteği gibi özellikler otomatik olarak gelir.
Popover niteliği ile oluşturulan modalın kapatılması da oldukça kolaydır. Kullanıcı, popover dışına tıklayarak veya Escape tuşuna basarak modalı kapatabilir. Ayrıca popover içindeki bir butona popover kapatma işlevi eklemek için popovertarget niteliğine false değeri atayabilirsiniz. Bu sayede tamamen yerel bir modal deneyimi elde edersiniz.
Uzmanların Görüşleri
Sonuç olarak, HTML popover özelliği, modern web geliştirmede modal pencereler için güçlü ve hafif bir çözüm sunar. Üçüncü parti kütüphanelere bağımlılığı azaltırken, performans ve erişilebilirlikten ödün vermez. Eğer projelerinizde modal kullanıyorsanız, popover niteliğini denemenizi şiddetle tavsiye ederim. CSS ile özelleştirmesi de oldukça basit olduğu için kısa sürede projelerinize entegre edebilirsiniz.
Kaynak: davidwalsh.name
