Popover API'siyle tanışın

Una Kravets

Pop-over'lar web'in her yerinde karşınızda. Bunları hesap ayarları, açıklama widget'ları ve ürün kartı önizlemeleri şeklinde gösterilen menülerde, açma/kapatma ipuçlarında ve iletişim kutularında görebilirsiniz. Bu bileşenlerin ne kadar yaygın olarak kullanıldığına rağmen, bunları tarayıcılarda oluşturmak şaşırtıcı derecede külfetli. 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 tamamlanmış olur.

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

  • 114
  • 114
  • 125
  • 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 yoktur.
  • Işık kapatma işlevi. Pop-up'ın dışını tıkladığınızda pop-up kapatılacaktır ve tekrar odaklanılacaktır.
  • Varsayılan odak yönetimi. Pop-up'ın açılması, 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ıp tekrar odaklanılır.
  • Erişilebilir bileşen bağlamaları. Bir pop-up öğesinin, pop-up tetikleyicisine anlamsal olarak bağlanması.

Artık JavaScript kullanmadan tüm bu özelliklerle 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 id.
  • Pop-up'ı açan öğede pop-up'ın id değerine sahip 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 temel bir pop-up'ınız var.

Bu pop-up, ek bilgi aktarmak için veya bir 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 ayarlamak, pop-up'ı açan düğme veya öğenin bunu açıp kapatacağı anlamına gelir. Ancak, popovertargetaction kullanarak belirgin pop-up'lar da oluşturabilirsiniz. Bu, varsayılan toggle işlemini geçersiz kılar. popovertargetaction seçenekleri şunlardır:

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

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

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

Otomatik ve manuel pop-up'lar arasında

popover özelliğini tek başına kullanmak 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ı kapatmaya zorlar. Işık kapatma veya kapat düğmesiyle kapatılabilir.

Öte yandan, popover=manual politikasının ayarlanması 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'ın dışını tıkladığınızda pop-up'ın ışıkla kapatılmadığını görürsünüz. Ayrıca, başka pop-up'lar açık olduğunda da kapanmazlar.

Farklılıkları incelemek için:

popover=auto olan pop-up'lar:

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

popover=manual olan pop-up'lar:

  • Diğer öğe türlerini kapatmaya zorlamayın.
  • Işıkla kapatmayın. Açma/kapatma veya kapatma işlemi kullanarak bunları kapatın.

Pop-up'ların stilini belirleme

Ş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 stilini biçimlendirme becerisidir.

auto pop-up'larında bu, sayfanın geri kalanının üzerinde 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 verilmiştir:

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

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 (kalıcı iletişim kutusu) ile açılan dialog öğesi, kalıcı öğeyi kapatmak için açık kullanıcı etkileşimi 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 anlamsal 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 ile display: none arasında ve üst katmana yönelik animasyonlar da dahil olmak üzere, ayrı ayrı özelliklere animasyon ekleme ö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ık özellikleri canlandırma özelliği sayesinde ve :popover-open ile @starting-style özelliğini kullanarak, pop-up'ları açarken ve kapatırken yumuşak geçişler sağlamak için değişiklik öncesi ve değişiklik sonrası stillerini ayarlayabilirsiniz. Bir ö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 konumlandırılması gereken diğer öğeler için de kullanışlıdır. CSS sabitleme tam da bu noktada devreye girer.

Aşağıdaki dairesel menü demosu, pop-up'ın #menu-items her zaman açma/kapatma tetikleyicisine (#menu-toggle düğmesine) sabitlenmesini sağlamak için CSS sabit konumlandırması ile birlikte pop-up API'sini kullanır.

Bağlayıcı ayarlama, pop-up oluşturmaya 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>

id (bu örnekte #menu-toggle) vererek bir çapa ayarlarsınız ve ardından iki öğeyi bağlamak için anchor="menu-toggle" kullanırsınız. Artık pop-up'ın stilini belirlemek için anchor() özelliğini kullanabilirsiniz. Sabitleme açma/kapatma düğmesinin referans noktasına sabitlenmiş ortalanmış bir pop-up menünün stili aşağıdaki gibi ayarlanabilir:

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

Artık açma/kapatma düğmesine sabitlenmiş ve tüm yerleşik pop-up özelliklerine sahip, JavaScript gerekmeden tam işlevsel bir açılır menüye sahipsiniz!

Sonuç

Popover API'sı, web uygulamaları oluşturma işlemini daha kolay yönetmeyi ve varsayılan olarak daha erişilebilir hale getirmeyi amaçlayan bir dizi yeni özelliğin ilk adımıdır. Pop-up'ları nasıl kullandığınızı görmek için sabırsızlanıyorum.

Ek Kaynaklar