Popover API'siyle tanışın

Una Kravets

Pop-up'lar web'de her yerdedir. Bu bilgileri menülerde, açma/kapatma ipuçlarında ve 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. Odak, açık ve kapalı durumları, bileşenlere erişilebilir kancaları, deneyime girmek ve deneyimden çıkmak için klavye bağlamalarını yönetmek üzere komut dosyası eklemeniz gerekir. Bunların tümü, pop-up'ınızın yararlı, benzersiz ve temel işlevini oluşturmaya başlamadan önce bile gereklidir.

Bu sorunu çözmek için Chromium 114'teki popover API'den başlayarak tarayıcılara pop-up oluşturmaya yönelik yeni bir açıklayıcı HTML API grubu eklenecek.

Popover özelliği

Tarayıcı desteği

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

Kaynak

Tüm karmaşıklığı kendiniz yönetmek yerine popover özelliği ve sonraki özellik grubuyla tarayıcıya yönetmesine izin verebilirsiniz. HTML pop-up'ları şunları destekler:

  • Üst katmana promosyon. Pop-up'lar sayfanın geri kalanının üzerinde ayrı bir katmanda görüneceğinden Z-endeksi ile uğraşmanız gerekmez.
  • 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 açıldığında bir sonraki sekme, pop-up'ın içinde durur.
  • 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 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

popover özelliğini tek başına kullanmak 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. Hafif 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 öğe türlerini kapatmaya zorlamaz ve ışık kapatma aracılığıyla kapatılmaz. Bunları bir zamanlayıcı veya açık bir kapatma işlemiyle kapatmanız gerekir. popover=manual için uygun pop-up türleri, görünüp kaybolan ancak sayfanın geri kalanını etkilemeyen öğelerdir (ör. pop-up bildirim).

.

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, açık olan diğer pop-up'lar da kapanmaz.

Farklılıkları incelemek için:

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

  • Açıldığında diğer pop-up'ları zorla kapatı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'te bazı güzel stil özellikleri de vardır. Bunlardan biri ::backdrop öğesine stil uygulama özelliğidir.

auto pop-up'larında bu, doğrudan üst katmanın (pop-up'ın bulunduğu katman) altında yer alan ve sayfanın geri kalanının üzerinde bulunan 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 sağlamadığını unutmayın. Artık popover="auto"'ü kullanarak modal iletişim kutusu benzeri deneyimler oluşturabilirsiniz. Ancak bu iki yöntem arasında birkaç temel fark 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, ışığı kapatmayı destekler. Modal dialog ise bu özelliği desteklemez. Kalıcı iletişim kutuları, sayfanın geri kalanını etkisiz hale getirir. popover bunu yapmaz.

kalemine bakın.

Yukarıdaki demo, pop-up davranışına sahip semantik bir iletişim kutusudur. Bu, sayfanın geri kalanının hareketsiz olmadığı ve iletişim kutusu pop-up'ının hafif kapatma davranışı gösterdiği 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. Ancak bu özellikler, bu sürümden kısa bir süre sonra Chromium'un bir sonraki sürümünde kullanıma sunulacaktı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 oluşturabilirsiniz. Önceki örneği ele alalım. Görüntünün içeri ve dışarı doğru hareketi çok daha akıcı görünür ve daha sorunsuz bir kullanıcı deneyimi sunar:

kalemine göz atın.

Sabitleme konumlandırması

Pop-up'lar, bir uyarıyı, modal pencereyi veya bildirimi görüntü alanına göre konumlandırmak istediğinizde mükemmeldir. Ancak pop-up'lar, menüler, ipuçları ve diğer öğelere göre konumlandırılması gereken diğer öğeler için de kullanışlıdır. Bu noktada CSS sabitleme 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 açma/kapatma 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;
}
kalemine bakın.

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ın oluşturulmasını 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