Popover API, Baseline'a geliyor

Una Kravets

Değişiklik gerçekleşmek üzere! En çok heyecanlandığım özelliklerden biri, tüm modern tarayıcılarda kullanıma sunuldu ve resmi olarak Baseline 2024'ün bir parçası oldu. Bu özellik Pop-up API'dir. Popover, ipucu, menü, eğitim amaçlı kullanıcı arayüzü gibi katmanlı arayüzler oluşturmak için çok sayıda harika temel öğe ve geliştirici olanağı sunar.

Pop-up pencere özelliklerinin öne çıkan bazı özellikleri şunlardır:

• En üst katmana promosyon. Pop-up'lar sayfanın geri kalanının üzerindeki üst katmanda görünür. Bu nedenle z-index ile uğraşmanız gerekmez.
• Işığı 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 veya düğmeyi iki kez açmak pop-up'ı kapatır ve odağı geri verir.
• Erişilebilir bileşen bağlamaları. Bir pop-up öğesini pop-up tetikleyiciye anlamsal olarak bağlama.

Pop-up oluşturma

Pop-up oluşturmak oldukça kolaydır. Varsayılan değerleri kullanmak için tek ihtiyacınız olan, pop-up'ı tetikleyecek bir button ve tetiklenecek bir öğedir.

• Öncelikle, pop-up 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 pop-up öğesinin id değerine ayarlayın.

Bu durum aşağıdaki kodda gösterilmektedir:

<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'lar üzerinde daha ayrıntılı kontrol sahibi olmak için pop-up türlerini açıkça ayarlayabilirsiniz. Örneğin, değeri olmayan bir popover özelliği kullanmak popover="auto" ile aynıdır. auto değeri, hafif 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 arayüzde başka bir yeri tıklayarak pop-up'ı kapatmasına izin vermez. Aşağıdakileri kullanarak manuel 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

İletişim kutusu varken pop-up'a ihtiyacınız olup olmadığını merak ediyor olabilirsiniz. Yanıt: gerekmeyebilir.

Popover özelliğinin tek başına anlamsal bilgi sağlamadığını unutmayın. Artık pop-up'ı kullanarak modal iletişim kutusu benzeri deneyimler oluşturabilirsiniz. Ancak bu iki yöntem arasında birkaç temel fark vardır: