Baseline 2026: hangi yeni CSS özellikleri artık güvenli?

Baseline tam olarak neyi garanti ediyor?

Baseline'ın iki seviyesi var ve aradaki farkı bilmek kararınızı doğrudan değiştirir. Bir özellik Newly available olduğunda Chrome, Edge, Firefox ve Safari'nin güncel sürümlerinde desteklenmeye yeni başlamıştır — yani tarayıcıların hepsi artık biliyor ama kullanıcıların bir kısmı henüz o sürüme geçmemiş olabilir. Widely available ise özelliğin bu eşiği geçmesinin üzerinden yaklaşık 30 ay geçtiği anlamına gelir; bu noktada eski cihazlar da büyük ölçüde güncellenmiş sayılır.

Pratik karşılığı şu: Newly available bir özelliği bugün kullanabilirsiniz, ama ilerleyici geliştirme (progressive enhancement) mantığıyla — desteklemeyen tarayıcıda sayfa bozulmamalı, sadece daha sade görünmeli. Widely available özellikler içinse böyle bir tedbire çoğu projede gerek kalmaz. Baseline'ın söylemediği şeyse şudur: sizin kullanıcı kitlenizin gerçek sürüm dağılımı. Kurumsal bir müşteri tabanınız varsa ve trafiğin kayda değer bir kısmı eski sürümlerden geliyorsa, Baseline etiketinin üzerine kendi analitiğinizi koymanız gerekir.

limited            tek motorda / bayrak arkasında → üretimde kullanmayın
newly available    dört motorda da var → ilerleyici geliştirmeyle kullanın
widely available   +30 ay geçmiş → tedbire gerek yok

# Baseline "destekleniyor" der,
# "sizin kullanıcılarınızda çalışır" demez.

2026'da CSS tarafında ne değişti?

Bu yılın CSS eklemelerinin ortak bir teması var: daha önce JavaScript yazmayı gerektiren işleri stil katmanına taşıyorlar. Öne çıkanlar şunlar:

• Container style queries — bir bileşenin görünümünü, ekran genişliğine değil kapsayıcısının kendi özel değişkenine (custom property) göre değiştirebilirsiniz. Aynı kartın kenar çubuğunda ve ana kolonda farklı davranması artık bir sınıf adı yönetimi meselesi olmaktan çıkıyor.
• contrast-color() — bir arka plan rengine karşı okunabilir metin rengini tarayıcı seçer. Kullanıcının tema rengi seçebildiği ya da renklerin veriden geldiği arayüzlerde, kontrast hesabını elle yapan yardımcı fonksiyonları büyük ölçüde gereksiz kılıyor.
• field-sizing — Haziran 2026'da Firefox 152 ile Baseline'a girdi. field-sizing: content verdiğiniz bir textarea ya da input, içeriğine göre kendiliğinden büyüyüp küçülüyor. Bu iş için yazılan "yüksekliği ölç, ayarla" tarzındaki küçük JavaScript parçalarının sonu.
• :open seçicisi — details, dialog ve select gibi öğelerin açık durumunu doğrudan CSS'ten hedeflemenizi sağlıyor; bu durumu takip etmek için sınıf ekleyip çıkaran kodlara gerek kalmıyor.
• shape() ve yeni font birimleri — shape() ile eğrisel yolları clip-path içinde okunabilir bir sözdizimiyle tanımlayabiliyor, rcap/rch/rex/ric birimleriyle ölçüleri kök yazı tipinin gerçek metriklerine bağlayabiliyorsunuz.

JavaScript ve Web API tarafında öne çıkanlar

Baseline 2026 yalnızca stil katmanıyla ilgili değil. Uygulama mimarisini doğrudan ilgilendiren üç ekleme özellikle dikkate değer.

Navigation API, tek sayfa uygulamalardaki gezinme yönetimini history.pushState etrafında kurulmuş kırılgan düzeneklerden kurtarıyor: gezinmeleri tek bir olay üzerinden yakalayabiliyor, geçişleri iptal edebiliyor ve geri/ileri davranışını öngörülebilir biçimde ele alabiliyorsunuz. Router yazan ya da bakımını üstlenen ekipler için yılın en pratik kazanımı bu.

Trusted Types, DOM tabanlı XSS'e karşı tarayıcı düzeyinde bir koruma sunuyor: innerHTML gibi tehlikeli noktalara yalnızca belirlediğiniz bir politikadan geçmiş değerlerin yazılabilmesini zorunlu kılıyor. Yani güvenlik, kod incelemesinde yakalanmayı bekleyen bir dikkat meselesi olmaktan çıkıp platformun uyguladığı bir kurala dönüşüyor. Konuyu derinleştirmek isterseniz Web Uygulama Güvenliği rehberimize bakabilirsiniz.

WebTransport ise QUIC üzerinde çalışan, düşük gecikmeli ve çift yönlü bir iletişim katmanı getiriyor — WebSocket'in tek akış (stream) kısıtı olmadan, hem güvenilir hem güvenilir olmayan veri gönderebiliyorsunuz. Altındaki protokolün nasıl çalıştığını HTTP/3 ve QUIC yazımızda ele almıştık.

Bunu ekip pratiğine nasıl çevirirsiniz?

Baseline'ın asıl değeri tek tek özellikleri öğrenmekte değil, "kullanabilir miyiz" tartışmasını ölçülebilir bir kurala bağlamakta. Birkaç somut adım:

• Bir hedef seviyesi belirleyin — "Widely available olan her şey serbest, Newly available olanlar ilerleyici geliştirmeyle serbest, geri kalanı tartışmaya açık" gibi tek cümlelik bir kural, her yeni özellik için yeniden yapılan tartışmayı ortadan kaldırır.
• Kuralı otomatikleştirin — Baseline verisi makine tarafından okunabilir; linter ve derleme aracı eklentileri hedef seviyenizin altındaki özellikleri uyarıya dönüştürebiliyor. Kararı pipeline'ın içine koyduğunuzda kimsenin akılda tutması gerekmez.
• Yerini alan JavaScript'i gerçekten silin — field-sizing eklemek tek başına kazanç değildir; asıl kazanç onun yerini aldığı kodun kaldırılmasıyla gelir. Daha az JavaScript, daha hızlı bir sayfa demek — Web Vitals tarafındaki etkisi ölçülebilir düzeydedir.
• Kendi analitiğinizle doğrulayın — Baseline küresel bir ölçüdür. Kullanıcılarınızın tarayıcı ve sürüm dağılımı buna uymuyorsa kural sizin verinize göre sıkılaştırılmalıdır.

Peki geriye ne kalıyor?

2026'nın eklemelerine topluca bakınca ortaya belirgin bir yön çıkıyor: yıllardır kütüphanelerle ve elle yazılmış yardımcı kodlarla çözdüğümüz işler — kontrast hesabı, alanın içeriğe göre büyümesi, gezinme yönetimi, XSS'e karşı korunma — tek tek platformun kendisine taşınıyor. Bu, projelerin bağımlılık listesini kısaltan ve bakım yükünü azaltan sessiz ama birikimli bir kazanç.

Buradan çıkan pratik alışkanlık şu olabilir: her yeni özellik duyurusunda "kullanabilir miyim" diye sormak yerine, mevcut kod tabanınızda bugün hangi elle yazılmış parçanın artık gereksiz hale geldiğine bakmak. Frontend tarafındaki temelleri derinleştirmek isterseniz Bilgi Merkezi · Performans & Web Vitals ve Web Uygulama Güvenliği rehberlerimize göz atabilir, özelliklerin güncel durumu için web.dev · Baseline 2026 sayfasına bakabilirsiniz.