Popover API ile popover işlevi uygulama

 (developer.mozilla.org)
2 puan yazan GN⁺ 2024-05-11 | 1 yorum | WhatsApp'ta paylaş

Popover API'nin başlıca içeriğinin özeti

Popover API'ye giriş

  • Popover API, geliştiricilere sayfa içeriğinin üzerinde popover içeriği göstermek için standart, tutarlı ve esnek bir mekanizma sağlar
  • Popover içeriği, HTML öznitelikleri kullanılarak deklaratif olarak veya JavaScript üzerinden kontrol edilebilir

Popover'ın özellikleri ve kullanım şekli

  • Popover'lar iki türe ayrılır: Modal ve non-modal; Popover API ile oluşturulan popover'lar ise her zaman non-modal'dır
    • Modal, popover görüntülenirken sayfanın geri kalanının etkileşimsiz olarak işlenmesi anlamına gelir
    • Non-modal, popover görüntülenirken sayfanın geri kalanıyla etkileşim kurulabileceği anlamına gelir
  • Popover için yaygın kullanım örnekleri arasında işlem menüleri, özel "toast" bildirimleri, form öğesi önerileri, içerik seçiciler veya eğitim amaçlı UI'ler yer alır
  • Popover'lar HTML öznitelikleriyle deklaratif olarak ya da JavaScript API üzerinden oluşturulabilir

Popover API ile ilgili HTML öznitelikleri

  • popover: Bir öğeyi popover öğesine dönüştüren genel öznitelik
  • popovertarget: <button> veya <input> öğesini popover kontrol düğmesine dönüştürür
  • popovertargetaction: Kontrol eden <button> veya <input> tarafından yönetilen popover öğesinde gerçekleştirilecek işlemi belirtir

Popover API ile ilgili CSS özellikleri

  • ::backdrop: Popover öğesinin hemen arkasına yerleştirilen tam ekran öğedir; istenirse popover'ın arkasındaki sayfa içeriğine efekt eklemek için kullanılabilir
  • :popover-open: Yalnızca popover öğesi görünür durumdayken eşleşen sözde sınıftır; popover öğesi gösterildiğinde stil vermek için kullanılabilir

Popover API ile ilgili arayüzler ve genişletmeler

  • ToggleEvent: Popover öğesinin durumu görünür ve gizli arasında değiştiğinde kullanıcıyı bilgilendiren olayı temsil eder
  • HTMLElement.popover, HTMLButtonElement.popoverTargetElement, HTMLInputElement.popoverTargetElement, HTMLButtonElement.popoverTargetAction, HTMLInputElement.popoverTargetAction gibi instance özellikleri eklendi
  • HTMLElement.hidePopover(), HTMLElement.showPopover(), HTMLElement.togglePopover() gibi instance metotları eklendi
  • beforetoggle, toggle olayları eklendi

GN⁺ görüşü

  • Popover API, web geliştiricilere popover UI'lerini kolayca uygulayabilecekleri standart bir yöntem sunması açısından anlamlı. Daha önce bunun için kütüphane kullanmak veya doğrudan kendiniz uygulamak gerekiyordu
  • Ancak Popover API'nin hâlâ deneysel bir özellik olması ve tarayıcı desteğinin sınırlı olması dikkate alınmalı. Production ortamında kullanmak için polyfill ya da mevcut kütüphanelerle birlikte kullanımın değerlendirilmesi gerekebilir
  • Benzer işlev sunan kütüphaneler arasında Bootstrap'ın Popover bileşeni ve Tippy.js bulunuyor
  • Popover API kullanılırken erişilebilirlik de göz önünde bulundurulmalı. Popover klavyeyle kontrol edilebilmeli ve ekran okuyucu kullanıcıları için alternatif metin de sağlanmalı

İlgili okumalar

1 yorum

 
GN⁺ 2024-05-11
Hacker News görüşleri

Özetle şöyle deniyor.

  • CSS Anchor Positioning kullanıma girdiğinde, Popover API ile birleşerek özel tooltip'lerin veya context menu'lerin deklaratif biçimde uygulanmasını mümkün kılacak; böylece PopperJS gibi kütüphanelere gerek kalmayacak.
  • Modal dialog isteniyorsa <dialog> öğesi de kullanılabilir.
  • Şu anda popover'ların tarayıcı penceresi sınırlarını aşamaması gibi nedenlerle host OS pencereleme sistemiyle iyi entegre olmaması, uygulamada bazı sınırlara yol açıyor. Bunun düzgün yapılabilmesi için Win32'de her popover için ayrı bir HWND, macOS'ta ise bir NSView gerekeceği söyleniyor.
  • Tarayıcılarda popup blocker varken böyle bir API yapılmasının ironik olduğu, bunun da 90'ların sonu ile 2000'lerin başındaki popup/popup-under reklam savaşlarını hatırlattığı söyleniyor.
  • Popover API kullanılırsa eklentilerle hedeflenip engellenmesi kolay olacak. Bunun çoğunlukla kullanıcıların sevmediği pazarlama CTA'ları veya istilacı destek sohbetleri gibi amaçlarla kullanılacağı düşünülüyor.
  • Popover'ı modal yapmak istenirse <dialog> kullanılması öneriliyor; ancak arka planı bulanıklaştırma gibi durumlarda popover'ı modal yapmak zaten doğru kullanım senaryosu. <popover modal=true> daha iyi bir yaklaşım olmaz mı?
  • Stimulus + Popper ile özel olarak uygulanmış örnek kod paylaşılıyor.
  • Sayfada popover'ın ne olduğunu gösteren bir görsel bulunmadığı eleştiriliyor.
  • Popover API'nin ortaya çıkmasına hayranlık belirten tepkiler de var.