HTML ile Yeni Komutlar Dönemi Başlıyor

HTML ile Yeni Komutlar Dönemi HTML ile Yeni Komutlar Dönemi kapsamında, Yıllardır ön uç geliştirmenin HTML ile biraz utanç verici bir ilişkisi vardı. Hepimiz anlamsal HTML hakkında okuyoruz, doğru yer işaretlerini, doğru nitelikleri, erişilebilir formları ve…

9
Paylaş
HTML ile Yeni Komutlar Dönemi Başlıyor

HTML ile Yeni Komutlar Dönemi

HTML ile Yeni Komutlar Dönemi kapsamında, Yıllardır ön uç geliştirmenin HTML ile biraz utanç verici bir ilişkisi vardı. Hepimiz anlamsal HTML hakkında okuyoruz, doğru yer işaretlerini, doğru nitelikleri, erişilebilir formları ve anlamlı öğeleri kullanmaktan bahsediyoruz. Daha sonra React’ı yazmaya geri dönüyoruz. Tüm sektör yapay zekaya takıntılı olsa da tarayıcılar, platformu daha da yetenekli hale getiren özellikler sunuyor.

HTML ile Yeni Komutlar Dönemi kapsamında, JS’yi kaldırmamıza, durumu azaltmamıza ve kullanıcı arayüzü davranışını HTML’de ifade etmemize olanak tanıyan özellikler. Ancak yapay zeka geçmişte eğitildiğinden bunlar göz ardı ediliyor veya eski kalıplarla yeterince önerilmiyor. Bir iletişim kutusunu açmak için ortak metin durumu Tarihsel olarak, bir iletişim kutusunu veya açılır pencereyi açmak için bir miktar özel ortak metin koduna ihtiyacımız vardır.

Diyalog içeriği

const diyalog = document.getElementById(“iletişim kutum”); document.getElementById(“açık diyalog”).addEventListener(“tıklayın”, () => { diyalog.showModal(); }); document.getElementById(“close-dialog”).addEventListener(“tıklayın”, () => { diyalog.close(); }); İletişim kutumuzu, iletişim kutusunun kendisini açmak için bir düğmeye ihtiyacımız var ve ardından tarayıcıya etkileşimi açıklamak için JS yazıyoruz: “Kullanıcı düğmeyi tıkladığında, iletişim kutusunu aç”.

Tasarım ve teknik ayrıntılar

React veya Vue kullanıyorsanız bu daha da ayrıntılı olabilir: Bazı özel durumlara ihtiyacınız var, potansiyel olarak bunu ortaklarınıza iletin mponent, bir olay işleyicisini bağlayın ve ardından her şeyin senkronize kaldığından emin olun. İster vanilya ister çerçeve olsun, yukarıdaki kod kendi başına tamamen makuldür, her ön uç geliştirici benzer bir şeyi yüzlerce kez yazmıştır.

Ancak bunu bininci kez yazdıktan sonra şunu merak ettim: Bir iletişim kutusunun açık olduğunu göstermek için uygulama durumuna gerçekten ihtiyacımız var mı? Cevap: duruma göre değişir. Bazen devlete ihtiyaç vardır. Ancak bazen HTML ve tarayıcının bize 2026’da kullanıma hazır olarak sağlayabileceği davranışı yeniden inşa ediyoruz.

HTML ile Yeni Komutlar Dönemi

Sohbete girer: Invoker Komutları API’si Invoker Komutları API’si bize, bildirimsel olarak davranışları düğmelere atamamız için bir yol sağlar, bu da daha sonra bu etkileşimli öğeleri kontrol etmemizi sağlar. Bir olay dinleyicisi eklemek yerine ilişkiyi doğrudan HTML’de tanımlayabiliriz. Bize yardımcı olan nitelikler commandFor ve command: commandFor: düğmemizi bir “komut çağırıcıya” dönüştürür.

Bugünden bakınca ne kadar güvenilir?

Değer olarak kontrol edilecek öğenin kimliğini alır. komut: Bu öğe üzerinde gerçekleştirilecek eylemi belirtir.

Harika Popover içeriği
React’ta nasıl yapılır?

Bunların tümü seçtiğiniz çerçeveye aktarılabilir: dışa aktarma işlevi SilButt açık() { dönüş (

Hesap silinsin mi?

Bu işlem geri alınamaz.

Bu gerçekten çok mu önemli? İlk bakışta bu, belki 10 satır kod kaydetmeye benziyor. Bu güzel. Ancak en ilginç olanı sorumlulukların bizden tarayıcılara devredilmesidir. Daha az JavaScript yazdığımız için tarayıcının kapasitesi azalmıyor, tam tersi. Sonunda daha az JS’ye ihtiyacımız var. Tarayıcı desteği Artık herkes diyaloglarını silmeye başlamadan önce küçük bir sorun var: Invoker Komutları API’si yeni.

Okuyucu için pratik anlamı

MDN şu anda bunu Baseline 2026 olarak listeliyor ve Aralık 2026’ten bu yana en son tarayıcı sürümlerinde tarayıcılar arası kullanılabilirlik sunuyor. Daha eski tarayıcılar bunu desteklemeyebilir. Referanslar MDN — Çağırıcı Komutları API’si MDN —