Popover API, Baseline'a geliyor

Una Kravets

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.

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>

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>

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:

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:

• Anlamsal bilgi ve pop-over özelliği: Ne zaman kullanılmalı? Hazırlayan: Hidde de Vries
• Pop-over erişilebilirliği hakkında: Hidde de Vries tarafından tarayıcının yaptığı ve yapmadığı işlemler
• Pop-up'ta MDN dokümanları