Değişiklik gerçekleşmek üzere! En çok heyecan duyduğum özelliklerden biri, tüm modern tarayıcılarda kullanıma sunuldu ve resmi olarak Baseline 2024'te yer aldı. Bu özellik Popover API'dir. Popover, araç ipuçları, menüler, öğretim arayüzleri ve çok daha fazlasını içeren katmanlı arayüzler oluşturmak için çok sayıda temel öğe ve geliştiricilere yönelik olanaklar sunuyor.
Popover özellikleriyle ilgili öne çıkan özelliklerden bazıları şunlardır:
- Üst katmana yükseltme. Pop-up'lar sayfanın geri kalanının üstündeki en üst katmanda görüneceği için
z-index
ile oynamanı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 veya çift geçiş yaptığınızda, pop-up pencere kapatılır ve odak noktası geri gelir. - Erişilebilir bileşen bağlamaları. Popover öğesini anlamsal olarak popover tetikleyicisine bağlama.
Pop-up'lar oluşturma
Pop-up'lar oluşturmak oldukça kolaydır. Varsayılan değerleri kullanmak için, pop-up'ı tetikleyecek bir button
ve tetiklenecek bir öğe yeterlidir.
- Önce pop-up öğesi olacak öğede bir
popover
özelliği ayarlayın. - Ardından, pop-up öğesine benzersiz bir
id
ekleyin. - Son olarak, düğmeyi pop-up'a bağlamak için düğmenin
popovertarget
değerini popover öğesininid
değerine ayarlayın.
Bu, aşağıdaki kodda gösterilir:
<button popovertarget="my-popover">Open Popover</button>
<div id="my-popover" popover>
<p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>
Pop-up üzerinde daha ayrıntılı denetime sahip olmak için pop-up pencere türlerini açıkça ayarlayabilirsiniz. Örneğin, değer içermeyen bir sade popover
özelliği kullanmak popover="auto"
ile aynıdır. auto
değeri, ışıktan kapatma davranışını etkinleştirir ve diğer pop-up'ları otomatik olarak kapatır. popover="manual"
kullanın ve bir kapat düğmesi eklemeniz gerekir. Manuel pop-up'lar diğer pop-up'ları kapatmaz veya kullanıcıların kullanıcı arayüzünde başka bir yeri tıklayarak pop-up'ı kapatmasına olanak tanır. Aşağıdakileri kullanarak manuel olarak pop-up pencere oluşturabilirsiniz:
<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>
<div id="my-popover" popover=manual>
<p>I am a popover with more information. Hit the close button or toggle to close me.<p>
<button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Close</span>
</button>
</div>
Popover ve kalıcı iletişim kutusu karşılaştırması
İletişim kutusu varken pop-up'a ihtiyaç duyup duymadığınızı merak ediyor olabilirsiniz. Bu durumun yanıtı: İhtiyacınız olmayabilir.
Popover özelliğinin tek başına anlam ifade etmediğini unutmayın. Artık pop-up modunu kullanarak kalıcı diyalog benzeri deneyimler oluşturabilirsiniz, ancak ikisi arasında birkaç temel fark vardır:
Kalıcı <dialog>
öğesi
dialog.showModal()
ile açıldı.dialog.close()
ile kapalı.- Sayfanın geri kalanını etkisiz hale getirir.
- Işık kapatma davranışını desteklemez.
- Açık durumun stilini
[open]
özelliğiyle belirleyebilirsiniz. - Sayfanın geri kalanıyla etkileşimi engelleyen etkileşimli bir bileşeni semantik olarak temsil eder.
[popover]
özelliği
- Bildirim temelli bir çağırıcıyla (
popovertarget
) açılabilir. popovertarget
(otomatik pop-up) veyapopovertargetaction=hide
(manuel pop-up) ile kapatıldı.- Sayfanın geri kalanı devre dışı bırakılmaz.
- Işıktan vazgeçme davranışını destekler.
- Açık durumun
:popover-open
sözde sınıfıyla stilini belirleyebilirsiniz. - Doğal anlam yok.
Sonuç ve daha fazla okuma
popover
, platforma birçok heyecan verici özellik sunuyor. Özelliğin erişilebilirliği ve özellik grubuyla ilgili belgeler de dahil olmak üzere bu API hakkında daha fazla bilgi edinmek için aşağıdakileri okumanız önerilir: