"CSS4" Yok: CSS Snapshot'ları, Baseline, Interop ve 2023–2026'da Gelenler

Sürüm notu: Bu yazı W3C'nin (World Wide Web Consortium; web standartlarını yayınlayan kuruluş) CSS Snapshot 2025 belgesine ve Baseline'ın Kasım 2026 durumuna (web-features 3.46) göre yazıldı; örnekler Chrome 158 ve WebKit 27.2 (Playwright 1.65), Angular 22.2 ve TypeScript 6.0 ile denenmiştir, Firefox desteği web-features verisinden alınmıştır.

Önce Tahmin Et

Sitedeki serilerin ortak örnek uygulaması Bookstore (bir online kitapçı) için Angular istemcisi bookstore-web'in global stil dosyasına, serinin nesting yazısında öğrendiğimiz gibi iç içe bir kural ekledim:

/* uygulamanın header'ı, native nesting ile yazıldı: iç içe kalıp kalmayacağına build hedefi karar verir */
app-root > header {
  padding: 1rem;
  border-block-end: 1px solid #e5e7eb;

  & a {
    font-weight: 700;
  }
}

Native nesting Aralık 2023'ten beri Baseline ve Haziran 2026'dan beri widely available; bu serinin bütün örneklerinde tarayıcıya olduğu gibi gitti. ng build'den sonra dist klasöründeki CSS dosyasında bu kural hâlâ iç içe mi, yoksa build onu düz iki kurala mı çevirdi?

Serinin son yazısında geriye çekilip büyük resme bakıyoruz. CSS3 (CSS 2.1'den sonra module'lere bölünen ilk dalgaya verilen isim) bu serinin adında da geçiyor, ama CSS'in bir sürüm numarası yok; CSS4 (CSS'in 4. sürümü sanılan, resmî olmayan bir etiket) diye bir şey de çıkmayacak. Bu yazıda CSS'in nasıl ilerlediğini (seviyeler, module'ler, Snapshot'lar), bir özelliğin "kullanılabilir" olduğuna nasıl karar verildiğini (Baseline ve Interop), 2023–2026 arasında gelenlerin kronolojisini ve bu kararları kendi projenin build araçlarıyla nasıl hizalayacağını işliyoruz. Tahmin sorusunun cevabı son bölümlerde.

Seviyeler, Module'ler ve CSS Snapshot'ları

CSS 1 ve CSS 2 tek parça spesifikasyonlardı; CSS 2.1 ikinci seviyenin son hali oldu. Sonrasında CSS Working Group dili tek bir belgede büyütmek yerine module'lere böldü: Selectors, Color, Cascade, Grid, Flexbox, Values and Units ve onlarcası. "CSS3" bu bölünmenin ilk dalgasına verilen isim. Bundan sonra her module kendi seviyesini kendi hızında artırıyor. Bu seride gördüklerimiz bunun iyi bir örneği: :has() Selectors Level 4'ten, @layer Cascade Level 5'ten, @scope Cascade Level 6'dan, oklch() Color Level 4'ten, color-mix() ve relative color Color Level 5'ten geliyor; Grid Level 2 subgrid'i, Conditional Rules Level 5 container query'leri getirdi. Anchor positioning, scroll-driven animation ve nesting ise henüz ilk seviyelerindeki yeni module'ler.

Yani CSS'in tamamının bir sonraki seviyesi yok. W3C'nin CSS Snapshot 2025 belgesi bunu tek cümleyle söylüyor: "There is no CSS Level 4." Module'ler 4. ya da 5. seviyeye çıkabiliyor ama dilin kendisinin seviyesi artık yok. İş ilanında "CSS4" görürsen, bu genellikle "son birkaç yılın modern CSS'i" anlamına gelen gayriresmî bir etiket.

Tek bir sürüm numarası olmayınca "CSS'in bugünkü hali nedir?" sorusuna CSS Snapshot'ları cevap veriyor. CSS Working Group belli aralıklarla, o an kararlı sayılan spesifikasyonları bir listede topluyor; en yenisi Eylül 2025 tarihli CSS Snapshot 2025, bir W3C Group Note'u. Liste spesifikasyonları kararlılıklarına göre gruplara ayırıyor: resmî tanımı oluşturanlar, büyük ölçüde kararlı ama Recommendation olmamış olanlar, tasarımı bitmiş ama az uygulama deneyimi olanlar, yaygın kullanılan ama ayrıntıları hâlâ tam belirlenmemiş olanlar. Önemli ayrıntı: Snapshot'a girmek tarayıcı desteği anlamına gelmiyor. Belge esas olarak tarayıcı geliştiricileri için. Bir geliştirici olarak "bunu bugün kullanabilir miyim?" sorusunun cevabı başka bir yerden geliyor.

