Popover API'siyle tanışın

Una Kravets

Pop-up'lar web'de her yerdedir. Bu bilgileri menülerde, açma/kapatma ipuçlarının yanı sıra hesap ayarları, açıklama widget'ları ve ürün kartı önizlemeleri olarak gösterilen iletişim kutularında görebilirsiniz. Bu bileşenlerin yaygın olmasına rağmen tarayıcılarda oluşturmak hâlâ şaşırtıcı derecede zahmetli. Odağı yönetmek için komut dosyası, açık ve kapalı durumları, bileşenlere erişilebilir kancalar, deneyime girmek ve deneyimden çıkmak için klavye bağlamaları eklemeniz gerekir. Üstelik tüm bunlar, pop-over'ınızın yararlı, benzersiz ve temel işlevini oluşturmaya başlamadan önce tamamlanır.

Bu sorunu çözmek için, Chromium 114'teki popover API'den başlayarak tarayıcılara, pop-up'lar oluşturmaya yönelik yeni bildirim temelli HTML API'leri kullanıma sunulacaktır.

Popover özelliği

Tarayıcı desteği

  • Chrome: 114.
  • Kenar: 114.
  • Firefox: 125.
  • Safari: 17.

Kaynak

Tüm karmaşıklığı kendiniz yönetmek yerine tarayıcının bunu popover özelliğiyle ve daha sonraki özelliklerle yönetmesine izin verebilirsiniz. HTML popover'ları desteği:

  • En üst katmana tanıtım. Pop-up'lar sayfanın geri kalanının üzerinde ayrı bir katmanda görüneceğinden z-endeksiyle uğraşmanıza gerek kalmaz.
  • Işığı kapatma işlevi Pop-up alanının dışındaki bir yeri tıkladığınızda pop-up kapatılır ve odak geri döner.
  • Varsayılan odak yönetimi. Pop-up'ın açılması, bir sonraki sekmenin pop-up'ın içinde durmasına neden olur.
  • Erişilebilir klavye bağlamaları. esc tuşuna basıldığında pop-up kapatılır ve odak geri döner.
  • Erişilebilir bileşen bağlamaları. Bir pop-up öğesini pop-up tetikleyiciye anlamsal olarak bağlama.

Artık JavaScript kullanmadan bu özelliklerin tümünü içeren pop-up'lar oluşturabilirsiniz. Temel bir pop-up için üç şey gerekir:

  • Pop-up'ı içeren öğede bir popover özelliği.
  • Pop-up'ı içeren öğede bir id.
  • Pop-up'ı açan öğede, pop-up'ın id değerini içeren bir popovertarget.
<button popovertarget="my-popover"> Open Popover </button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Artık tamamen işlevsel bir temel pop-up'a sahipsiniz.

Bu pop-up, ek bilgi vermek veya açıklama widget'ı olarak kullanılabilir.

Varsayılanlar ve geçersiz kılmalar

Varsayılan olarak, önceki kod snippet'inde olduğu gibi, popovertarget ile bir pop-up oluşturmak, pop-up'ı açan düğmenin veya öğenin pop-up'ı açıp kapatacağı anlamına gelir. Ancak popovertargetaction kullanarak da belirgin pop-up'lar oluşturabilirsiniz. Bu, varsayılan açma/kapatma işlemini geçersiz kılar. popovertargetaction seçenekleri şunlardır:

popovertargetaction="show": Pop-up'ı gösterir. popovertargetaction="hide": Pop-up'ı gizler.

popovertargetaction="hide" kullanarak aşağıdaki snippet'te gösterildiği gibi bir pop-up içinde "kapat" düğmesi oluşturabilirsiniz:

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>
kalemine bakın.

Otomatik ve manuel pop-up'lar arasında

popover özelliğinin tek başına kullanılması aslında popover="auto" için bir kısayoldur. Varsayılan popover açıldığında, üst öğe pop-up'ları hariç diğer otomatik pop-up'lar zorla kapatılır. Işık kapatma veya kapat düğmesiyle kapatılabilir.

Öte yandan, popover=manual ayarı başka bir pop-up türü oluşturur: manuel pop-up. Bunlar, diğer türdeki öğeleri kapatmaya zorlamaz ve ışık kapatma yöntemiyle kapanmaz. Bunları bir zamanlayıcıyla veya açık bir kapatma işlemiyle kapatmalısınız. popover=manual için uygun pop-up türleri, görüntülenen ve kaybolan ancak sayfanın geri kalanını etkilememesi gereken öğelerdir (ör. durum mesajı bildirimi).

Yukarıdaki demoyu incelerseniz pop-up alanının dışında tıklandığında pop-up'ın ışıklı olarak kapatılmadığını görebilirsiniz. Ayrıca, başka pop-up'lar açık olduğunda da kapanmazlar.

Farklılıkları incelemek için:

popover=auto içeren pop-up'lar:

  • Açıldığında diğer pop-up'ları kapanmaya zorlayın.
  • Işığı kapatabilir.

popover=manual içeren pop-up'lar:

  • Diğer öğe türlerini zorla kapatmayın.
  • Işığı kapatmayın. Açma/kapatma düğmesini veya kapatma işlemini kullanarak bunları kapatın.

Pop-up'lara stil uygulama

Şu ana kadar HTML'deki temel pop-up'lar hakkında bilgi edindiniz. Ancak popover ile gelen bazı güzel stil özellikleri de var. Bunlardan biri ::backdrop'ye stil uygulama özelliğidir.

auto pop-up'larında bu, sayfanın geri kalanının üstünde bulunan üst katmanın (popup'ın bulunduğu yer) hemen altındaki bir katmandır. Aşağıdaki örnekte ::backdrop için yarı şeffaf bir renk kullanılmıştır:

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}
belgesine bakın.

popover ile dialog arasındaki fark

popover özelliğinin tek başına anlam bilgisi sağlamadığını lütfen unutmayın. Artık popover="auto" kullanarak diyaloga benzer kalıcı deneyimler oluşturabilirsiniz. Ancak ikisi arasında bazı önemli farklar vardır:

dialog.showModal ile açılan (modal iletişim kutusu) bir dialog öğesi, modalın kapatılması için kullanıcının açık bir şekilde etkileşim kurmasını gerektiren bir deneyimdir. popover, ışıklı kapanmayı destekler. dialog kalıcı öğesi bunu yapmaz. Kalıcı iletişim kutusu sayfanın geri kalanını etkisiz hale getirir. popover bunu yapmaz.

Yukarıdaki demo, pop-up davranışına sahip semantik bir iletişim kutusudur. Bu, sayfanın geri kalanının durağan olmadığı ve iletişim kutusu pop-up'ının ışık kapatma davranışı aldığı anlamına gelir. Aşağıdaki kodu kullanarak bu iletişim kutusunu pop-up davranışıyla oluşturabilirsiniz:

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

Çok yakında

Etkileşimli giriş ve çıkış

display: none'e ve display: none'den animasyon, üst katmana ve üst katmandan animasyon gibi ayrı mülkleri animasyonlu hale getirme özelliği henüz tarayıcılarda kullanılamamaktadır. Bununla birlikte, bu sürümün yakından takip edilmesiyle birlikte Chromium'un gelecekte yayınlanacak bir sürümü için de yapılması planlanmaktadır.

Ayrı mülkleri animasyonlu hale getirebilir ve :popover-open ile @starting-style'ü kullanarak pop-up'ları açarken ve kapatırken sorunsuz geçişler sağlamak için değişiklik öncesi ve sonrası stiller ayarlayabilirsiniz. Önceki örneği ele alalım. Animasyon eklemek ve çıkarmak çok daha sorunsuz görünür ve daha akıcı bir kullanıcı deneyimini destekler:

Çapa konumlandırma

Bir uyarı, kalıcı iletişim kutusu veya bildirimi görüntü alanına göre konumlandırmak istediğinizde pop-up'lar mükemmeldir. Ancak pop-up'lar menüler, ipuçları ve diğer öğelere göre yerleştirilmesi gereken diğer öğeler için de kullanışlıdır. CSS sabitleme burada devreye girer.

Aşağıdaki radyal menü demosunda, pop-up'ın (#menu-items) her zaman açma/kapatma tetikleyicisine (#menu-toggle düğmesi) sabitlenmesini sağlamak için pop-up API'si CSS ankraj konumlandırması ile birlikte kullanılır.

Yer işaretlerini ayarlama işlemi, pop-up'ları ayarlamaya benzer:

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

Bir id (bu örnekte #menu-toggle) ekleyerek bir ankraj oluşturur ve ardından iki öğeyi bağlamak için anchor="menu-toggle" kullanırsınız. Artık pop-up'a stil vermek için anchor() öğesini kullanabilirsiniz. Sabitleme düğmesinin taban çizgisine sabitlenmiş, ortalanan bir pop-up menüsü aşağıdaki gibi biçimlendirilebilir:

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

Artık JavaScript kullanmadan, açma/kapatma düğmesine sabitlenmiş ve pop-up'ın tüm yerleşik özelliklerine sahip, tamamen işlevsel bir pop-up menünüz var.

Sonuç

Popover API, web uygulamalarını oluşturmayı daha kolay ve varsayılan olarak daha erişilebilir hale getirecek bir dizi yeni özelliğin ilk adımı. Pop-up'ları nasıl kullanacağınızı görmek için sabırsızlanıyoruz.

Ek Kaynaklar