Interop 2025: web platformunda iyileştirmelerin devam ettiği bir yıl

Yayınlanma tarihi: 13 Şubat 2025

Interop 2024'ün büyük başarısından sonra proje, 2025'e yönelik yeni bir odak alanı grubuyla bugün geri döndü. Bu yıl gönderilen tüm önerileri dahil edemesek de nihai liste CSS'den performansla ilgili özelliklere kadar web platformunu kapsamaktadır.

2025'e odaklanan alanlar

  • Sabitleme konumlandırması
  • backdrop-filter
  • Önemli Web Verileri
  • <details> öğesi
  • Düzen
  • Modüller
  • Navigation API
  • İşaretçi ve fare etkinlikleri
  • Mutasyon etkinliklerini kaldırma
  • @scope
  • scrollend etkinlik
  • Storage Access API
  • text-decoration
  • URLPattern
  • View Transition API
  • WebAssembly
  • Web uyumluluğu
  • WebRTC
  • Yazma modları

Ayrıca, önceki yıllarda olduğu gibi, incelenmesi gereken bir dizi alan vardır. Bunlar, odak alanı olarak dahil etmek için yeterli bilgi veya testimizin olmadığı ancak bu alanları dahil edebileceğimiz bir aşamaya getirmek için bazı çalışmalar yapılması gerektiğini düşündüğümüz alanlar.

  • Erişilebilirlik testi
  • Gamepad API testi
  • Mobil testi
  • Gizlilik testi
  • WebVTT

Bu yılki projenin platforma getireceği tüm özellikler ve iyileştirmeler bizi heyecanlandırıyor. Geçen yıl olduğu gibi, proje bir dizi özelliği Baseline'da yeni olarak kullanıma sunacak. Bu yayında, listedeki özelliklerden bazıları hakkında daha fazla bilgi ve daha fazla bilgi edinebileceğiniz bağlantılar paylaşılmaktadır.

Gelişmeleri wpt.fyi/interop-2025 adresindeki Interop 2025 kontrol panelinden takip edebilirsiniz. Yeni kullanıma sunulan özellikler, webstatus.dev adresindeki Baseline 2025 listesinde de gösterilir.

Projenin başlangıcındaki puanlar: Interop:33, Investigations:0, Chrome Canary:91, Edge Dev:88, Firefox Nightly:52, Safari Technology Preview:55.
Interop 2025 kontrol paneli (13 Şubat 2025 itibarıyla).

CSS ve kullanıcı arayüzü

Interop 2025'e dahil edilen özelliklerden bazıları, CSS'nin Durumu 2024 anketinde önemli olarak işaretlediğiniz özelliklerdir. Bu araçlar, daha güzel ve daha yüksek performanslı kullanıcı deneyimleri oluşturmanıza yardımcı olur.

Sabitleme konumlandırması

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

Bu özellik, konumlandırılmış bir öğeyi bir ankara sabitlemenize olanak tanır. Özellikle pop-up'ları görüntülerken kullanışlıdır.

Konumlandırılmış bir öğe içeren bir ankraj.

Bu özelliği Baseline'a dahil etmek, üçüncü taraf kitaplıklarına gerek kalmadan kullanıcı arayüzleri oluşturmayı çok daha kolay hale getirecektir. Daha fazla bilgi için sabitleme konumlandırma belgelerimizi inceleyin ve MDN'deki CSS sabitleme konumlandırma bölümünü inceleyin.

Aynı doküman görünümünde geçişler

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

Bu yıla görünüm geçişleri (özellikle aynı doküman görünüm geçişleri) ve view-transition-class CSS özelliği de eklendi.

Tek sayfalık uygulamalar için aynı belgedeki görüntü geçişleri bölümünde ve görüntü geçişleriyle ilgili MDN dokümanlarında görüntü geçişleri hakkında daha fazla bilgi edinin.

backdrop-filter mülkü

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 18.

Source

backdrop-filter mülkü, Eylül 2024'ten beri Temel Yeni olarak kullanılabilir. Bu sayede, içeriğinizin arkasında efektler oluşturabilirsiniz. Örneğin, yalnızca bir grafik uygulamasında kullanılabileceğini düşündüğünüz bulanıklık efektleri oluşturmak veya efektler uygulamak için.

Çoğunlukla birlikte çalışabilir olmasına rağmen, backdrop-filter ile ilgili başarısız testlerden bu uygulamalarda hata ve sorunlar olduğunu görebilirsiniz. Bu sorunlar herkes için sorun oluşturmasa da çoğunuzun bu sorunlarla karşılaştığını biliyoruz. Bu özelliğin gerçekten iyi çalışmasını sağlamak için elimizden geleni yapacağız.

<details> öğesi

<details> öğesi, ek içeriği göstermek için genişletilebilen bir açıklama widget'ıdır. <details> öğesinin kendisi Temel Geniş kapsamlı olarak kullanılabilir. Ancak daha yakın zamanda eklenen ve <details>'u daha kullanışlı hale getiren çeşitli ilgili özellikler de vardır.

  • ::marker ve ::details-content CSS sözde öğeleri.
  • İçeriği açmak/kapatmak için display yerine content-visibility kullanmayın.
  • Sayfada bul eşleşmeleriyle <details> öğesini otomatik olarak genişletme.
  • Tarayıcıda sayfa içinde arama özelliği kullanılarak bulunana veya bir URL parçasına giderek doğrudan yönlendirilene kadar bir öğeyi gizleyen hidden="until-found" özelliği.

CSS @scope at-kuralı

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: behind a flag.
  • Safari: 17.4.

Source

