Popover API ile popover uygulamak

 (developer.mozilla.org)
2 puan yazan GN⁺ 2024-05-11 | 1 yorum | WhatsApp'ta paylaş
  • Tarayıcının yerleşik özellikleriyle sayfanın üzerinde görünen popover UI oluşturulabilir; böylece menü, öneri ve bildirim gibi desenler daha tutarlı biçimde uygulanabilir
  • Popover API’nin popover’ları her zaman modal olmayan yapıdadır; bu nedenle sayfa etkileşimini engellemesi gereken UI’lar için `` daha uygundur
  • Basit aç/kapat işlemleri popover, popovertarget, popovertargetaction gibi HTML öznitelikleri ile yapılabilir; gerekirse JavaScript metotlarıyla görünürlük durumu kontrol edilebilir
  • ::backdrop, :popover-open, beforetoggle, toggle gibi özelliklerle stil ve durum değişimleri ele alınabilir; interest invoker özelliği ise JavaScript olmadan hover/focus gösterimini destekler
  • 2025 Ocak’tan itibaren modern cihaz ve tarayıcılarda çalışan bir Baseline 2025 özelliğidir; ancak eski ortamlar ve bazı ayrıntı özellikler için uyumluluk kontrolü gerekir

Popover API’nin çözdüğü sorun

  • Popover API, diğer sayfa içeriğinin üzerinde popover içeriği göstermeye yönelik standart bir mekanizma sunar
  • Popover’lar yalnızca HTML öznitelikleriyle kontrol edilebilir ya da JavaScript API’si ile gösterme/gizleme durumu doğrudan yönetilebilir
  • Web’de overlays, popups, popovers, dialogs gibi adlarla anılan UI desenleri, tarayıcının yerleşik yetenekleriyle daha tutarlı biçimde uygulanabilir

Modal gerekiyorsa `` kullanın

  • Popover UI genel olarak modal ve modal olmayan olarak ikiye ayrılır
    • Modal yapıda, popover görünürken sayfanın geri kalanıyla etkileşim kurulamaz
    • Modal olmayan yapıda ise popover açıkken sayfanın geri kalanıyla etkileşim sürer
  • Popover API ile oluşturulan popover’lar her zaman modal olmayan yapıdadır
  • Sayfa etkileşimini engelleyen modal bir popover gerekiyorsa `` öğesi uygundur
  • gibi üzerine popover uygulamak da geçerlidir; böylece hem popover kontrolü hem de dialog anlambilimi birlikte kullanılabilir

Temel kullanım biçimi

  • Popover API, kullanıcı etkileşimi gerektiren UI’larda sıkça kullanılabilir
    • Aksiyon menüleri
    • Özel toast bildirimleri
    • Form öğesi önerileri
    • İçerik seçicileri
    • Eğitim amaçlı UI
  • Yalnızca HTML ile basit bir popover aç/kapat düğmesi oluşturulabilir
Toggle the popover
Popover content
  • JavaScript tarafında HTMLElement.togglePopover() ile popover’ın gösterilme/gizlenme durumu değiştirilir
  • API ayrıca popover durum değişimlerine tepki veren event’ler ve stil vermeyi kolaylaştıran CSS özellikleri de sunar

HTML öznitelikleri

  • interestfor
    • HTML , , öğeleri veya SVG öğesi bir interest invoker olarak tanımlanır
    • Değer, hedef öğenin id değeridir; invoker öğede interest görünür olduğunda ya da kaybolduğunda hedef öğe etkilenir
  • popover
    • Öğeyi bir popover öğesine dönüştüren genel özniteliktir
    • Değer olarak "auto", "hint", "manual" durumlarını alabilir
  • popovertarget
    • veya öğesini bir popover kontrol düğmesine dönüştürür
    • Değer, kontrol edilecek popover öğesinin ID’sidir
  • popovertargetaction
    • Kontrol düğmesinin popover üzerinde gerçekleştireceği işlemi belirtir
    • Olası değerler "hide", "show", "toggle" şeklindedir

CSS ile görünürlük durumunu yönetme

  • ::backdrop
    • Popover öğesinin hemen arkasına yerleştirilen tam ekran sözde öğedir
    • Gerekirse popover’ın arkasındaki sayfa içeriğine bulanıklık gibi efektler uygulanabilir
  • interest-delay, interest-delay-start, interest-delay-end
    • Kullanıcının interest göstermesi ya da kaybetmesi ile tarayıcının buna tepki vermesi arasına gecikme süresi ekler
  • :interest-source, :interest-target
    • Interest gösterildiğinde, sırasıyla invoker’a ve ilişkili hedef öğeye stil uygulanmasını sağlar
  • :popover-open
    • Yalnızca popover öğesi görünür durumdayken eşleşen sözde sınıftır
    • Açık durumdaki popover’ı stillendirmek için kullanılır

JavaScript arayüzü ve DOM genişletmeleri

  • InterestEvent
    • interest ve loseinterest event’lerinin event nesnesidir
    • İlişkili interest invoker öğesine referans veren source özelliğini içerir
  • ToggleEvent
    • Popover öğesi görünür ve gizli durumlar arasında geçiş yaptığında oluşan event’i temsil eder
    • beforetoggle ve toggle event’lerinin event nesnesidir
  • interestForElement
    • Interest invoker’ın hedeflediği öğeye ait referansı alır veya ayarlar
    • HTMLButtonElement, HTMLAnchorElement, HTMLAreaElement, SVGAElement üzerinde kullanılabilir
  • HTMLElement.popover
    • Bir öğenin popover durumunu JavaScript ile alır veya ayarlar
    • "auto", "hint", "manual" değerlerini kullanır ve özellik algılama için de yararlıdır
    • HTML genel özniteliği popover değerini yansıtır
  • popoverTargetElement
    • HTMLButtonElement ve HTMLInputElement üzerinde, kontrol düğmesinin yönettiği popover öğesini alır veya ayarlar
    • HTML popovertarget özniteliğinin JavaScript karşılığıdır
  • popoverTargetAction
    • HTMLButtonElement ve HTMLInputElement üzerinde gerçekleştirilecek popover işlemini alır veya ayarlar
    • "hide", "show", "toggle" değerlerini kullanır ve popovertargetaction özniteliğini yansıtır

Metotlar ve event’ler

  • HTMLElement.hidePopover()
    • Popover öğesini top layer’dan kaldırır ve display: none ile gizler
  • HTMLElement.showPopover()
    • Popover öğesini top layer’a ekleyerek gösterir
  • HTMLElement.togglePopover()
    • Popover öğesini görünür ve gizli durumlar arasında değiştirir
  • beforetoggle
    • Popover öğesinin durumu görünür ve gizli arasında değişmeden hemen önce tetiklenir
    • Popover’ın açılmasını engellemek veya popover durumuna göre başka öğeleri güncellemek için kullanılabilir
  • toggle
    • Popover öğesinin durumu değiştikten hemen sonra tetiklenir
  • interest
    • Interest invoker’ın hedef öğesinde interest gösterildiğinde tetiklenir
  • loseinterest
    • Interest invoker’ın hedef öğesinde interest kaybolduğunda tetiklenir

Örnekler ve spesifikasyon bağlantıları

İlgili okumalar