Baseline: Newly ve Widely Available

Bu serinin her yazısında Baseline tarihleri verdik. Baseline, bir web özelliğinin çekirdek tarayıcı setinin tamamında desteklenip desteklenmediğini söyleyen bir etiket. Çekirdek set Chrome (masaüstü ve Android), Edge, Firefox (masaüstü ve Android) ve Safari (macOS ve iOS). Bir özellik bu tarayıcıların son sürümlerinin hepsinde desteklenince "newly available" oluyor; bu tarihten 30 ay sonra da "widely available". Ondan önceki durumun adı "limited availability". Baseline'ı Chrome ekibi başlattı; bugün W3C'nin WebDX Community Group'u tanımlıyor ve veriyi web-features npm paketi olarak yayınlıyor.

Bu yazının snapshot'ına web-features'ı bir devDependency olarak ekledim ve serinin kullandığı özelliklerin durumunu basan küçük bir script yazdım:

import { features } from 'web-features';

// bu serinin kullandığı özellikler, :has()'ten anchor positioning'e, artı henüz ufukta olanlar
const ids = [
    'cascade-layers', 'has', 'nesting', 'container-queries', 'subgrid', 'media-query-range-syntax', 'color-mix', 'oklab',
    'linear-easing', 'registered-custom-properties', 'starting-style', 'transition-behavior', 'light-dark', 'relative-color',
    'popover', 'view-transitions', 'scrollbar-color', 'invoker-commands', 'anchor-positioning', 'shape-function', 'scope',
    'contrast-color', 'container-name-queries', 'container-style-queries', 'field-sizing', 'sibling-count',
    'progress-function', 'alpha', 'scroll-driven-animations',
    'if', 'function', 'random-function', 'customizable-select', 'cross-document-view-transitions', 'display-animation',
    'grid-lanes', 'interest-invokers',
];

const browsers = support => Object.entries(support)
    .filter(([browser]) => ['chrome', 'firefox', 'safari'].includes(browser))
    .map(([browser, version]) => `${browser} ${version}`).join(', ') || 'no browser data';

const rows = ids.map(id => ({ id, ...features[id] }));
const baseline = rows.filter(f => f.status.baseline).sort((a, b) => a.status.baseline_low_date.localeCompare(b.status.baseline_low_date));
const limited = rows.filter(f => !f.status.baseline);

for (const f of baseline) {
    const level = f.status.baseline === 'high' ? `widely ${f.status.baseline_high_date}` : 'newly';
    console.log(`${f.status.baseline_low_date}  ${f.id.padEnd(30)} ${level}`);
}
console.log('--- not Baseline (November 2026)');
for (const f of limited) {
    // özelliğin uyumluluk kayıtlarından kaçı tek başına Baseline
    const keys = Object.values(f.status.by_compat_key ?? {});
    const ready = keys.filter(k => k.baseline).length;
    console.log(`${f.id.padEnd(32)} ${browsers(f.status.support).padEnd(38)} keys Baseline ${ready}/${keys.length}`);
}

node scripts/16-baseline.mjs