@scope at-kuralı, seçicilerinizi DOM'un bir alt ağacına göre kapsamlandırmanıza veya hatta ağaçtaki bir üst ve alt sınır arasında seçim yapmanıza olanak tanır. Örneğin, aşağıdaki CSS yalnızca .card sınıfına sahip bir öğenin içindeki <img> öğelerini seçer.

@scope (.card) {
  img {
    border-color: green;
  }
}

Sonraki örnekte üst ve alt sınır kullanılmıştır. <img> öğesi yalnızca .card sınıfına sahip öğe ile .card__content sınıfına sahip öğenin dışındaysa seçilir.

@scope (.card) to (.card__content) {
  img {
    border-color: green;
  }
}

@scope değerini nasıl kullanabileceğinize dair daha fazla örneği CSS @scopeat-kuralı ile seçicilerinizin erişimini sınırlama başlıklı makalede ve @scopeMDN'deki dokümanlar bölümünde bulabilirsiniz.

scrollend etkinliği

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari: not supported.

Source

scrollend etkinliği olmadan, kaydırma işleminin tamamlandığını algılamanın güvenilir bir yolu yoktur. En iyi seçeneğiniz, kaydırma işleminin bir süreliğine durmuş olup olmadığını kontrol etmek için setTimeout() simgesini kullanmaktır. Bu, kaydırma sona erdi etkinliği yerine kaydırma duraklatıldı etkinliği gibi bir etkinlik oluşturur.

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

scrollend etkinliği sayesinde tarayıcı, tüm bu zor değerlendirmeleri sizin için yapar.

document.onscrollend = event => {
  // ...
}

Daha fazla örneği Scrollend, yeni bir JavaScript etkinliği ve scrollend için MDN dokümanlarında bulabilirsiniz.

text-decoration mülkü

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

text-decoration özelliği, text-decoration-line, text-decoration-color, text-decoration-style ve text-decoration-thickness için kısaltmadır. Geniş bir kullanım alanına sahip olduğu kabul edilir ancak Safari'de yalnızca text-decoration-line ön ek içermeyen kısayol mülkü çalışır. Bu sorun 2025'te ele alınacaktır.

Yazma modları

CSS writing-mode mülkünün birçok olası değeri vardır. Bunların çoğu, dikey olarak görüntülenen komut dosyalarını düzenlemek için tasarlanmıştır. Ancak bazen, dil desteği nedeniyle değil de tasarımın bir parçası olarak metni dikey olarak yerleştirmek isteyebilirsiniz. sideways-lr ve sideways-rl değerleri bu amaç için tasarlanmıştır ancak tarayıcı uyumluluğu düşüktür. Bu sorun 2025'te düzeltilecektir.

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

Ayrıca mantıksal CSS özellikleri overflow-inline ve overflow-block de dahildir. Bu seçenekler, yazma modundan bağımsız olarak, içerik kutuları taştığında ne olacağını kontrol etmenizi sağlar.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 69.
  • Safari: not supported.

Source

Önemli Web Verileri

Web Verileri, sitenizin sunduğu deneyimi ölçmenize ve siteyi geliştirme fırsatlarını saptayabilmenize yardımcı olabilir. Web Vitals girişimi, durumu basitleştirmeyi ve sitelerin en önemli metriklere (Core Web Vitals) odaklanmasına yardımcı olmayı amaçlar.

Interop 2025, LargestContentfulPaint API ve Event Timing API'yi tarayıcılarda uygulayarak Largest Contentful Paint (LCP) ve Interaction to Next Paint (INP) metriklerini içerir. Cumulative Layout Shift (CLS) metriği kapsamda değildir.

LCP API

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: not supported.

Source

Event Timing API (INP için)

Browser Support

  • Chrome: 96.
  • Edge: 96.
  • Firefox: not supported.
  • Safari: not supported.

Source

WebAssembly (Wasm)

WebAssembly API, taşınabilir bir ikili talimat biçimi olan WebAssembly kodunu yüklemenize olanak tanır. Tüm sunucu gereksinimleri dahil olmak üzere blog uygulamasının tamamını tarayıcıda çalıştırma gibi işlemleri yapmanıza olanak tanır.

Bu yıl, aşağıdaki özelliklere odaklanacağız:

  • JavaScript dize yerleşik işlevleri: WebAssembly yerleşik dize işlevlerinin JavaScript dize API'sinin bir alt kümesini yansıtmasını sağlamak için JavaScript yapıştırma kodu olmadan çağrılabilir hale getirilir.
  • Değiştirilebilir tampon entegrasyonu: WebAssembly'i, değiştirilebilir tampon kullanan JavaScript koduna entegre etmek için.

Özellik kaldırma işlemleri

Bu yıl proje, platformdan kaldırma işlemini de içeriyor. Mutasyon etkinliklerinin desteği sonlandırıldı ve çok daha yüksek performanslı ve geniş kapsamlı olarak sunulan Mutasyon Gözlemcisi API ile değiştirildi. Chrome, bu etkinlikleri Chrome 126'da kaldırdı ve bu etkinliklerin tüm tarayıcılardan kaldırılması üzerinde yoğunlaşıyoruz.

Geçmişi ve bu etkinliklerin neden kaldırıldığını anlamak için Mutasyon etkinlikleri Chrome'dan kaldırılacak başlıklı makaleyi okuyun.

Daha fazla bilgi

Özelliklerin tam listesinin açıklamalarını projenin README dosyasında bulabilirsiniz. Ayrıca, Interop 2025 üzerinde çalışan diğer şirketlerin gönderilerini de okuyun.