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