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.

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ı
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.
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
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ü
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
yerinecontent-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ı
@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 @scope
at-kuralı ile seçicilerinizin erişimini sınırlama başlıklı makalede ve @scope
MDN'deki dokümanlar bölümünde bulabilirsiniz.
scrollend
etkinliği
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ü
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.
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.
Ö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
Event Timing API (INP için)
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.