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:

• Ü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 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:

Sonuç ve daha fazla okuma

popover, platforma birçok heyecan verici özellik getiriyor. Özelliğin erişilebilirliği ve özellik grubuyla ilgili dokümanlar da dahil olmak üzere bu API hakkında daha fazla bilgi edinmek için aşağıdakileri okumanızı öneririz:

• Semantik ve pop-up özelliği: Ne zaman neyi kullanmalı? Hidde de Vries tarafından
• Hidde de Vries tarafından yazılan "Pop-up erişilebilirliği: Tarayıcının yapabileceği ve yapamayacağı şeyler"
• Pop-up'lar hakkındaki MDN dokümanları