1 yorum

 
GN⁺ 2024-05-11
Hacker News yorumları

  • Popover API, CSS Anchor Positioning de geldiğinde gerçekten büyük bir değişim yaratacak gibi görünüyor
    Anchor positioning, bir öğenin sayfadaki başka bir öğeyi referans alarak konumlandırılmasını sağlıyor
    Popover API ile birleştiğinde özel tooltip’ler veya context menu’ler bildirimsel olarak uygulanabiliyor ve PopperJS gibi kütüphanelere de gerek kalmıyor
    https://developer.chrome.com/blog/tether-elements-to-each-ot...
    https://popper.js.org/docs/v2/

    • CSS Anchor API kullanımını anlatan yeni bir yazı az önce yayımladım, gelecek hafta da Chromium’a girmesi planlanıyor
      https://developer.chrome.com/blog/anchor-positioning-api
    • Tarayıcı destek durumuna buradan bakabilirsiniz
      https://caniuse.com/css-anchor-positioning
    • Son birkaç yılda CSS Anchor Positioning olsaydı, inanılmaz miktarda zaman kazanırdım
    • Eksik olan kritik parça bu
      Geçen hafta yeni Popover API ile bir şey yapıp yayımlamaya çalıştım ama tüm tarayıcılarda konumlandırma desteği yetersiz olduğu için kullanım alanı çok kısıtlı kaldı
      Son eksik tarayıcı olan Firefox da anchor positioning’i zaten beta sürümüne eklemiş gibi görünüyor, o yüzden çok uzun sürmez gibi
    • 2024 yılındayız ve HTML/CSS’te title benzeri bir tooltip özelliği olmaması şaşırtıcı

  • Modal diyalog gerekiyorsa <dialog> öğesi de var
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...

    • Açılır/kapanır içerik gerekiyorsa ya da biraz zorlayarak “dropdown” için bile <details> kullanılabilir
      Garip şekilde, <dialog> veya <details>’ten farklı olarak <popover> için yalnızca öznitelikle bildirimsel bir open durumu oluşturulamıyor gibi görünüyor
      Bu eksik bir özellik gibi hissettiriyor; umarım bu kararın bir gerekçesi vardır
      https://developer.mozilla.org/en-US/docs/Web/HTML/Element/de...
    • Animasyonları ve genel modal davranışını güncel beklenti seviyesine getirmek için epey çalışma gerektiğini belirtmek isterim
      Elbette yapılabilir ama hiç de önemsiz bir iş değil
    • Belirtildiği gibi animasyon daha zor, ancak erişilebilirlik mevcut ve Esc ile kapatma, yerleşik arka plan, yerleşik focus trap desteği var
      Safari desteğinin gelmesi zaman aldı ama artık her yerde kullanılabiliyor
      Bence etiketleri kendin birleştirmekten daha iyi
    • Yazının ilk birkaç paragrafında buna zaten değiniliyor

  • Ana işletim sisteminin pencere sistemi ile birlikte uygulanırsa bu özellik kesinlikle gerekli görünüyor
    Çünkü şu an popover’lar her zaman iyi çalışmayan bir yöntemle taklit edilmek zorunda
    Örneğin tarayıcının yerel <select> bileşeni, tarayıcı penceresinin sınırlarının dışına taşabildiği için pencere tarafından kırpılma konusunda endişe etmiyor; ama Quasar gibi araç takımlarındaki gösterişli sahte select bileşenleri bunu yapamıyor, bu yüzden yerleşim seçenekleri sınırlı kalıyor
    Düzgün yapılacaksa win32’de her popover’ın kendi yerel HWND’si olması, Cocoa/macOS’ta da kendi NSView’u içinde yer alması gerekir gibi duruyor
    Tarayıcıların bunu gerçekten böyle mi uyguladığını, yoksa sadece tarayıcı penceresi içinde üstüne çiziyormuş gibi mi yaptığını merak ediyorum

    • Bu popover’lar sadece normal DOM düğümleri ve normal CSS ile stillendiriliyor
      Web sitelerinin belirlenmiş viewport’un dışına çizmesine izin verilirse, alert(), confirm(), [title] gibi son derece sınırlı durumlar dışında tarayıcı ya da işletim sistemi diyaloglarını inandırıcı şekilde taklit etmek çok daha kolay hale gelir
      Örneğin bir sayfa, parola yöneticisi eklentisinin kilit açma widget’ını taklit edebilir
      Bu büyük bir güvenlik riski olur ve sınırlı faydasına kıyasla buna değmez
      Bu teorik bir endişe değil
      Dolandırıcılar yıllardır tarayıcı chrome’unu bile içeren sahte açılır pencereler gibi son derece ikna edici sahte arayüzler yapıyor ve bunları sürüklenebilir bile hale getiriyordu
      Viewport sınırlarının dışına çizilememesi, onların aşamadığı neredeyse tek kısıttı
    • Böyle bir özelliğin pratikte ne kadar yararlı olacağından emin değilim
      Küçük cihazlarda web tarayıcısı neredeyse her zaman tam ekranı kaplıyor; büyük monitörlerde bile genelde en az bir köşeye değmiş oluyor
    • Anlamsal olarak da tespit edilmesi daha kolay olur gibi
      Erişilebilirlik ve taranabilirlik açısından da, biri “popup engelleyici” eklenti yapmak isterse onun için de faydalı olur
    • Firefox, teknik olarak sayfa içeriğinin bir kısmını ayrı bir işletim sistemi düzeyinde pencere olarak “dışarı fırlatmayı” destekliyor
      Bu özellik, yalnızca tarayıcının ana sürecinde render edilen ayrıcalıklı [X]HTML içinde kullanılabilen XUL öğeleri üzerinden sunuluyor
      Sanırım hiçbir tarayıcı geliştiricisi, normal web sayfalarına çerçevesiz işletim sistemi pencereleri oluşturma yetkisi vermek istemez
    • Web uygulamalarının hayal edildiği gibi yerel pencere sistemi entegrasyonunu yakında elde etmesi pek olası görünmüyor
      Bazı standart kontrollerin böyle davranması, bunların işletim sistemi yereli olarak uygulanmasından kaynaklanan işletim sistemine özgü uygulama yan etkileri; mutlaka böyle uygulanmaları gerektiği anlamına gelmiyor

  • Tarayıcılarda yerleşik açılır pencere engelleyicileri var; böyle bir API yapmaları biraz komik geliyor
    Arada fark olduğunu biliyorum ama yine de öyle
    90'ların sonu ve 2000'lerin başındaki popup/popunder savaşlarını hatırlayacak yaştayım
    O savaşı kazanmış gibi görünüyoruz ama dikkatimizi kuşatan savaş daha epey sürecek

    • Burada farklı şeyler karşılaştırılıyor gibi
      Popover, gerektiğinde bağlamsal bilgi gösteren yüzen bir öğe
      Bahsedilen şey ise tamamen farklı
    • Ne demek istediğini anlıyorum ama aslında karşılaştırılabilir şeyler değiller gibi görünüyor
      Popup'lar işletim sistemine çöp pencereler saçarak en kötü durumda bilgisayarı kullanmayı bile engeller
      Popover diyaloğu ise sekmeyi kapatınca biter
      Bu tarz popover'lar bilgi göstermek için oldukça kullanışlı, zaten uzun zamandır da kullanılıyor
      Rahatsız edici şekilde kullanılabilirler ama modal'larda olduğu gibi gerçek kullanım senaryoları da çok
    • Bu tepkiyi çok görüyorum ama pek mantıklı gelmiyor
      Zaten bugün de sıradan div vb. ile popover yapılabiliyor
      Örnek: https://getbootstrap.com/docs/5.3/components/popovers/
      Değişen şey, sihirli ek kütüphaneler olmadan popover yapılabilmesi
      Açık bir “popover” öğesini engelleseniz bile insanlar yine özel kütüphaneler kullanmaya devam eder
    • Bu bir popup değil
      İnsanların popup'lardan nefret etmesinin nedeni, müdahaleci olmaları ve ayrı bir pencere açmaları
      Bu API, div modal'larının yerini alarak geliştiricinin zamanını ve kodunu azaltıyor
    • Popup'ların asıl olayı, uygulama içeriğiyle işletim sistemi arasındaki sınırı bozmasıydı; açılır pencere engelleyicileri de bunu önlemeye çalışır
      Bu API o sınırı bozmuyor
      O sınır bozulduğunda sistemin kullanılabilirliği ve güvenliği düşer; bu yüzden istenen yön bu değil

  • “Popover API ile yapılan popover her zaman non-modal'dır. Modal bir popover istiyorsanız doğru öğe <dialog>'dur” deniyor ama nedenini anlamıyorum
    Bu, popover'ın gayet meşru bir kullanım senaryosu
    Özellikle açıldığında arka plan bulanıklaştırılıyorsa daha da öyle; bulanıklaşmış düğmeler kullanıcının yanlışlıkla tıklamasına yol açabiliyorsa bu özelliğin neden sunulduğu soru işareti
    Bakınca ikisinin birleştirilebildiğini gördüm
    “Popover kontrolü ile diyalog semantiğini birleştirmek istiyorsanız <dialog> öğesini popover yapabilirsiniz” gibi bir ifade var
    O zaman burada modal gibi bir öznitelik daha anlamlı olmaz mıydı diye düşünüyorum
    Çünkü kullanım senaryosunu açıkça kabul ediyor

    • Muhtemelen sebeplerden biri, <dialog> öğesinin çok daha önce var olmasıdır

  • Çok iyi
    Doğru anladıysam yeni bir özellik getirmekten çok, modal div, maske div, kapsayıcı div ve zahmetli konumlandırma CSS'inin gerektiği yerleri basitleştiriyor
    Stillemeyi kolaylaştıran sözde sınıflar da ekleniyor, hoşuma gitti

    • Ayrıca temel işlevleri JavaScript olmadan kullanabilmeyi sağlıyor
      Gizli checkbox'lara zorla başvurmak gerekmiyor
      Stil ve animasyon içeren popover'larda JS'siz desteğin ne kadar ileri gideceğinden emin değilim ama odağın düzgün yönetildiği JS'siz destek güzel
      Erişilebilirlik desteğinin de yerleşik olduğunu söylemek isterdim ama mevcut spesifikasyonda bunu bulamadım
      Eğer ekran okuyucu gibi erişilebilirlik araçlarına öğeyi duyurmayı da hallediyorsa bu büyük yardım olur
      Çünkü elle yaparken bunu atlamak oldukça kolay
    • Bu API, JavaScript olmadan da DOM içinde popover öğesinin görünürlük durumunu kontrol etmeyi mümkün kılıyor
      Kesinlikle faydalı

  • Demo: https://mdn.github.io/dom-examples/popover-api

    • İç içe popover demosunda Pizza'dan Ham'e çapraz geçiş yapılamıyor
      Çünkü Chrome ya da Firefox'ta alt menü kaybolmadan önce bir gecikme süresi uygulayan kimse yok
      Onlarca yıllık kullanıcı deneyimi araştırması yok sayılmış ve sonuç neredeyse beklendiği gibi
      https://mdn.github.io/dom-examples/popover-api/nested-popove...
    • Tarayıcı destek tablosu çalıştığını söylüyor ama iOS Safari'de çalışmıyor gibi görünüyor

  • Güzel görünüyor ama bu sayfada neden popover'ın ne olduğunu gösteren bir görsel hiç yok, anlamıyorum

  • Harika
    Popper kullanılarak Stimulus ile yapılmış özel uygulama burada
    https://github.com/tramlinehq/tramline/blob/main/app/javascr...
    Diyalog için olan uygulama da burada
    https://github.com/tramlinehq/tramline/blob/main/app/javascr...