Popover API, Baseline'a geliyor

Una Kravets

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.

Tarayıcı Desteği

  • 114
  • 114
  • 125
  • 17

Kaynak

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 öğesinin id 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>
Popover özelliğini kullanmaya ilişkin temel bir örnek.

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>
Manuel pop-up reklam örneği.

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) veya popovertargetaction=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: