Popover API
Yerel popover özniteliğiyle araç ipuçları ve iletişim kutuları oluşturun
Popover API, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
Popover API'si Ne Yapar
Popover API'si, HTML'e açılır pencereler, iletişim kutuları, araç ipuçları ve menüler oluşturmak için yerleşik bir yol sunar; konumlandırma, odak yönetimi, dışarı tıklayınca kapatma veya Escape ile kapatma için elle JavaScript yazmanız gerekmez. Yerleşik davranış, kullanıcı beklentileriyle uyumludur.
popover Özniteliği
Herhangi bir öğeye popover ekleyerek onu bir açılır pencereye dönüştürebilirsiniz. Öğe varsayılan olarak gizlidir. popovertarget="popover-id" içeren bir tetikleyici düğme, tıklanıldığında onu gösterir. Tarayıcı açılma ve kapanma durumunu otomatik olarak yönetir.
<button popovertarget="info">Show details</button>
<div id="info" popover>
<p>Here is some popover content.</p>
</div>Açılır Pencere Modları
popover="auto" (varsayılan) — dışarı tıklanınca veya Escape'e basılınca kapanır; aynı anda yalnızca bir auto açılır penceresi açık olabilir. popover="manual" — otomatik olarak kapanmaz; JS veya başka bir tetikleyici aracılığıyla açıkça kapatılmalıdır.
Tetikleyici Düğmeler
popovertarget özniteliği, bir düğmeyi kimliği aracılığıyla bir açılır pencereye bağlar. Tarayıcı açıp kapatma davranışını yönetir: açmak için düğmeye, kapatmak için düğmeye yeniden veya dışarıya tıklayın. Temel kullanım için olay işleyicileri gerekmez.
En Üst Katmanda Oluşturma
Açılır pencereler en üst katmanda oluşturulur; z-index veya yığılma bağlamından bağımsız olarak diğer tüm içeriğin üzerinde görünür. Bu, elle yazılmış açılır pencerelerde sık görülen, iletişim kutusunun overflow:hidden kullanan bir üst öğenin arkasında gizlenmesi hatasını ortadan kaldırır.
Programlı Gösterme ve Gizleme
JavaScript açılır pencereleri gösterebilir veya gizleyebilir: element.showPopover(), element.hidePopover(), element.togglePopover(). Bildirimsel tetikleyiciyle aynı anlambilime sahiptir; auto modu için dışarı tıklayınca kapanma davranışı çalışmaya devam eder.
toggle Olayı
Açılır pencereler, durumları değiştiğinde bir toggle olayı tetikler. Olayın newState değeri "open" veya "closed" olur. Bu olay; analiz, odak yönetimi veya diğer kullanıcı arayüzü öğelerini açılır pencerenin açık durumuyla eşgüdümlemek için kullanışlıdır.
popoverEl.addEventListener("toggle", (e) => {
console.log("Popover is now", e.newState);
});CSS Sözde Sınıfı
:popover-open sözde sınıfı, açık durumdaki açılır pencerelerle eşleşir. Geçişleri, opaklığı ve dönüşümleri bu duruma göre biçimlendirebilirsiniz: [popover]:popover-open { opacity: 1; transform: none; }.
Çapa Konumlandırma
CSS Anchor Positioning API'siyle birlikte kullanıldığında açılır pencereler, JavaScript gerekmeden tetikleyicilerine göre otomatik olarak konumlandırılabilir. Böylece klasik düğmenin yanında araç ipucu gösterme düzeni kolayca uygulanır. Her iki özellik de modern kullanıcı arayüzü yapı taşlarını geliştirmeye yönelik aynı yaklaşımın parçasıdır.
Erişilebilirlik
Tarayıcı, modal açılır pencereler için odak yakalamayı yönetir, kapanırken odağı tetikleyiciye geri verir ve açılır pencerenin açık durumunu ekran okuyuculara bildirir. Bunu elle oluşturmak önemli miktarda ARIA kalıp kodu gerektirir; Popover API'si bunları ek kod yazmadan sağlar.
Tarayıcı Desteği
Chrome ve Safari Popover API'sini destekler; Firefox da daha yakın zamanda destek ekledi. Daha geniş uyumluluk için küçük bir uyumluluk katmanı vardır. Yeni projeler yerleşik özelliği kullanabilir ve daha eski tarayıcılarda aşamalı geliştirme uygulayabilir.
Eski Kalıpların Yerine Kullanma
Birçok JS iletişim kutusu kütüphanesi (sweetalert, react-modal), esas olarak Popover API'sinin artık yerleşik olarak yaptığı işlemleri telafi etmek için vardır. Geçiş yapmayı planlayın: daha küçük paketler, daha iyi varsayılanlar ve sürdürülecek daha az kod elde edersiniz. Popover API'si, son yıllarda HTML'e gelen en büyük iyileştirmelerden biridir.
Bilginizi Sınayın
popover="auto", popover="manual" modunun yapmadığı neyi yapar?
Özet
Popover API'si; popover özniteliğini, showPopover/hidePopover/togglePopover JS işlevlerini, popovertarget tetikleyici bağlantısını, tüm yığılma bağlamlarının üzerinde en üst katmanda oluşturmayı, :popover-open sözde sınıfını ve toggle olaylarını ekler. auto modu dışarı tıklanınca kapanır; manual modu açıkça yönetilir. Erişilebilirliği, odağı ve z-index'i doğru biçimde yöneten tek bir HTML yapı taşıyla özel iletişim kutusu ve araç ipucu kütüphanelerinin çoğunun yerini alır.
Sıkça Sorulan Sorular
“Popover API” dersi ücretsiz mi?
Evet — “Popover API” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“Popover API” dersinde ne öğreneceğim?
Yerel popover özniteliğiyle araç ipuçları ve iletişim kutuları oluşturun HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Popover API” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.