HTML'de 2023–2026 Arası Gelenler: search, popover, Invoker Commands, Customizable Select ve Ufuktakiler

Sürüm notu: Bu yazı HTML (HyperText Markup Language) Living Standard'ın ve Baseline'ın Kasım 2026 durumuna göre yazıldı; destek verileri web-features 3.46 ve baseline-browser-mapping 2.11 paketlerinden alınmış, özellik kontrolleri Chrome 158 ve WebKit 27.2 (Playwright 1.65) ile denenmiştir.

Önce Tahmin Et

Bookstore'un Angular 22 uygulamasında bu seride gördüğümüz özelliklerden bir liste var: search, inert, name'li details, popover, dialog.requestClose(), Invoker Commands, :open, autocorrect, field-sizing. Hepsi Kasım 2026 itibarıyla Baseline. Ekipte biri "Baseline olanları fallback'siz kullanalım, Angular zaten Baseline'ı hedefliyor" diyor.

Haklı mı? Bu listeden kaçı, Angular 22'nin resmî olarak desteklediği her tarayıcıda gerçekten çalışır? Bir ipucu: Angular'ın hedefi "Baseline" değil, belirli bir tarihteki "Baseline widely available".

Bir önceki yazı olan "Accessible Markup Temelleri ve Framework'lerde HTML"de framework'lerin ürettiği HTML'i kontrol etmeyi gördük ve böylece serinin konu yazıları bitti. Bu son yazıda geri çekilip son üç yılın bütününe bakıyoruz: HTML'e 2023 ile 2026 arasında ne geldi, henüz ne gelmedi, ve bunları bugün bir üretim uygulamasında nasıl kullanmaya karar veririz.

Sürüm Yok, Tarih Var

Serinin ilk yazısında gördüğümüz gibi HTML'in "HTML5", "HTML6" gibi sürümleri yok; WHATWG'nin (Web Hypertext Application Technology Working Group) Living Standard'ı sürekli güncellenir. Bir özelliğin spec'e girdiği gün de kullanılabileceği gün değildir. Bu yüzden değişimi sürüm numarasıyla değil, Baseline tarihleriyle okuyoruz.

Hatırlatma olarak iki tarih var. Bir özellik, çekirdek tarayıcıların (Chrome, Edge, Firefox ve Safari, masaüstü ve mobil) hepsinin güncel sürümünde çalıştığı gün newly available olur; "Baseline 2025" gibi bir etiketteki yıl bu tarihtir. 30 ay sonra widely available olur, çünkü o zamana kadar eski sürümleri kullananların büyük kısmı güncellenmiş sayılır. Pratikte kritik olan şu: newly available bir özellik, bugün en güncel tarayıcıların hepsinde var, ama birkaç sürüm geride kalmış bir kullanıcıda yok.

2023–2026 Kronolojisi

Seride kullandığımız özelliklerin Baseline tarihleri, web-features verisinden. Widely available tarihi, newly tarihine 30 ay eklenerek hesaplanır:

Tabloda iki şey göze çarpıyor. Birincisi hız: 2025'ten itibaren neredeyse her çeyrekte HTML'e ya da onunla doğrudan ilgili CSS'e (Cascading Style Sheets) yeni bir özellik Baseline olarak eklenmiş, ve çoğu dialog, popover ve form etrafında toplanıyor. Uzun yıllar JavaScript kütüphanelerinin işi olan modal, açılır panel ve accordion artık platformun parçası. İkincisi, widely available tarihleri ne kadar uzakta: Invoker Commands'ın widely olması 2028'in ortasını buluyor.

Bir tarih sana tuhaf gelebilir: popover. Chrome 116'dan beri vardı, ama Baseline tarihi Ocak 2025. Sebep, iOS Safari'nin desteğinin ancak 18.3 sürümüyle tam sayılması; Baseline, çekirdek setin en son katılan tarayıcısının tarihini alır. Aşağıda Angular hedefiyle karşılaştırırken bu ayrıntı yeniden karşımıza çıkacak.

Henüz Baseline Olmayanlar

Seride, Kasım 2026 itibarıyla limited availability olan birkaç özelliği de kullandık. Hepsinin eksik tarayıcısı ve bugün nasıl kullanılabileceği farklı:

• closedby (6. yazı): Chrome 134 ve Firefox 141'de var, Safari'de yok. Desteklemeyen tarayıcı attribute'u yok sayar ve dialog Esc ile kapanmaya devam eder; bugün kullanılabilir.
• popover="hint" ve interestfor (6. yazı): hint Chrome 151 ve Firefox 153'te, interestfor yalnız Chrome 149'dan beri var. Desteklemeyen tarayıcıda hint manual gibi davranır; ipucu gibi önemsiz bir bilgi dışında bekle.
• Customizable select (7. yazı): Chrome 135 ve Safari 27'de var, Firefox'ta yok. Klasik select'e temiz düştüğü için option metni olduğu sürece bugün kullanılabilir.
• hidden="until-found" (6. yazı): Chrome 102 ve Firefox 148'de var, Safari'de yok. İçeriğe başka bir yoldan da ulaşılabiliyorsa kullan.
• sizes="auto" ve JPEG (Joint Photographic Experts Group) XL (8. yazı): ilki Safari 27 ile gelmişti ama bir hata yüzünden web-features verisinde yeniden desteksiz sayılıyor; JPEG XL Chrome 155 ve Firefox 158 ile açıldı, Edge'de yok. İkisi de fallback'li yazıldığında bugün güvenli.

sizes="auto"'nun hikâyesi bir ders içeriyor: web.dev'in Eylül 2026 özeti onu Baseline newly available olarak duyurmuştu, ama web-features verisi daha sonra Safari 27'yi, SVG (Scalable Vector Graphics) görsellerde çizimi bozan bir hata (WebKit bug 324661) yüzünden desteksiz saymaya başladı. Baseline durumu tek yönlü bir merdiven değil; veri düzeltilebilir ve bir özellik geri inebilir. Karar verirken bir blog duyurusunu değil, güncel veriyi esas al.

Interop 2026 ve Sıradakiler

Hangi özelliklerin yakında Baseline olacağını tahmin etmenin en iyi yolu Interop'a bakmak: tarayıcı üreticilerinin (Apple, Google, Microsoft, Mozilla ve Igalia) her yıl birlikte seçtikleri ve testleriyle takip ettikleri bir uyumluluk çalışması. 12 Şubat 2026'da açıklanan Interop 2026'nın odak alanlarından biri doğrudan bu serinin konusu: dialog ve popover eklemeleri. WebKit'in duyurusuna göre bu alan closedby'ı, popover="hint"'ı ve :open'ı kapsıyor. :open Mayıs 2026'da Baseline oldu bile; closedby ve hint için Safari tarafının yıl içinde gelmesi bekleniyor.

Aynı Interop'ta "investigation" (inceleme) alanları da var; bunlar henüz uyumluluk hedefi değil, hazırlık. JPEG XL, WebVTT (Web Video Text Tracks) ve accessibility testi bu listede. Customizable select ve interestfor ise Interop 2026'da yok; Firefox'un bu yıl ikisini de getireceğine dair bir taahhüt görmedim.

Angular 22'nin Tarayıcı Hedefi ve Baseline

Tahmin sorusuna dönelim. Angular, v20'den beri desteklediği tarayıcıları Baseline ile tanımlıyor: her major sürüm, seçilmiş bir tarihte widely available olan tarayıcı setini hedefliyor. Angular 22 için bu tarih 2026-05-07. Bu tarihi Baseline'ın tarayıcı eşlemesine verip seride kullandığımız her özelliğin desteğini o setle karşılaştıran script:

import { features } from 'web-features';
import { getCompatibleVersions } from 'baseline-browser-mapping';

// Angular 22'nin tarayıcı hedefi: 2026-05-07 itibarıyla Baseline widely available
// (okunabilirlik için Android sürümlerini dışarıda bırakıyorum; bu listede masaüstüyle aynılar)
const target = Object.fromEntries(
  getCompatibleVersions({ widelyAvailableOnDate: '2026-05-07' })
    .filter(b => !b.browser.endsWith('_android')).map(b => [b.browser, b.version]));

