Popover API, Baseline'a geliyor

Değişiklik gerçekleşmek üzere! Beni en çok heyecanlandıran özelliklerden biri de kısa süre önce tüm modern tarayıcılarda yayınlandı ve Baseline 2024'ün parçası oldu. Bu özellik de Popover API'dir. Popover, araç ipuçları, menüler, eğitim kullanıcı arayüzleri ve daha pek çok öğe gibi katmanlı arayüzler oluşturmak için pek çok faydalı başlangıç öğesi ve geliştirici olanağı sunar.

Tarayıcı Desteği

  • Chrome: 114..
  • Kenar: 114..
  • Firefox: 125..
  • Safari: 17..

Kaynak

Pop-over özelliklerinden öne çıkan bazı özellikler:

  • En üst katmana tanıtım. Pop-up'lar sayfanın geri kalanının üzerindeki en üst katmanda görüneceğinden z-index ile oynamak zorunda kalmayacaksınız.
  • 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 basmak veya iki kez açıp kapatmak, pop-up'ı kapatır ve odağı geri getirir.
  • Erişilebilir bileşen bağlamaları. Bir pop-up öğesinin, pop-up tetikleyicisine anlamsal olarak bağlanması.

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.

  • İlk olarak, pop-up olacak öğede bir popover özelliği ayarlayın.
  • Ardından, popover öğesine benzersiz bir id ekleyin.
  • Son olarak, düğmeyi pop-up'a bağlamak için düğmenin popovertarget özelliğini 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>
ziyaret edin.
Popover özelliğini kullanmaya dair temel bir örnek.

Pop-up üzerinde daha ayrıntılı denetime sahip olmak için pop-up türlerini açık bir şekilde ayarlayabilirsiniz. Örneğin, değer içermeyen salt popover özelliği popover="auto" ile aynıdır. auto değeri, ışık kapatma davranışını etkinleştirir ve diğer pop-up'ları otomatik olarak kapatır. popover="manual" kullandığınızda 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ünden uzaklaşarak pop-up'ı kapatmasına izin vermez. Aşağıdakileri kullanarak manuel bir pop-up oluşturursunuz:

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

Pop-up ve kalıcı iletişim kutusu karşılaştırması

Bir iletişim kutusu varken pop-up'a ihtiyacınız olup olmadığını merak ediyor olabilirsiniz. Yanıtı şudur: Gerekli olmayabilir.

Pop-over özelliğinin tek başına anlam bilgisi sağlamadığını unutmayın. Artık pop-up'ı kullanarak iletişim kutusu benzeri kalıcı deneyimler oluşturabilirsiniz. Ancak ikisi arasında bazı önemli farklar vardır:

Kalıcı <dialog> öğesi

  • dialog.showModal() ile açıldı.
  • dialog.close() ile kapatıldı.
  • Sayfanın geri kalanını etkisiz hale getirir.
  • Işık kapatma davranışını desteklemez.
  • Açık durumu, [open] özelliğiyle biçimlendirebilirsiniz.
  • Sayfanın geri kalanıyla etkileşimi engelleyen etkileşimli bir bileşeni anlamsal olarak gösterir.

[popover] özelliği

  • Bildirim temelli bir çağrıcı ile açılabilir (popovertarget).
  • popovertarget (otomatik pop-up) veya popovertargetaction=hide (manuel pop-up) ile kapatıldı.
  • Sayfanın geri kalanını etkisiz hale getirmez.
  • Işık kapatma davranışını destekler.
  • Açık durumu, :popover-open sözde sınıfıyla biçimlendirebilirsiniz.
  • Doğal bir anlam yok.

Sonuç ve daha fazla okuma

popover, YouTube'da heyecan verici birçok özellik sunuyor. Özelliğin erişilebilirliği hakkında daha fazla bilgi ve özellik grubuyla ilgili belgeler de dahil olmak üzere bu API hakkında daha fazla bilgi edinmek için aşağıdaki önerilen kaynakları inceleyebilirsiniz: