Interest Invoker'lar ve Command Özniteliği

Open UI grubu, iki yeni HTML özniteliğini standartlaştırıyor: tıklamayla tetiklenen eylemler için command ve fareyle üzerine gelme ya da odaklanmayla tetiklenen “ilgi” için interesttarget (araç ipuçlarının ve önizlemelerin temeli). Her ikisi de daha önce JavaScript gerektiren bildirimsel davranışlarla HTML'yi genişletiyor.

command="show-modal" ve commandfor="dialog-id" özniteliklerine sahip bir düğme, herhangi bir JS kullanmadan bir iletişim kutusu gösterir ve manuel dialog.showModal() çağrılarının yerini alır. Diğer komutlar: command="close", command="toggle-popover", command="show-popover".

İlk komut kümesi yaygın kullanıcı arayüzü örüntülerini hedefler: iletişim kutularını gösterme/gizleme (yerleşik <dialog>), açılır katmanları açıp kapatma (Popover API) ve zamanla genişleyebilir. Özel öğeler, oncommand olay işleyicileri aracılığıyla hangi komutları kabul ettiklerini bildirebilir.

Yerleşik komutların ötesinde, belirtim “--” ile başlayan özel komut dizelerine izin verir. Hedef öğe, JS içinde işleyebileceğiniz bir command olayı alır: el.addEventListener("command", (e) => { if (e.command === "--save") save(); }).

interesttarget özniteliği, bir öğenin “ilgi” hedefini belirtir — genellikle fareyle üzerine gelindiğinde veya odaklanıldığında görünen bir araç ipucunu. Tarayıcı zamanlamayı (300 ms'lik üzerine gelme amacı gecikmesi), konumlandırmayı (bağlantı konumlandırmasıyla) ve kapatmayı otomatik olarak yönetir.

İpucu açılır katman modu, ilgi oluştuğunda görünen araç ipucu tarzı açılır katmanlar için tasarlanmıştır. Bunlar modal değildir, odağı ele geçirmez ve ilgi sona erdiğinde kapanır. interesttarget + popover="hint" birleşimi, iki HTML özniteliğiyle yerel bir araç ipucu sunar.

Yerel iletişim kutuları odağın hapsedilmesini, yerel açılır katmanlar katmanlamayı, yerel ilgi tetikleyicileri ise fareyle üzerine gelme amacı zamanlamasını yönetir ve ilişkileri ekran okuyuculara bildirir. Özel JS uygulamalarını bu bildirimsel temel yapı taşlarıyla değiştirmek, erişilebilirlik kalitesini güvenilir biçimde artırır.

Bu özellikler hâlâ standartlaştırılıyor. Kesin öznitelik adları ve komut kümesi değişebilir. Tarayıcı uygulamaları önce Chromium'da ortaya çıkıyor. Üretimde kullanmak için adlandırmanın kararlı hâle gelmesini ve en az iki tarayıcının bu özellikleri sunmasını bekleyin — bunun muhtemelen gelecek bir veya iki yıl içinde gerçekleşmesi bekleniyor.

Bu özelliklerin her biri milyonlarca kez yazılıp yeniden yazılmış JavaScript kodlarının yerini alır: iletişim kutusu yönetimi, açılır katman tetikleyicileri ve araç ipucu davranışı. Bu örüntüleri HTML'ye taşımak sayfa boyutunu küçültür, tutarlılığı artırır ve tarayıcının iyileştirmeler uygulamasına olanak tanır.

Open UI topluluk grubu (open-ui.org), bu çalışmaların büyük bölümünü yürütür; yeni HTML öğeleri ve öznitelikleri önerir, prototiplerini oluşturur ve standartlaştırma sürecinde ilerlemelerini sağlar. En yeni öneriler için bloglarını izleyin.

komut, ilgi hedefi, açılır katman, iletişim kutusu, bağlantı konumlandırması, görünüm geçişleri ve özelleştirilebilir seçim listelerinin tümü, bileşen kütüphanesi örüntülerini platforma taşıma yönündeki tutarlı çabanın parçalarıdır. Her biri tek başına küçük bir adımdır; birlikte, HTML'nin kullanıcı arayüzü söz varlığındaki son yılların en büyük genişlemesini temsil ederler.

Önerileri (open-ui.org) takip edin, bayrakları etkinleştirerek Chromium'da deneyler yapın ve özellikler kararlı hâle geldikçe benimsemeyi planlayın. Mevcut kod tabanınızı inceleyin: ne kadar JS'nin iletişim kutusu/açılır katman/araç ipucu altyapısına ayrıldığını hesaplayın. Bu kodun birkaç sürüm içinde değiştirilmesi hedefleniyor.

Bir düğmedeki command özniteliğinin amacı nedir?

Gelişmekte olan iki özellik, HTML'nin bildirimsel kullanıcı arayüzü söz varlığını genişletir: tıklamayla tetiklenen eylemler için komut + komut hedefi (iletişim kutusu gösterme, açılır katmanı açıp kapatma) ve fareyle üzerine gelme/odaklanmayla tetiklenen araç ipuçları için ilgi hedefi + popover="hint". Her ikisi de yaygın JavaScript örüntülerini HTML öznitelikleriyle değiştirerek erişilebilirliği artırır ve paket boyutunu küçültür. Özellikler hâlâ gelişiyor; kararlı hâle gelmelerini takip etmek ve tarayıcı desteği geldikçe kullanıma sunmak için Open UI'yi izleyin.