Popover API'siyle tanışın

Una Kravets

Pop-up reklamlar web'in her yerinde karşınızda. 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. 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 yapılmalıdı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

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 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şık 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 basmak, pop-up'ı kapatır ve odağı geri getirir.
• Erişilebilir bileşen bağlamaları. Bir pop-up öğesini pop-up tetikleyiciye anlamsal olarak 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 öğede bir popover özelliği.
• Pop-up'ı içeren öğede 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 bir temel pop-up'a sahipsiniz.

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 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 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" 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>

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 zorla kapatılır. 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 öğe türlerini kapatmaya zorlamaz ve hafif kapatma aracılığıyla kapatılmaz. 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, açık olan diğer pop-up'lar da kapanmaz.

Farklılıkları incelemek için:

popover=auto olan pop-up'lar:

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

popover=manual olan pop-up'lar:

• Diğer öğe türlerini zorla kapatmayın.
• Işıkla kapatmayın. Açma/kapatma veya kapatma işlemi 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, 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 sağlamadığını 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, ışığı kapatmayı destekler. dialog kalıcı öğesi bunu yapmaz. Kalıcı iletişim kutuları, 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'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 oluşturabilirsiniz. Ö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 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>

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 anchor() simgesini kullanarak pop-up'ın stilini belirleyebilirsiniz. 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;
}

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'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 kullanacağınızı görmek için sabırsızlanıyoruz.

Ek Kaynaklar

• İletişim kutuları ve pop-up'lar birbirine benziyor. Aralarındaki fark nedir?
• Anlamsal bilgi ve popover özelliği
• Pop-up'larla ilgili MDN dokümanları
• OpenUI popover açıklayıcısı