Safari 27 ve Firefox 155 sonrası CSS: Artık her tarayıcıda çalışan altı yeni özellik

Google'ın web.dev ekibi her ay, web platformuna o ay eklenen özellikleri derleyen bir yazı yayımlıyor. Rachel Andrew'un 2 Ekim 2026'da yayımlanan eylül derlemesi bu kez dikkat çekici, çünkü ayın iki büyük sürümü (1 Eylül'de çıkan Firefox 155 ve Apple'ın 17 Eylül'de ayrıntılarını paylaştığı Safari 27) birlikte bir grup CSS özelliğini Baseline "Newly available" seviyesine taşıdı.

Bu yazıda hangi özelliklerin bu eşiği geçtiğine, ne işe yaradıklarına ve projelerinizde bugün nasıl kullanabileceğinize bakacağız.

Baseline neden önemli?

Baseline, bir web özelliğinin Chrome, Edge, Firefox ve Safari'nin güncel sürümlerinin hepsinde çalışıp çalışmadığını gösteren ortak bir etiket. "Newly available" demek, özelliğin artık dört motorda da bulunduğu anlamına geliyor. "Widely available" ise aynı özelliğin bu noktadan sonra yaklaşık iki buçuk yıl boyunca yerinde durması, yani eski cihazlarda da büyük ölçüde güvenle kullanılabilmesi demek.

Pratikte bir özelliğin Baseline'a girmesi, "bunu denemeye değer mi?" sorusunun yerini "bunu ne zaman varsayılan yapalım?" sorusunun almaya başladığı an. Özellikle Safari genelde son halka olduğu için Safari 27'nin çıkışı birçok özelliğin kilidini birden açtı. Apple'ın kendi açıklamasına göre Safari 27, 83 yeni özellik ve 844 hata düzeltmesiyle WebKit'in en kapsamlı sürümlerinden biri.

Baseline'a giren özellikler

progress(): Medya sorgusu yığınlarına alternatif

progress() bir değerin iki sınır arasında nerede durduğunu 0 ile 1 arasında bir sayı olarak döndürüyor. Örneğin bir kartın opaklığını görünüm alanı genişliğine göre yumuşakça değiştirmek için artık ara kırılım noktaları yazmanıza gerek yok:

.card {
  /* 320px'te 0, 1200px'te 1 */
  opacity: progress(100vw, 320px, 1200px);
}

Bu sayıyı calc() içinde kullanarak font boyutu, boşluk veya renk gibi değerleri de türetebilirsiniz. Firefox 155 ve Safari 27, sonucun 0–1 aralığına sıkıştırılmasını kapatan no-clamp seçeneğini de destekliyor; efektin tanımlı sınırların ötesinde de ölçeklenmeye devam etmesini istediğiniz durumlar için kullanışlı.

alpha(): Rengin sadece saydamlığını değiştirmek

Tasarım sistemlerinde sık karşılaşılan bir ihtiyaç: marka renginin yarı saydam bir versiyonu. Bugüne kadar bunun için ya ayrı bir değişken tanımlıyor ya da daha uzun göreli renk sözdizimine başvuruyorduk. alpha() yalnızca alfa kanalını değiştiriyor, rengin kendisini ve renk uzayını koruyor:

.overlay {
  background-color: alpha(from var(--brand) / 50%);
}

Küçük bir özellik gibi görünse de değişken sayısını azaltıp tema dosyalarını sadeleştirdiği için günlük işte hissedilir bir fark yaratıyor.

revert-rule: Kaskadı tek bir kural kadar geri sarmak

CSS'te zaten revert (tarayıcının varsayılanına dön) ve revert-layer (bir önceki katmana dön) vardı. revert-rule daha ince bir araç: bir özelliği, içinde bulunduğu kural hiç yazılmamış gibi davranacak şekilde geri alıyor. Böylece bir kuraldaki diğer bildirimleri koruyup yalnızca birini etkisiz hale getirebiliyorsunuz.

WebKit ekibi bunun özellikle bileşen kütüphaneleri ve tasarım sistemleri için faydalı olduğunu vurguluyor. Bir bileşeni özelleştiren kullanıcı, kütüphanenin hangi değeri ezeceğini tahmin etmeden "bu satırı yok say" diyebiliyor.

