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