2022-03-14  cascade-layers                 widely 2024-09-14
2023-02-14  container-queries              widely 2025-08-14
2023-03-27  media-query-range-syntax       widely 2025-09-27
2023-05-09  color-mix                      widely 2025-11-09
2023-05-09  oklab                          widely 2025-11-09
2023-09-15  subgrid                        widely 2026-03-15
2023-12-11  nesting                        widely 2026-06-11
2023-12-11  linear-easing                  widely 2026-06-11
2023-12-19  has                            widely 2026-06-19
2024-05-13  light-dark                     newly
2024-07-09  registered-custom-properties   newly
2024-08-06  starting-style                 newly
2024-08-06  transition-behavior            newly
2024-09-16  relative-color                 newly
2025-01-27  popover                        newly
2025-10-14  view-transitions               newly
2025-12-12  scrollbar-color                newly
2025-12-12  invoker-commands               newly
2026-02-24  shape-function                 newly
2026-03-24  scope                          newly
2026-04-10  contrast-color                 newly
2026-05-07  container-name-queries         newly
2026-05-19  container-style-queries        newly
2026-06-16  field-sizing                   newly
2026-08-18  sibling-count                  newly
2026-09-01  progress-function              newly
2026-09-14  alpha                          newly
2026-10-27  scroll-driven-animations       newly
--- not Baseline (November 2026)
anchor-positioning               chrome 157, safari 27                  keys Baseline 323/325
if                               chrome 137                             keys Baseline 0/1
function                         chrome 139                             keys Baseline 0/12
random-function                  no browser data                        keys Baseline 0/7
customizable-select              chrome 135, safari 27                  keys Baseline 0/5
cross-document-view-transitions  chrome 126, safari 18.2                keys Baseline 0/4
display-animation                chrome 117, safari 18                  keys Baseline 0/4
grid-lanes                       safari 27.2                            keys Baseline 0/5
interest-invokers                chrome 149                             keys Baseline 0/22

2023–2026 Kronolojisi ve Henüz Baseline Olmayanlar

Listenin üst yarısı, bu serinin konularının sırası değil ama hikâyesi. 2023 modern CSS için büyük yıl: container query'ler Şubat'ta, oklch() ve color-mix() Mayıs'ta, subgrid Eylül'de, nesting ve linear() Aralık'ta, :has() yılın son günlerinde Baseline oldu. Bunların hepsi bugün widely available: "widely" kolonundaki tarihlerin hepsi geçmişte. 2024'te light-dark(), @property, @starting-style ve relative color geldi; 30 aylık eşik için 2026 sonunu ve 2027'yi bekliyorlar. 2025'te popover, same-document view transition'lar, scrollbar-color ve invoker commands. 2026'nın listesi en uzunu: Ocak'ta anchor positioning'in çekirdeği, Şubat'ta shape(), Mart'ta @scope, Nisan'da contrast-color(), Mayıs'ta name-only ve style container query'ler, Haziran'da field-sizing, Ağustos'ta sibling-index() ve sibling-count(), Eylül'de progress() ve alpha(), Ekim'in sonunda scroll-driven animation'lar.

Alt yarı, Kasım 2026'da Baseline olmayanlar. if() ve @function yalnız Chrome'da; serinin renk ve matematik yazısında ikisini de @supports arkasında denedik. random() için web-features 3.46'da henüz tarayıcı verisi yok; o yazıda sürüm notlarından Safari 26.2 ve Chrome 156 olarak aktarmıştık. Customizable select (appearance: base-select) Chrome ve Safari 27'de. Cross-document view transition ve display'in transition'ı Chrome ile Safari'de var, Firefox'ta yok; serinin son iki yazısında ikisini de progressive enhancement olarak kullandık. Masonry tartışmasının sonucu olan display: grid-lanes yalnız Safari 27.2'de. Hover'a bağlı popover'lar için interestfor yalnız Chrome'da.

Listenin ilk satırı ise ayrı bir açıklama istiyor: anchor positioning web-features'ta "limited" görünüyor, ama 325 tarayıcı uyumluluğu kaydının 323'ü Baseline. Bir önceki yazıda ayrıntısıyla anlattığımız gibi, iki kayıt position-visibility değerlerinin yeniden adlandırılmasından geliyor. Script'in "keys Baseline" kolonunu bu yüzden ekledim: bir özelliğin durumu bütün kayıtlarının en zayıfı kadar, ve neredeyse tamamı hazır bir özellik ile hiç başlamamış bir özellik aynı "limited" etiketini taşıyabiliyor. Etiketin arkasındaki ayrıntıya bakmadan "kullanamayız" deme.

Interop: Özellikler Nasıl Baseline Oluyor

Bir özelliğin bütün motorlara aynı davranışla gelmesi kendiliğinden olmuyor. Interop, tarayıcı motorlarına katkı veren şirketlerin her yıl birlikte seçtiği odak alanları üzerinde çalıştığı bir süreç; 2026'nın katılımcıları Apple, Google, Igalia, Microsoft ve Mozilla. Odak alanları geliştiricilerden gelen önerilerden, State of CSS ve State of HTML anketlerinde en çok şikâyet edilen uyumsuzluklardan seçiliyor. Her alan bir web-platform-tests (WPT; tarayıcıların ortak test paketi) test kümesine bağlanıyor ve motorların bu testlerdeki geçme oranları yıl boyunca herkese açık bir panoda izleniyor.

Interop 2026'nın Şubat'ta açıklanan 20 odak alanının çoğu bu serinin konuları: anchor positioning (2025'ten devam ediyor, yalnız 2025'in testleriyle), container style query'ler, dialog ve popover'lar, scroll-driven animation'lar, view transition'lar (cross-document geçişler dahil), contrast-color(), shape(), attr() ve zoom. Bu listeyi takip etmek, bir sonraki yılın Baseline adaylarını önceden görmenin en kolay yolu: scroll-driven animation'lar ve container style query'ler bu yıl Interop'taydı ve bu yıl Baseline oldu.

@supports: Tarayıcı Ne Anlıyor, Ne Yapıyor

Baseline sana bir özelliğin genel durumunu söyler; sayfanın çalıştığı tarayıcıda o anda ne olduğunu ise @supports söyler. Bu seride çoğu yeni özelliği onun arkasına koyduk. Lab'de sık kullanılan biçimleri topladım:

/* 1) property ve değer: bu declaration anlaşılıyor mu? */
@supports (position-area: block-end) {
    #declaration { color: rgb(22, 163, 74); }
}

/* 2) selector(): bu selector anlaşılıyor mu? */
@supports selector(:has(> img)) {
    #selector { color: rgb(22, 163, 74); }
}

/* 3) not, and, or: yedek dal açıkça yazılır */
@supports not (animation-timeline: scroll()) {
    #negation { color: rgb(185, 28, 28); }
}
@supports (display: grid-lanes) or (grid-template-rows: masonry) {
    #either { color: rgb(22, 163, 74); }
}

/* 4) at-rule(): bu at-rule anlaşılıyor mu? (kendisi Baseline değil) */
@supports at-rule(@scope) {
    #at-rule { color: rgb(22, 163, 74); }
}

node scripts/16-supports.mjs

--- chromium
blocks applied: declaration yes, selector yes, negation no, either no, at-rule yes
position-area: block-end                         true
animation-timeline: view()                       true
transition-behavior: allow-discrete              true
overlay: auto                                    true
position-visibility: anchors-visible             true
display: grid-lanes                              false
width: if(media(width > 1px): 1px; else: 2px)    true
selector(:open)                                  true
at-rule(@starting-style)                         true
--- webkit
blocks applied: declaration yes, selector yes, negation no, either yes, at-rule yes
position-area: block-end                         true
animation-timeline: view()                       true
transition-behavior: allow-discrete              true
overlay: auto                                    false
position-visibility: anchors-visible             true
display: grid-lanes                              true
width: if(media(width > 1px): 1px; else: 2px)    true
selector(:open)                                  true
at-rule(@starting-style)                         true

@supports bir declaration'ı, selector() ile bir selector'ü, at-rule() ile bir at-rule'u test ediyor; not, and ve or ile birleştirilebiliyor. at-rule()'un kendisi web-features'a göre Baseline değil (Chrome 148, Firefox 157); Playwright'ın WebKit'i onu desteklese de yayınlanmış Safari için bu verisi yok. Desteklemeyen tarayıcı o bloğu yok sayacağı için yine güvenli.

Ama çıktının asıl dersi ortadaki satırlarda. @supports bir şeyin parse edilip edilemediğini test eder, nasıl davrandığını değil. WebKit transition-behavior: allow-discrete için true diyor; ama serinin animasyon yazısında WebKit'te dialog'un kapanış animasyonunun çalışmadığını ölçtük. Aynı satırlarda bir ipucu da var: kapanış için gereken overlay WebKit'te false. position-visibility: anchors-visible iki motorda da true, ama bir önceki yazıda WebKit'in gizlenen tip'e hâlâ tıklama gönderdiğini gördük. Davranışı test etmek için CSS'e named-feature() ekleniyor; web-features'a göre şimdilik yalnız Chrome 150'de. O gelene kadar davranışa güvenmen gereken yerde gerçek bir tarayıcıda ölç; bu serinin bütün script'leri bunun için var.