const ids = ['search', 'inert', 'details-name', 'popover', 'requestclose', 'invoker-commands',
  'open-pseudo', 'toggleevent-source', 'autocorrect', 'field-sizing', 'sizes-auto',
  'dialog-closedby', 'popover-hint', 'interest-invokers', 'customizable-select', 'hidden-until-found'];

const older = (a, b) => {
  const [x, y] = [a, b].map(v => v.split('.').map(Number));
  return x[0] - y[0] || (x[1] ?? 0) - (y[1] ?? 0);
};

console.log('Angular 22 target:', Object.entries(target).map(([b, v]) => `${b} ${v}`).join(', '));
for (const id of ids) {
  const { baseline, baseline_low_date: low, baseline_high_date: high, support } = features[id].status;
  const status = baseline === 'high' ? `widely (${high})` : baseline === 'low' ? `newly (${low})` : 'limited';
  // hedefteki en eski sürüm bu özelliği desteklemiyorsa fallback gerekir
  const gaps = Object.keys(target).filter(b => !support[b] || older(support[b], target[b]) > 0)
    .map(b => support[b] ? `${b}<${support[b]}` : `${b}:none`);
  console.log(`${id.padEnd(20)} ${status.padEnd(20)} ${gaps.length ? 'fallback: ' + gaps.join(' ') : 'ok'}`);
}

Angular 22 target: chrome 119, edge 119, firefox 119, safari 17, safari_ios 17
search               widely (2026-04-13)  ok
inert                widely (2025-10-11)  ok
details-name         newly (2024-09-03)   fallback: chrome<120 edge<120 firefox<130 safari<17.2 safari_ios<17.2
popover              newly (2025-01-27)   fallback: firefox<125 safari_ios<18.3
requestclose         newly (2025-05-27)   fallback: chrome<134 edge<134 firefox<139 safari<18.4 safari_ios<18.4
invoker-commands     newly (2025-12-12)   fallback: chrome<135 edge<135 firefox<144 safari<26.2 safari_ios<26.2
open-pseudo          newly (2026-05-11)   fallback: chrome<133 edge<133 firefox<136 safari<26.5 safari_ios<26.5
toggleevent-source   newly (2026-05-11)   fallback: chrome<140 edge<140 firefox<145 safari<26.5 safari_ios<26.5
autocorrect          newly (2026-09-11)   fallback: chrome<153 edge<153 firefox<136
field-sizing         newly (2026-06-16)   fallback: chrome<123 edge<123 firefox<152 safari<26.2 safari_ios<26.2
sizes-auto           limited              fallback: chrome<126 edge<126 firefox<150 safari:none safari_ios:none
dialog-closedby      limited              fallback: chrome<134 edge<134 firefox<141 safari:none safari_ios:none
popover-hint         limited              fallback: chrome<151 edge<151 firefox<153 safari:none safari_ios:none
interest-invokers    limited              fallback: chrome<149 edge<149 firefox:none safari:none safari_ios:none
customizable-select  limited              fallback: chrome<135 edge<135 firefox:none safari<27 safari_ios<27
hidden-until-found   limited              fallback: firefox<148 safari:none safari_ios:none

İlk satır Angular 22'nin en eski desteklediği sürümleri veriyor: Chrome, Edge ve Firefox 119, Safari 17. Listeden yalnız search ve inert bu setin tamamında var; ikisi de widely available. Geri kalan newly available özelliklerin hepsinde, Angular'ın resmî olarak desteklediği ama özelliği bilmeyen tarayıcı sürümleri var. Örneğin Invoker Commands için Safari 17'den 26.1'e kadar her sürüm, popover için Firefox 119–124 ve iOS Safari 17.x–18.2.

Yani tahmin sorusundaki cümlenin cevabı hayır. "Baseline" ile "Angular'ın hedefi" aynı şey değil: Angular widely available'ı, yani 30 ay öncesini hedefliyor; bir özelliğin newly available olması, o 30 ayın içindeki tarayıcılarda bulunduğunu söylemez. Kural şöyle kurulabilir: hedefin widely available bir tarihse, o tarihten önce widely available olmuş özellikler fallback'siz; geri kalan her şey progressive enhancement ya da polyfill ile.

