@sedatdemirAra

Web Baseline 2026: güvenle kullanılacak API'ler

Her yıl aynı soruyu soruyoruz: "Bu API'yi artık polyfill olmadan kullanabilir miyim?" Cevap çoğu zaman caniuse.com'da yeşil kutuları saymakla bitiyor. Baseline tam olarak bu sorunu çözmek için var. Chrome, Edge, Firefox ve Safari'nin dördünde birden desteklenen bir özellik "Baseline" etiketini alıyor ve artık o özelliği production'da güvenle kullanabileceğimizi söylüyor. 2026 itibarıyla bu etiketi alan API'ler listesi ciddi biçimde genişledi. Bu yazıda, günlük işlerimizi doğrudan etkileyen Baseline 2025-2026 özelliklerini kod örnekleriyle ele alıyorum.

Baseline ne ifade ediyor?

Web Platform Dashboard (webstatus.dev) üzerinde bir özellik iki aşamadan geçiyor. İlki "Newly available": dört büyük tarayıcı motorunun (Blink, Gecko, WebKit) en güncel kararlı sürümlerinde destek var. İkincisi "Widely available": özellik en az 30 ay boyunca tüm motorlarda desteklenmiş, yani eski sürümlerde bile sorun çıkma ihtimali düşük.

Buradaki kritik ayrım şu: "Newly available" demek "kullanabilirsin" demek değil, eski tarayıcı kullanan bir kullanıcı kitleniz varsa hâlâ dikkat etmeniz gerekir. "Widely available" ise gerçekten güvenli bölge. 2026'da widely available statüsüne geçen özellikler, 2023 ortasından beri tüm tarayıcılarda vardı. Bu yüzden bu yazıda hem newly available hem widely available olan özellikleri ayrı ayrı işaretliyorum.

CSS özellikleri artık polyfill gerektirmiyor

Container queries (widely available)

Container queries 2023 Şubat'ında son tarayıcıda da (Firefox 110) desteğe kavuşmuştu. 30 ayı geçtiği için artık widely available. Yani viewport yerine üst container'ın boyutuna göre stil yazmak için hiçbir çekince kalmadı.

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-inline-size: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Bu özelliği bileşen tabanlı framework'lerde (React, Vue, Svelte) kullanmak çok doğal çünkü bileşenler kendi genişliklerine göre uyum sağlıyor, viewport'a değil. CSS if() ve style queries ile koşullu stil yazısında style queries ile birlikte daha ileri örnekler var.

Subgrid (widely available)

Subgrid, bir grid item'ın kendi child'larını üst grid'in track'lerine hizalamasını sağlıyor. Chrome 117 (Eylül 2023) ile son tarayıcıda da eklenmişti. 2026'da widely available.

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.child {
  display: grid;
  grid-column: span 3;
  grid-template-columns: subgrid;
}

Subgrid olmadan iç içe grid'lerde hizalama tutturmak gerçekten zahmetliydi. Özellikle kart listeleri, form layout'ları gibi yapılarda artık JavaScript'e veya sabit yüksekliklere başvurmak gerekmiyor.

CSS nesting (widely available)

Sass'ın en çok kullanılan özelliği olan iç içe seçiciler artık native CSS'te var. Ağustos 2023'te Safari 16.5 ve Chrome 120 ile tam destek sağlandı. 2026 itibarıyla widely available.

.nav {
  background: #1a1a2e;

  & a {
    color: #e0e0e0;
    text-decoration: none;

    &:hover {
      color: #fff;
    }
  }
}

Bir uyarı: başlangıçta & div şeklinde element seçicilerde & zorunluydu, sonra spec güncellendi ve div tek başına da yazılabilir hale geldi. Ama tutarlılık açısından & kullanmaya devam etmek okunabilirliği artırıyor.

Scroll-driven animations (newly available)

CSS animation-timeline: scroll() ve animation-timeline: view() ile JavaScript yazmadan scroll'a bağlı animasyonlar yapılabiliyor. Chrome 115'te (Temmuz 2023) geldi, Firefox 110'da flag arkasındaydı, Safari 18'de (Eylül 2024) destek eklendi. 2025 sonu itibarıyla newly available. Widely available olması için 2027'yi beklemek gerekecek.

.progress-bar {
  animation: grow-width linear;
  animation-timeline: scroll(root);
}

@keyframes grow-width {
  from { width: 0%; }
  to { width: 100%; }
}

Bu konuyu Scroll-driven animations: JS'siz parallax yazısında detaylıca ele almıştım. Newly available olduğu için progressive enhancement ile kullanmak mantıklı:

@supports (animation-timeline: scroll()) {
  .progress-bar {
    animation: grow-width linear;
    animation-timeline: scroll(root);
  }
}

JavaScript ve DOM API'leri

Popover API (widely available)

HTMLElement'in popover attribute'u ve showPopover() / hidePopover() metodları tüm tarayıcılarda var. Tooltip, dropdown menu, toast notification gibi overlay'ler için artık üçüncü parti kütüphane şart değil. Top layer'da render ediliyor, yani z-index savaşı bitiyor.

<button popovertarget="menu">Menü</button>
<div id="menu" popover>
  <ul>
    <li><a href="/profil">Profil</a></li>
    <li><a href="/ayarlar">Ayarlar</a></li>
  </ul>
</div>

Hiç JavaScript yazmadan çalışıyor. Erişilebilirlik açısından <dialog> ile farkları ve birlikte kullanım senaryoları için Popover API ve dialog ile kütüphanesiz overlay yazısına bakabilirsiniz.

Anchor positioning (newly available)

CSS anchor() fonksiyonu ile bir elemanı başka bir elemana göreli konumlandırabiliyoruz. Tooltip'leri, popover'ları hedef elemana yapıştırmak için Floating UI gibi kütüphanelere gerek kalmıyor. Chrome 125 (Mayıs 2024) ve Safari 18.4 (Mart 2025) ile tüm tarayıcılarda newly available durumunda.

.trigger {
  anchor-name: --btn;
}

.tooltip {
  position: absolute;
  position-anchor: --btn;
  top: anchor(--btn bottom);
  left: anchor(--btn center);
  translate: -50% 4px;
}

Detaylı kullanım örnekleri ve fallback stratejisi için CSS anchor positioning ile tooltip ve popover yazısını öneririm.

Structured clone ve transferable streams

structuredClone() globally available. Web Worker'lara veri aktarırken JSON.parse(JSON.stringify()) hack'i artık gerekmiyor. Circular reference'ları bile kopyalıyor.

const original = { date: new Date(), set: new Set([1, 2, 3]) };
const copy = structuredClone(original);

console.log(copy.date instanceof Date); // true
console.log(copy.set.has(2));           // true

JSON.stringify ile kaybedilen Date, Set, Map, RegExp gibi tipler korunuyor. Worker ile birlikte Transferable nesneler (örneğin ReadableStream) de transfer edilebiliyor.

Array grouping: Object.groupBy()

Lodash'ın _.groupBy fonksiyonu artık dile yerleşik. Chrome 117, Firefox 119 ve Safari 17.4 ile tüm tarayıcılarda var. Widely available.

const products = [
  { name: "Klavye", category: "elektronik" },
  { name: "Kalem", category: "kırtasiye" },
  { name: "Mouse", category: "elektronik" },
  { name: "Defter", category: "kırtasiye" },
];

const grouped = Object.groupBy(products, (p) => p.category);
console.log(grouped.elektronik.length); // 2

Dönen değer prototype'sız bir nesne (Object.create(null) gibi). Map.groupBy() da var, key olarak object reference kullanmak istediğinizde işe yarıyor.

Set methods

Set.prototype.intersection(), union(), difference(), symmetricDifference(), isSubsetOf(), isSupersetOf(), isDisjointFrom() metodları 2024 başında tüm tarayıcılarda desteklendi. Newly available.

const frontend = new Set(["react", "vue", "svelte", "angular"]);
const fullstack = new Set(["next", "nuxt", "react", "svelte"]);

const both = frontend.intersection(fullstack);
console.log([...both]); // ["react", "svelte"]

const onlyFrontend = frontend.difference(fullstack);
console.log([...onlyFrontend]); // ["vue", "angular"]

Bunları daha önce filter ve has kombinasyonuyla yapıyorduk. Native metodlar hem daha okunabilir hem de engine tarafında optimize edilmiş.

View Transition API

Same-document view transitions (SPA'larda sayfa geçişleri) widely available. Cross-document view transitions ise Chrome 126 ve Safari 18.4'te var, Firefox'ta henüz yok (Haziran 2025 itibarıyla flag arkasında).

SPA kullanımı basit:

document.startViewTransition(() => {
  updateDOM(); // DOM'u değiştiren fonksiyon
});
::view-transition-old(root) {
  animation: fade-out 200ms ease-out;
}

::view-transition-new(root) {
  animation: fade-in 200ms ease-in;
}

React'te bu API'yi kullanmak için React ViewTransition ile sayfa geçiş animasyonları yazısına göz atın. MPA'larda cross-document transitions kullanmak isteyenler için de Cross-document view transitions ile MPA'larda SPA hissi yazısı var, ama Firefox desteği olmadan production'da dikkatli olmak gerekiyor.

Progressive enhancement stratejisi

Baseline etiketi "bu API'yi kullanabilirsin" diyor ama "herkes için çalışır" demiyor. Newly available bir özelliği production'da kullanırken şu yaklaşımı izlemek mantıklı:

CSS özellikleri için @supports kullanın. Tarayıcı desteklemiyorsa fallback stilleri devreye girer, sayfa kırılmaz.

/* Fallback */
.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
}

/* Enhancement */
@supports (anchor-name: --x) {
  .tooltip {
    position: absolute;
    position-anchor: --trigger;
    top: anchor(--trigger bottom);
  }
}

JavaScript API'leri için runtime kontrolü yapın:

if ("startViewTransition" in document) {
  document.startViewTransition(() => updateDOM());
} else {
  updateDOM();
}

Widely available özellikler için bu kontrolleri çıkarabilirsiniz. 30 ay demek, otomatik güncellenen tarayıcılarda sorun olmayacağı anlamına geliyor. Kurumsal ortamlarda eski tarayıcılar takılı kalabiliyor, ama bu her zaman böyleydi ve analytics veriniz en güvenilir rehber.

Hâlâ Baseline'da olmayan dikkat çekici API'ler

Her şey Baseline'a girmedi. @property ile custom property tipi tanımlama Safari 18.4'te geldi, ama widely available olması 2027'yi bulacak. CSS.registerProperty() JavaScript API'si de benzer durumda.

Temporal API'si (tarih ve saat işlemleri için Date'in yerini alacak olan API) henüz hiçbir tarayıcıda kararlı sürümde yok. Hâlâ polyfill gerekiyor.

import.meta.resolve() Node.js'te uzun süredir var ama tarayıcılarda newly available. Bundler kullanıyorsanız zaten bu API'ye doğrudan ihtiyacınız yok.

Baseline, tarayıcı desteğini takip etmenin en net yolu haline geldi. Ama her newly available özelliği hemen production'a almak yerine, kendi kullanıcı kitlenizin tarayıcı dağılımına bakıp karar vermek her zaman daha sağlıklı. Widely available etiketini gördüğünüzde ise çekinmeden kullanın, polyfill'leri temizleyin, bundle boyutunuzu küçültün. O yeşil Baseline rozeti tam olarak bunu söylüyor.