Projen İçin Bir Baseline Hedefi: Angular, Vite ve Tailwind

Build araçları da bir tarayıcı hedefiyle çalışıyor ve yazdığın CSS'i bu hedefe göre dönüştürüyor. Bunu görmek için Angular build'inin kullandığı browserslist ile birkaç Baseline sorgusunun hangi tarayıcı sürümlerine karşılık geldiğini basan bir script yazdım; script son build'in çıktısındaki header kuralını da gösteriyor:

cd angular
npx ng build
cd ..
node scripts/16-targets.mjs

Angular 22.2 default     chrome 119, edge 119, firefox 119, ios_saf 17, safari 17
Vite 8 default           chrome 111, edge 111, firefox 114, ios_saf 16.4, safari 16.4
widely available today   chrome 124, edge 124, firefox 126, ios_saf 17.5, safari 17.5
newly available          chrome 153, edge 153, firefox 159, ios_saf 27, safari 27
styles-4KJB3OTK.css: app-root>header{padding:1rem;border-block-end:1px solid #e5e7eb} app-root>header a{font-weight:700}

Angular 22.2'nin build paketi varsayılan hedef olarak baseline widely available on 2026-05-07 sorgusunu kullanıyor (bu tarih @angular/build'in kaynağında sabit). Bu, Chrome ve Firefox 119, Safari 17 demek. Nesting'in Baseline olduğu sürümler ise Chrome 120 ve Safari 17.2. Tahmin sorusunun cevabı çıktının son satırında: build kuralı açtı, app-root>header ve app-root>header a diye iki düz kurala çevirdi. Hedefin en eski tarayıcısı nesting'i anlamadığı için build bunu senin yerine yapıyor. Aynı build, ayrı bir denemede light-dark()'a ve oklch()'ye dokunmadı: syntax'ı dönüştürülebilen özellikler dönüştürülüyor, yeni bir fonksiyonun davranışı ise taklit edilemediği için olduğu gibi bırakılıyor. Hedefin dışında kalan tarayıcılar için @supports ve yedek değerler hâlâ senin işin.

Vite 8'in varsayılan build.target'ı baseline-widely-available; Vite dokümanına göre her ana sürüm için sabit bir tarih kullanıyor, Vite 8 için 2026-01-01, yani Chrome 111, Firefox 114 ve Safari 16.4. Tailwind CSS v4'ün dokümanı ise Chrome 111, Safari 16.4 ve Firefox 128'i en düşük sürümler olarak veriyor. Üç araç da aynı fikirde: varsayılan hedef, birkaç yıl geride kalan bir widely available çizgisi.

Hedefi kendin seçmek de mümkün. Angular projesinin köküne bir .browserslistrc koydum:

baseline widely available on 2026-11-14

Aynı build ve script'in son satırı:

▲ [WARNING] Could not parse 1 selector in styles-TP45VFSL.css; its rule was left out of the critical CSS but still applies once the full stylesheet loads:
& a (Empty sub-selector)