Bunu Angular'a özgü sanma. Bir Razor uygulamasında ya da tarayıcı listesini Browserslist ile tanımlayan herhangi bir build'de aynı soru geçerli: hedefini bir tarih ya da sürüm listesi olarak yaz ve özellikleri ona karşı kontrol et. Yukarıdaki script'i CI'da (Continuous Integration) çalıştırmak, "bu özelliği kullanabilir miyiz?" tartışmasını veriye bağlar.

Özellik Kontrolü ve Test Ortamının Tuzağı

Fallback'in ilk adımı, özelliğin olup olmadığını çalışma anında kontrol etmek. Serideki özellikler için kullandığım kontroller ve iki motordaki sonuçları:

const pw = require('playwright');

// progressive enhancement için özellik kontrolleri
const checks = {
  'invoker commands': () => 'command' in HTMLButtonElement.prototype,
  'popover': () => 'popover' in HTMLElement.prototype,
  'dialog closedby': () => 'closedBy' in HTMLDialogElement.prototype,
  'popover="hint"': () => { const d = document.createElement('div'); d.popover = 'hint'; return d.popover === 'hint'; },
  'interestfor': () => 'interestForElement' in HTMLButtonElement.prototype,
  'customizable select': () => CSS.supports('appearance', 'base-select'),
  ':open': () => CSS.supports('selector(:open)'),
  'hidden="until-found"': () => 'onbeforematch' in HTMLElement.prototype,
};

(async () => {
  for (const name of ['chromium', 'webkit']) {
    const browser = await pw[name].launch();
    const page = await browser.newPage();
    const results = [];
    for (const [feature, fn] of Object.entries(checks)) {
      results.push(`${feature}=${await page.evaluate(fn) ? 'yes' : 'no'}`);
    }
    console.log(`${name} ${browser.version()}: ${results.join(', ')}`);
    await browser.close();
  }
})();

chromium 158.0.8127.18: invoker commands=yes, popover=yes, dialog closedby=yes, popover="hint"=yes, interestfor=yes, customizable select=yes, :open=yes, hidden="until-found"=yes
webkit 27.2: invoker commands=yes, popover=yes, dialog closedby=yes, popover="hint"=yes, interestfor=no, customizable select=yes, :open=yes, hidden="until-found"=yes

Chromium'da hepsi var; beklenen bu. Dikkat çekici olan WebKit satırı: closedby, popover="hint", customizable select ve hidden="until-found" var görünüyor. Ama yukarıdaki veriye göre Safari'nin yayınlanmış sürümlerinde closedby, hint ve until-found yok. Sebep, serinin "Native Interaktif Element'ler 1" yazısında da not ettiğim gibi, Playwright'ın WebKit build'inin WebKit'in geliştirme dalını izlemesi. Testlerin WebKit'te geçmesi, Safari kullanıcısının bugün aynı davranışı göreceği anlamına gelmez. Destek kararı web-features verisiyle, davranış testi ise mümkünse gerçek Safari ile.

Kontrollerin kendisi hakkında iki not. CSS özellikleri için CSS.supports() ve CSS'te @supports en güvenli yol. HTML attribute'larında ise DOM (Document Object Model) property'sinin varlığına bakmak yaygın, ama her zaman yeterli değil: popover="hint" gibi bir değeri desteklemeyen tarayıcı property'yi yine de tanır, bu yüzden değeri atayıp geri okumak gerekiyor. CSS'te yeni bir pseudo-class için bir başka incelik var: bir selector listesinde tanınmayan tek bir selector bütün kuralı geçersiz kılar. details[open], details:open yazarsan, :open'ı bilmeyen tarayıcı details[open]'ı da uygulamaz. :is(details[open], details:open) içindeki liste ise affedicidir; tanınmayanı atlar.

Bookstore İçin Karar Tablosu

Bütün bunları Bookstore'a uyguladığımda ortaya çıkan tablo:

