Varsayılan olarak tarayıcılar arası: Modern Web Rehberi'nde Baseline yedeklerinin işleyiş şekli

Tara Agyemang

Yayınlanma tarihi: 12 Kasım 2026

Yapay zeka kodlama temsilcisinden bir ipucu veya kalıcı iletişim kutusu oluşturmasını isteyin ve yazdığı kodu yakından inceleyin. Çoğu zaman, kullanıcı aracısı tarayıcıda yerleşik olan özellikleri yeniden oluşturmak için JavaScript'i kullanır. Temsilciye daha yeni CSS veya HTML özelliklerini kullanmasını söylerseniz genellikle özellik algılamayı ve yedekleri atlar. Bu eksiklik, desteklenmeyen tarayıcıları kullanan kullanıcıların bozuk bir sayfayla karşılaşmasına neden olur.

Modern Web Rehberi, her öneriye tarayıcı uyumluluğu ekler. Her kılavuzda, modern web özellikleri Baseline destek verileri ve doğrulanmış yedek kalıplarla eşleştirilir. Bu yayında, temsilcinizin bu verileri kullanarak nasıl modern ve tarayıcılar arası kod yazdığı ele alınmaktadır.

Kodlama temsilcileri, rehberlik olmadan tarayıcı desteğini neden yanlış anlıyor?

Kodlama temsilcileri, yönlendirme olmadan kod yazmadan önce projenizin hangi tarayıcıları desteklemesi gerektiğini nadiren kontrol eder. Bunun yerine, genellikle iki uçtan birine yönelirler:

  • Eski kodun varsayılan olarak kullanılması: Model eğitim verileri eski kalıplarla doludur ve Modern Web Rehberi değerlendirmeleri, modellerin bu kalıpların çoğunu hâlâ önerdiğini göstermektedir. Temsilciler, yerleşik bir HTML veya CSS özelliğinin yapabileceği işler için genellikle karmaşık JavaScript yazar ya da harici kitaplıklar ekler.
  • Yeni özellikleri güvenlik ağı olmadan kullanma: Bir temsilciden daha yeni bir web özelliğini kullanmasını istediğinizde genellikle destekleyen tarayıcılar için kod yazar ve orada durur. Özellik algılamayı atlar ve yedekleri dışarıda bırakır. Bu da özelliği desteklemeyen tarayıcılarda sayfanın bozulmasına neden olur.

Modern Web Rehberi değerlendirme paketinden elde edilen veriler, bu boşluğun ne kadar yaygın olduğunu gösterir. Değerlendirme paketi, henüz tüm büyük tarayıcılarda çalışmayan özellikler için özellik algılama, @supports kuralları, yedekler veya koşullu polyfill'leri test eder. Yönlendirilmemiş modeller bu kontrolleri yalnızca %43 oranında geçebiliyor. Modern Web Rehberi etkinleştirildiğinde başarılı olma oranı %87'ye yükselir.

Temel veriler her öneriye nasıl rehberlik eder?

Modern Web Rehberi, bir web özelliğinin ne zaman yedeğe ihtiyaç duyduğunu belirlemek için Baseline'ı kullanır. Baseline, temel tarayıcı grubundaki (masaüstü ve mobil cihazlarda Chrome, Edge, Firefox ve Safari) desteği üç durumla izler:

  • Baseline Widely available: Özellik, en az 30 ay boyunca tüm temel tarayıcılarda çalışmıştır.
  • Baseline'da yeni kullanılabilir: Özellik, son tarayıcının destek eklediği tarihten itibaren tüm temel tarayıcılarda çalışır.
  • Sınırlı kullanılabilirlik: Özellik henüz tüm temel tarayıcılarda desteklenmiyor.

Her Modern Web Rehberi kılavuzu, web-features paketinden yerleşik Baseline durumu ve tarayıcı sürümü verilerini içerir. Kodlama temsilciniz bir kılavuz yüklediğinde, özelliğin tam destek durumunu, yayın tarihlerini ve tarayıcı sürümlerini uygulama talimatlarıyla birlikte alır. Örneğin:

Browser support for <dialog closedby>: Limited availability.
Supported by: Chrome 134 (Mar 2025), Edge 134 (Mar 2025), and Firefox 141 (Jul 2025).
Unsupported in: Safari.

Modern Web Rehberi, varsayılan olarak bu verilere dayalı iki kuralı uygular:

  • Temel yaygın olarak kullanılabilen özellikler: Temsilciniz bu özellikleri ek özellik algılama veya yedek kod olmadan doğrudan kullanır. Bu kural, kod tabanınızı yalın tutar ve gereksiz geçici çözümlerden kaçınmanızı sağlar.
  • Baseline'da yeni sunulan ve sınırlı sayıda sunulan özellikler: Bu özelliklerle ilgili kılavuzlar, doğrulanmış bir yedek strateji içerir. Temsilciniz, desteklenen yerlerde modern özelliği kullanır ve diğer tarayıcılar için temiz bir yedek sağlar.