light-dark() artık görselleri de kabul ediyor

light-dark() fonksiyonu açık ve koyu tema için iki değeri tek satırda yazmayı sağlıyordu, ancak sadece renklerle sınırlıydı. Artık url() ve gradyanlar gibi <image> değerleri de alabiliyor:

.hero {
  background-image: light-dark(url(day.png), url(night.png));
}

Koyu tema için ayrı bir prefers-color-scheme bloğu açma ihtiyacı bir adım daha azalıyor.

overflow-anchor: Kayan içerik sorununa çözüm

Scroll anchoring aslında Chrome'da ve Firefox'ta yıllardır vardı; eksik halka Safari'ydi. Sayfanın üst kısmına sonradan reklam, görsel veya yorum yüklendiğinde okuduğunuz metnin aşağı kaymasını tarayıcı kendisi engelliyor. Varsayılan değer auto; belirli bir öğenin çapa olarak kullanılmasını istemiyorsanız overflow-anchor: none yazmanız yeterli. Bu özelliğin Safari'ye gelmesi, özellikle mobil okurlarda kullanıcı deneyimini ve Cumulative Layout Shift (CLS) gibi metrikleri doğrudan etkileyebilir.

font-width: font-stretch'in yeni adı

CSS Fonts 4 spesifikasyonu, dar ve geniş yazı tipi kesimlerini seçmek için kullanılan font-stretch özelliğinin kanonik adını font-width olarak belirledi. Eski ad geriye dönük uyumluluk için çalışmaya devam ediyor; yani mevcut kodunuzu değiştirmeniz gerekmiyor, ancak yeni kodda font-width tercih etmek mantıklı.

Listede olmayan ama göz atmaya değer olanlar

Firefox 155 notlarında Baseline'a girmeyen iki ilginç başlık daha var:

• attr() her özellikte: Firefox artık attr() fonksiyonunu yalnızca content içinde değil, her CSS özelliğinde ve tip belirterek kullanmaya izin veriyor (width: attr(data-size px); gibi).
• Promise.allKeyed(): Promise.all()'un nesne alan versiyonu. Sonuçlara dizi indeksiyle değil isimle erişiyorsunuz.

const { user, posts } = await Promise.allKeyed({
  user: fetchUser(),
  posts: fetchPosts(),
});

Bunlar henüz tüm tarayıcılarda değil, o yüzden şimdilik deney amaçlı görmek daha doğru.

Pratikte ne yapmalı?

"Newly available" yeşil ışık ama sınırsız değil. Safari güncellemeleri çoğunlukla işletim sistemi güncellemelerine bağlı olduğu için, iOS'u güncellemeyen kullanıcılar bir süre daha eski sürümde kalacak. Önerim şu:

1. Aşamalı iyileştirme yapın. Özellik yoksa sayfa bozulmamalı, sadece daha sade görünmeli. Önce eski yöntemi, ardından yeni değeri yazmak çoğu durumda yeterli; tarayıcı anlamadığı satırı atlar.
2. Gerekirse @supports kullanın:

.overlay { background-color: rgb(0 80 200 / 50%); }

@supports (color: alpha(from red / 50%)) {
  .overlay { background-color: alpha(from var(--brand) / 50%); }
}

3. Kendi analitiğinize bakın. Kitlenizin büyük kısmı güncel tarayıcı kullanıyorsa bu özellikleri yeni bileşenlerde doğrudan varsayılan yapabilirsiniz.
4. Bağımlılıklarınızı gözden geçirin. Akışkan tipografi için kullandığınız bir yardımcı fonksiyon veya renk manipülasyonu için eklediğiniz bir Sass mixin'i, birkaç ay içinde tek satırlık yerel CSS'e dönüşebilir.

Sonuç

Bu ayın değişiklikleri tek başına devrim niteliğinde değil. Ama birlikte bakıldığında yön net: tasarım sistemlerinde tekrar eden işler (akışkan değerler, saydam renk türevleri, tema bazlı görseller, kural bazlı geri alma) önişlemcilerden ve JavaScript'ten çıkıp tarayıcının kendisine taşınıyor. Daha az bağımlılık, daha küçük paket ve daha okunabilir stil dosyaları demek bu. Yeni bir bileşen yazarken bu özelliklerden birini denemek için iyi bir zaman.