Popover API'siyle tanışın

Una Kravets

Web'de pop-up'lar her yerde. Bunları hesap ayarları, açıklama widget'ları ve ürün kartı önizlemeleri olarak gösterilebilecek menülerde, açma/kapatma ipuçlarında ve iletişim kutularında görebilirsiniz. Bu bileşenlerin yaygınlığı ne kadar yaygın olsa da, bu bileşenleri tarayıcılarda oluşturmak yine de şaşırtıcı derecede zahmetli oluyor. Odağı yönetmek, durumu açıp kapatmak, bileşenlerde erişilebilir kancalar, deneyime girmek ve deneyimden çıkmak için klavye bağlamaları eklemek ve bunların tümünü pop-up'ınızın yararlı, benzersiz temel işlevini oluşturmaya başlamadan önce bile yapmak için komut dosyası eklemeniz gerekir.

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 sunulacak.

Popover özelliği

Tarayıcı Desteği

  • 114
  • 114
  • 17

Kaynak

Tüm karmaşıklığı kendiniz yönetmek yerine tarayıcının bu işlemi popover özelliği ve sonraki özellik grubuyla halletmesine izin verebilirsiniz. HTML pop-up'ları desteği:

  • Üst katmana yükseltme. Pop-up'lar sayfanın geri kalanının üzerinde ayrı bir katmanda görünür, böylece z-endeksiyle uğraşmanız gerekmez.
  • Işık kapatma işlevi. Pop-up alanının dışını tıkladığınızda pop-up penceresi kapatılır ve odak tekrar gösterilir.
  • Varsayılan odak yönetimi. Pop-up'ı açtığınızda bir sonraki sekme pop-up içinde durur.
  • Erişilebilir klavye bağlamaları. esc tuşuna bastığınızda pop-up pencere kapatılır ve odak tekrar gösterilir.
  • Erişilebilir bileşen bağlamaları. Popover öğesini anlamsal olarak popover tetikleyicisine bağlama.

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 öğedeki popover özelliği.
  • Pop-up'ı içeren öğedeki bir 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 pop-up'a sahipsiniz.

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

Varsayılanlar ve geçersiz kılmalar

Önceki kod snippet'inde olduğu gibi, varsayılan olarak popovertarget ile bir pop-up'ın ayarlanması, pop-up'ı açan düğme veya öğenin bunu açıp kapatacağı anlamına gelir. Ancak popovertargetaction kullanarak müstehcen pop-up'lar da oluşturabilirsiniz. Bu ayar, varsayılan toggle işlemini geçersiz kılar. popovertargetaction seçenekleri şunları içerir:

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

popovertargetaction="hide" kullanarak, aşağıdaki snippet'te olduğu gibi 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 veya 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ı kapatır. Işık kapatma veya kapatma düğmesi ile kapatılabilir.

Öte yandan, popover=manual ayarlandığında başka bir pop-up türü oluşturulur: manuel pop-up. Bunlar, diğer öğe türlerini kapatmaya zorlamaz ve ışık kapatma özelliğiyle kapanmaz. Bunları bir zamanlayıcı veya açık bir kapatma işlemiyle kapatmalısınız. popover=manual için uygun pop-up'lar türleri, görünüp kaybolan ancak durum mesajı bildirimi gibi sayfanın geri kalanını etkilememesi gereken öğelerdir.

Yukarıdaki demoyu incelerseniz, popover alanının dışına tıkladığınızda pop-up'ın ışığı kapatılmadığını görebilirsiniz. Ayrıca, açık durumda olan başka pop-up'lar olsaydı bunlar da kapanmayacaktı.

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şıkla kapanabilir.

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

  • Başka öğe türlerini zorla kapatmayın.
  • Işıkla kapatmayın. Açma/kapatma düğmesini kullanarak veya kapatma işlemini kullanarak bu pencereleri kapatabilirsiniz.

Pop-up'ların stilini belirleme

Şu ana kadar HTML'deki temel pop-up'lar hakkında bilgi edindiniz. Ancak popover ile birlikte gelen bazı güzel stil özellikleri de vardır. Bunlardan biri, ::backdrop stilini belirleyebilme olanağıdır.

auto pop-up'larında bu, sayfanın geri kalanının üstünde yer alan en üst katmanın (pop-up'ın bulunduğu yer) hemen altındaki bir katmandır. Aşağıdaki örnekte, ::backdrop öğesine 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 ifade etmediğini unutmayın. Artık popover="auto" kullanarak kalıcı diyalog benzeri deneyimler oluşturabilirsiniz ancak ikisi arasında birkaç temel fark vardır:

dialog.showModal ile açılan dialog öğesi (kalıcı iletişim kutusu), kalıcı pencereyi kapatmak için açık kullanıcı etkileşimi gerektiren bir deneyimdir. popover, ışıkla kapatmayı destekler. dialog kalıcı iletişim kutusu 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 hareketsiz olmadığı ve iletişim kutusu pop-up'ının ışık kapatma davranışı alacağı anlamına gelir. Aşağıdaki kodu kullanarak bu iletişim kutusunu pop-up davranışı ile 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 konumuna ve üst katmana doğru animasyon yapma ve üst katmana doğru hareket etme de dahil olmak üzere ayrı özellikleri canlandırma özelliği henüz tarayıcılarda kullanılamamaktadır. Ancak Chromium'un bu sürümün hemen ardından kullanıma sunulması planlanıyor.

Belirli özellikleri canlandırabilme ve :popover-open ile @starting-style özelliklerini kullanarak pop-up'ları açıp kapatırken sorunsuz geçiş sağlamak için değişiklik öncesi ve değişiklik sonrası stilleri oluşturabilirsiniz. Önceki örneği ele alalım. Animasyonlarla içe ve dışarıya geçiş çok daha düzgün görünür ve daha akıcı bir kullanıcı deneyimini destekler:

Çapa konumlandırma

Pop-up'lar, bir uyarı, kalıcı iletişim kutusu veya bildirimi görünüme göre konumlandırmak istediğinizde kullanışlıdır. Ancak pop-up'lar menüler, araç ipuçları ve diğer öğelere göre konumlandırılması gereken diğer öğeler için de kullanışlıdır. CSS sabitleme burada devreye girer.

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

Sabit reklamlar oluşturmak, 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 bağlayıcıyı id (bu örnekte #menu-toggle) vererek ayarlarsınız ve ardından iki öğeyi bağlamak için anchor="menu-toggle" kullanırsınız. Artık anchor() kullanarak pop-up'ın stilini belirleyebilirsiniz. Sabit açma/kapatma düğmesinin temel çizgisine sabitlenmiş bir pop-up menü aşağıdaki gibi biçimlendirilebilir:

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

Artık, açma/kapatma düğmesine sabitlenmiş ve pop-up'ın yerleşik özelliklerinin tümünü içeren, JavaScript gerektirmeyen tam işlevli bir pop-up menüye sahipsiniz.

Sonuç

Popover API'sı, web uygulamalarının daha kolay yönetilmesini ve varsayılan olarak daha erişilebilir olmasını sağ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