Modern Web Rehberi'nin pratikte kullandığı dört yedek kalıp

Her web özelliğinin aynı türde bir yedekleme mekanizmasına ihtiyacı yoktur. Modern Web Rehberi, her özelliği, desteklenmeyen tarayıcılarda nasıl davrandığına bağlı olarak dört yedek yaklaşımdan biriyle eşleştirir:

Yedek desen Modern Web Rehberi'nin bu beceriyi kullandığı durumlar
Yedek kod olmadan progresif geliştirme Desteklenmeyen tarayıcıların, düzeni veya davranışı bozmadan güvenli bir şekilde yok saydığı dekoratif veya ek özellikler.
@supports kuralıyla CSS özellik algılama Daha yeni bir CSS özelliğine bağlı olan ve kısmen uygulandığında bozuk görünebilen görsel veya düzen stilleri.
Hafif özel JavaScript Eski tarayıcılarda davranışı kopyalamak için küçük, sıfır bağımlılıklı bir komut dosyası gerektiren etkileşimli HTML özellikleri veya API'ler.
Koşullu olarak yüklenen polyfill'ler Yalnızca yerel destek eksik olduğunda dinamik olarak yüklenen, incelenmiş bir polyfill gerektiren daha büyük CSS veya JavaScript özellikleri.

Yedek kod olmadan progresif geliştirme

Bazı modern özellikler, sayfanın işleyiş şeklini değiştirmeden tipografiyi, animasyonları veya sayfa yükleme hızını iyileştirir. Tarayıcı bu özellikleri tanımazsa bunları yoksayar ve sayfanın geri kalanını normal şekilde oluşturur.