styles-TP45VFSL.css: app-root>header{padding:1rem;border-block-end:1px solid #e5e7eb;& a{font-weight:700}}

Hedef Chrome 124 ve Safari 17.5'e çıkınca nesting olduğu gibi kaldı. Ama Angular build'i bir uyarı verdi: ilk ekranın CSS'ini HTML'e gömen adım (critical CSS) & a selector'ünü parse edemedi ve kuralı gömülen CSS'in dışında bıraktı; kural tam stil dosyası yüklenince yine uygulanıyor. Yani hedefi yükseltmek, zincirdeki her aracın yeni syntax'ı anladığı anlamına gelmiyor. Deneyden sonra dosyayı sildim.

Bookstore için iki seçenek var. Birincisi Angular'ın varsayılanında kalmak: hedef Angular'ın destek politikasıyla aynı, build syntax dönüşümlerini kendisi yapıyor ve bu tür uyarılar çıkmıyor; bedeli biraz daha uzun CSS ve 2024 sonrası özellikler için her yerde @supports yazmak. İkincisi hedefi "bugün widely available"a ya da analitik verine göre bir tarihe çekmek: daha az dönüşüm, daha kısa CSS; bedeli daha eski tarayıcıları bilerek dışarıda bırakmak ve araç zincirindeki her adımı yeniden test etmek. Bookstore'da varsayılanda kaldım. Sebebi kurumsal müşteriler: Kurumsal Sipariş tarafındaki okul ve kütüphanelerin bilgisayarları merkezi olarak yönetiliyor ve tarayıcıları çoğu zaman bireysel kullanıcılardan geride. Senin projende bu karar analitikteki tarayıcı dağılımına dayanmalı, bir blog yazısındaki tarihlere değil.

Üretimde Dikkat

Bir özelliği kullanıp kullanmama kararını üç soruyla veriyorum. Baseline durumu ne: widely ise doğrudan kullan, newly ise desteklemeyen tarayıcıda ne göründüğünü düşün, limited ise ayrıntısına bak. Desteklemeyen tarayıcıda sayfa bozuluyor mu, yoksa yalnız daha sade mi görünüyor: bu serideki çoğu yeni özellik ikinci gruptaydı ve @supports ile güvenle kullanıldı. Build aracım bu özelliği nasıl işliyor: dönüştürüyor mu, olduğu gibi mi bırakıyor, yoksa zincirdeki bir adımda uyarı mı veriyor.

web-features verisi her hafta güncelleniyor ve tarihler bazen geriye dönük düzeltiliyor; anchor positioning'in durumu bu yıl iki kere değişti. Ekibinde bir Baseline hedefi belirlediysen, bunu bir sürüm numarasıyla sabitlenmiş web-features ya da browserslist verisine bağla ve güncellemeyi bir bağımlılık güncellemesi gibi gözden geçir. Lint araçlarının Baseline kuralları (ör. stylelint ve ESLint eklentileri) bu kontrolü kod incelemesine taşıyabiliyor.

Sık Düşülen Tuzaklar

Birincisi, "CSS3 mü, CSS4 mü?" diye düşünmek. CSS'in sürümü yok; soru "bu özellik Baseline mı ve hedefimdeki tarayıcılarda var mı?" olmalı.

İkincisi, "limited availability" etiketini okumadan bir özelliği reddetmek. Etiket en zayıf kaydı gösterir; anchor positioning gibi neredeyse tamamı hazır bir özellik de aynı etiketi taşıyabilir.

Üçüncüsü, @supports'un true demesini özelliğin doğru çalıştığının kanıtı saymak. Parse edilmek ile beklenen davranış farklı şeyler.

Dördüncüsü, build aracının tarayıcı hedefini bilmeden CSS yazmak. Aynı kaynak dosya farklı hedeflerde farklı CSS üretir; hedefi değiştirdiğinde çıktıyı ve uyarıları kontrol et.

Küçük Bir Deneme

★☆☆ 16-baseline.mjs'teki listeye bu serinin ilk yazılarından üç özellik daha ekle (ör. logical-properties, aspect-ratio, gap; doğru id'leri web-features'ta ara) ve hangisinin ne zaman widely available olduğunu kontrol et.

★★☆ Angular projesine baseline widely available on 2025-01-01 değerli bir .browserslistrc ekle. Build'in uyarı verip vermediğine ve 16-targets.mjs'in çıktısına bak; Angular'ın kendi destek politikasının dışında kalan tarayıcılar için ne dediğini oku.

★★★ 16-baseline.mjs'i, Bookstore'un web/css klasöründeki dosyaları tarayıp içlerinde geçen property ve at-rule'ları web-features'taki özelliklere eşleyen bir araca çevir. Newly available ya da limited olan her kullanımın bir @supports bloğunun içinde olup olmadığını raporlasın.

Bu yazıyla seri bitiyor. Cascade'den anchor positioning'e kadar CSS'in "nasıl yazıldığını" gördük. Aynı CSS'i Sass ile ölçeklemek ve BEM (Block, Element, Modifier; class isimlendirme yöntemi) gibi mimari yöntemler Sass/SCSS serisinde, utility-first yaklaşım Tailwind CSS serisinde, renk, tipografi ve spacing kararlarının kendisi UI/UX Tasarım İlkeleri serisinde; bu seride kurduğumuz ölçme alışkanlığını, yani her iddiayı gerçek bir tarayıcıda doğrulamayı, o serilere de taşımanı öneririm.