Tablonun mantığı tek bir soruya dayanıyor: özellik çalışmadığında kullanıcı ne kaybeder? Bir şey kaybetmiyorsa (closedby, autocorrect) ya da kaybettiği şey bir süsse (customizable select'in görselleri) bugün kullan. Bir işlevi kaybediyorsa (Invoker Commands olmadan açılmayan bir dialog, popover olmadan hep görünen bir sepet) ya bir fallback yaz ya da o tarayıcıların payının kabul edilebilir olduğunu analitikle göster.

Üretimde Dikkat

Bu yazıdaki tarihler ve sürümler Kasım 2026'nın fotoğrafı. web-features paketi düzenli olarak yeni sürümler yayınlıyor; bir özelliğin durumunu bir yıl önce yazılmış bir blog yazısından, hatta bu yazıdan değil, güncel veriden oku. MDN (MDN Web Docs) sayfalarındaki Baseline kutusu ve web-features explorer aynı veriyi gösteriyor.

Hedef tarayıcı listesini kod tabanında tek bir yerde tut ve onu herkes görsün. Angular'da bu karar framework sürümüyle birlikte geliyor; ama kendi analitiğinde Angular'ın desteklediğinden daha eski tarayıcılarda anlamlı bir kullanıcı payı görüyorsan (kurumsal müşteriler, güncellenmeyen cihazlar), bu payı hedefle karşılaştırmak senin işin. Ters yönde de geçerli: kullanıcıların neredeyse tamamı son sürümlerdeyse, newly available bir özellik için yazacağın fallback'in maliyetini kazancıyla karşılaştır.

Polyfill eklerken boyutuna ve yüklenme biçimine dikkat et: yalnız ihtiyaç duyan tarayıcıda, özellik kontrolünden sonra yükle. Her kullanıcıya gönderilen bir polyfill, çoğunluğun hiç ihtiyaç duymadığı bir maliyettir; bunun ölçümü Web Performansı serisinde.

Sık Düşülen Tuzaklar

Birincisi, "Baseline" ile "widely available"ı aynı sanmak. Newly available bir özellik birkaç sürüm geride kalmış kullanıcıda yoktur.

İkincisi, framework'ün tarayıcı hedefinin, kullandığın her HTML özelliğini kapsadığını varsaymak. Angular 22 Safari 17'yi destekliyor; Invoker Commands Safari 26.2'de geldi.

Üçüncüsü, Playwright'ın WebKit'ini Safari sanmak. Destek kararını veriyle ver.

Dördüncüsü, CSS'te yeni bir pseudo-class'ı eskisiyle aynı selector listesine koymak. Tanımayan tarayıcı bütün kuralı atar; :is() kullan.

Beşincisi, bir Baseline duyurusunu kalıcı sanmak. sizes="auto" örneğinde olduğu gibi veri düzeltilebilir.

Küçük Bir Deneme

★☆☆ support.mjs'teki tarihi 2026-05-07'den bugünün tarihine değiştir ve çıktıyı karşılaştır. Hangi özellikler "ok" oldu, hangileri hâlâ fallback istiyor?

★★☆ Projendeki tarayıcı hedefini (Angular sürümü, Browserslist ya da bir sürüm listesi) bul ve support.mjs'i ona göre uyarla. Kullandığın üç yeni HTML ya da CSS özelliğini listeye ekle ve sonucu ekibinle paylaş.

★★★ Bookstore'un "Delete book" onayını (6. yazı) Invoker Commands olmayan tarayıcılarda da çalışacak hâle getir: 'command' in HTMLButtonElement.prototype kontrolünden sonra yalnız gerektiğinde yüklenen küçük bir click handler yaz ve davranışı Invoker Commands'ı desteklemeyen bir tarayıcıda (ör. eski bir Safari ya da bulut tabanlı bir gerçek cihaz test servisi) test et.

Seri burada bitiyor. On iki yazıda kemik yapıdan landmark'lara, form'lardan dialog'a, tablodan head'e kadar doğru element'i doğru anlam için seçmeyi ve bunu her adımda ölçmeyi gördük. Buradan devam etmek için iki doğal yol var: ARIA (Accessible Rich Internet Applications), focus yönetimi ve ekran okuyucu testlerinin derinliği için ilerideki Accessibility (a11y) serisi; bu element'lerin görünümü, dialog ve popover animasyonları ve anchor positioning için ilerideki CSS3: Flexbox, Grid ve Modern CSS serisi.