Örneğin, text-wrap: balance CSS bildirimi (Baseline'da yeni kullanılabilir), başlıklardaki satır uzunluklarını eşitler.

.balanced {
  text-wrap: balance;
}

Speculation Rules API (sınırlı sayıda), sonraki sayfaları önceden getirir veya önceden işler. Desteklenmeyen tarayıcılar, <script type="speculationrules"> bloklarını ve tanınmayan CSS bildirimlerini güvenli bir şekilde yok sayar.

<script type="speculationrules">
  {
    "prefetch": [{
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

Bu davranış sayesinde temsilciniz, ek yedek kod olmadan bu özellikleri doğrudan ekleyebilir.

@supports kuralıyla CSS özellik algılama

Diğer CSS özellikleri, bir öğenin ekranda nasıl konumlandırıldığını veya stilini değiştirir. Stilin bir kısmını koşulsuz olarak uygularsanız desteklenmeyen tarayıcılar öğeyi yanlış yerde oluşturabilir.

Örneğin, sabitlenmiş kapsayıcı sorguları (container-type: anchored, sınırlı sayıda), konumlandırılmış bir ipucunun okunu, görüntü alanının kenarına yakın bir yerde döndürüldüğünde döndürmenize olanak tanır. Sabitlenmiş kapsayıcı sorgularını desteklemeyen tarayıcılarda ok, çevirme işlemini algılayamaz ve yanlış yönü gösterebilir. Modern Web Rehberi, temsilcinize ok stillerini bir @supports (container-type: anchored) kuralına sarmasını söyler. Böylece varsayılan ok yalnızca @container anchored() çevirme kuralını da destekleyen tarayıcılarda görünür.

@supports (container-type: anchored) {
  .tooltip-content::before {
    content: "▼";
    position: absolute;
    inset-block-end: 0;
  }
}

@container anchored(fallback: flip-block) {
  .tooltip-content::before {
    content: "▲";
    inset-block-start: 0;
    inset-block-end: auto;
  }
}

Hafif özel JavaScript

Etkileşimli bir HTML özelliği tüm temel tarayıcılarda desteklenmediğinde üçüncü taraf kitaplığı kullanmak gereksiz olabilir. Modern Web Rehberi, bağımsız etkileşimler için özellik kontrolünün arkasında kısa ve bağımlılık içermeyen bir JavaScript yedek çözümü sunar.

Örneğin, <dialog> öğesindeki closedby="any" özelliği (sınırlı sayıda), kullanıcıların arka planı tıklayarak kalıcı iletişim kutusunu kapatmasına olanak tanır. closedby özelliğini desteklemeyen tarayıcılar için kılavuzda, önce HTMLDialogElement.prototype nesnesini kontrol eden küçük bir tıklama dinleyicisi bulunur:

const dialog = document.querySelector('dialog');

if (!('closedBy' in HTMLDialogElement.prototype)) {
  dialog.addEventListener('click', (event) => {
    if (event.target !== dialog) return;

    const rect = dialog.getBoundingClientRect();
    const clickedInDialog =
      rect.top <= event.clientY &&
      event.clientY <= rect.top + rect.height &&
      rect.left <= event.clientX &&
      event.clientX <= rect.left + rect.width;

    if (!clickedInDialog) {
      dialog.close();
    }
  });
}

Koşullu olarak yüklenen polyfill'ler

CSS sabitleme konumu (sınırlı sayıda) veya Temporal API (sınırlı sayıda) gibi daha büyük platform özellikleri için özel bir yedek yazmak pratik değildir. Aynı zamanda, her kullanıcı için bir polyfill eklemek, özelliği zaten destekleyen tarayıcılar için ek indirme maliyeti getirir.

Bu gibi durumlarda Modern Web Rehberi, temsilcinizi önce desteği kontrol etmeye ve paketleyicinizden ya da bir CDN'den import() ifadesiyle incelenmiş bir polyfill'i dinamik olarak yüklemeye yönlendirir. Destekleyen tarayıcılar sıfır ek kod indirirken eski tarayıcılar polyfill'i isteğe bağlı olarak getirir.

if (!CSS.supports('anchor-name: --a')) {
  await import('@oddbird/css-anchor-positioning');
}

Projenizin tarayıcı desteği hedefini özelleştirme

Modern Web Rehberi, varsayılan olarak Baseline Widely Available özelliklerini yedek olmadan güvenle kullanılabilir olarak kabul eder. Baseline Yeni Kullanılabilir ve Sınırlı Kullanılabilirlik özellikleri için yedekler gerektirir.

Projenizin farklı tarayıcı gereksinimleri olabilir. Örneğin, belirli bir Baseline yılını hedefleyebilir, Electron uygulaması için derleme yapabilir veya paketleri küçük tutmak için polyfill'leri hariç tutabilirsiniz.

Projenizin AGENTS.md veya CLAUDE.md dosyasında özel bir tarayıcı destek politikası tanımlayabilirsiniz:

## Browser support policy

- Target **Baseline 2024** or earlier. Omit fallbacks and `@supports` blocks for features that reached Baseline in or before 2024.
- Allow **Baseline Newly available** features when paired with a custom fallback of 20 lines or fewer.
- Don't add polyfill dependencies. Prefer CSS `@supports` rules or built-in HTML fallbacks instead.

Her kılavuzda, her bir özelliğin Baseline durumu, yayın tarihi ve minimum tarayıcı sürümleri yer alır. Temsilciniz, kod yazmadan önce politikanızı bu uyumluluk verileriyle karşılaştırır. Bir özellik hedefinizi zaten karşılıyorsa temsilci modern kodu yazar ve yedek kodu atlar.

Hem modern yolu hem de yedek yolu test edin

Tarayıcılar arası kod yazmak işin yalnızca yarısıdır. Ayrıca hem modern kod yolunu hem de yedek yolu gerçek tarayıcılarda test etmeniz gerekir.

Tek bir tarayıcıda test yaptığınızda kodunuzun yalnızca bir dalını doğrulamış olursunuz. Örneğin, Chrome ve Firefox, yerel closedby="any" özelliğini bir <dialog> öğesinde çalıştırırken Safari, JavaScript'in dışarıda tıklama yedek özelliğini çalıştırır. İletişim kutusunu yalnızca Chrome'da incelerseniz bu yedek dinleyici testiniz sırasında hiçbir zaman çalışmaz.

Her iki kod yolunu da doğrulamak için kodlama temsilcinizi aynı anda birden fazla tarayıcı motoruna bağlayın:

Üç araç da bağlıyken temsilciniz sayfanızı tek bir iş akışında Chrome, Firefox ve Safari'de açabilir. Ardından, hem yerel özelliğin hem de yedek deneyimin beklendiği gibi çalıştığını doğrulayabilir.

Modern Web Rehberi'ni kullanmaya başlama

Modern Web Rehberi'ni projenize eklemek için proje dizininizden etkileşimli yükleyiciyi çalıştırın:

npx modern-web-guidance@latest install

Daha eski bir sürüm yüklüyse 1.0 sürümüne yükseltmek için güncelleme komutunu çalıştırın:

npx modern-web-guidance@latest update

Modern Web Rehberi'ni Claude Code, Codex, Cursor, Antigravity, GitHub Copilot, WebStorm, Kimi Code ve Grok için eklenti pazar yerlerinden de yükleyebilirsiniz.

Daha fazla bilgi edinmek için şu kaynakları inceleyin: