Web'de yenilikler

Rachel Andrew

Yayın tarihi: 20 Mayıs 2025

Google I/O 2025'te, "Web'deki yenilikler" başlıklı açılış konuşmasında Baseline ile ilgili tüm duyurular ve bu yıl Baseline'e eklenen özelliklerden bazıları paylaşıldı. Web için harika bir yıl oldu. Baseline'da bu yıl bahsedilen her şeyi ve daha fazla bilgi edinmek için tüm bağlantıları bu yayında derledik.

Web Platformu Kontrol Paneli ve web özellikleri

2024'te, web özellikleri veri kümesini kullanan Web Platformu Kontrol Paneli'nin ilk sürümünü duyurduk. Bu kontrol paneli, Baseline'e dahil olan tüm özellikleri keşfetmenize olanak tanır.

Web özellikleri verileri artık platformun tüm özelliklerinin eşlendiği eksiksiz bir veri kümesidir. Her ay Baseline'a yeni özellikler eklendikçe veriler güncellenir ve tüm bunlar kontrol panelinde gösterilir.

Kendi temel hedefinizle ilgili keşif yapmanıza yardımcı olacak araçlar

Tarayıcı desteği politikanızı, Birleşik Krallık'taki Clearleft ajansı gibi Baseline Widely available'ın sürekli değişen hedefine göre belirleyebilirsiniz. Ayrıca, Baseline yılına göre sabit bir hedef de belirleyebilirsiniz. Artık sizin için en iyi hedefi belirlemek amacıyla web özellikleri verileriyle birlikte kendi kullanıcı verilerinizi kullanabilirsiniz.

Geçen yıl I/O'da RUMvision'ın Baseline'ı ürününe entegre edeceğini duyurmuştuk. Bu entegrasyon artık kullanıma sunuldu.

Bu özellik, RUM verilerinizi kullandığı için küresel bir ortalamaya değil, bu verilere göre hangi temel yılın benimseneceğini belirlemenize yardımcı olur. Ayrıca, Baseline Widely available'ın sizin için uygun olup olmadığını görmenize de yardımcı olabilir.

Ayrıca, yeni Google Analytics Baseline Checker ile kullanıcılarınızın her bir Baseline hedefini hangi oranda desteklediğini net bir şekilde görmek için Google Analytics verilerinizi kullanabilirsiniz.

Bunlar, gerçek kullanıcı verilerinizi Baseline ile eşlemenize yardımcı olan, giderek büyüyen araç koleksiyonundaki iki araçtır.

Web DX Community Group kısa süre önce, derleme araçlarınızda neyi hedefleyeceğinize karar vermenize yardımcı olmak için farklı Baseline yıllarını ve sitelerinizde yaygın olarak kullanılabilen özellikleri destekleyen Netlify için bir uzantı yayınladı. Cloudflare'in Observatory RUM ürünü ve Contentsquare ile entegrasyonlar yakında kullanıma sunulacaktır.

Verileri kendi araçlarınızla entegre etme

Web özellikleri verileri açıktır ve kendi entegrasyonlarınız için kullanılabilir. Bu işlemi kolaylaştırmak için çalışıyoruz.

Web Platform Dashboard API'yi kullanın veya web özellikleri verilerini doğrudan npm paketinden alın.

Artık W3C WebDX Community Group'un baseline-browser-mapping modülünü kullanarak tarayıcı sürümlerini bir Baseline hedefiyle eşleyebilirsiniz. Bu modül, sunucu tarafında JavaScript ortamında veya depodan günlük olarak yenilenen JSON ya da CSV dosyaları indirilerek kullanılabilir.

Bu veriler yalnızca temel Baseline tarayıcı grubu için değil, aynı zamanda Samsung Internet, Opera, UC Browser ve Android WebView gibi alt düzey tarayıcılar için de eşlemeler içerir.

Özelliklerin, temel hedefiniz tarafından desteklenip desteklenmediğini öğrenme

Temel bilgiler artık MDN ve Can I Use sayfalarının çoğunda yer alıyor. Ayrıca Web Platform Dashboard'da, web.dev ve CSS Tricks'teki makalelerde de bulunabilir. Ancak tüm bunlar için destek kaydı oluşturmanız gerekir. Temel bilgiler, kod yazarken IDE'nizde ve kullandığınız diğer tüm araçlarda gösterilse çok daha faydalı olur.

Birçok önemli aracın artık Baseline desteğiyle birlikte geldiğini veya kolayca entegre edilebildiğini sizinle paylaşmaktan heyecan duyuyoruz.

browserslist-config-baseline

Babel ve PostCSS gibi birçok araç, hangi tarayıcıların destekleneceğini belirlemek için Browserslist'i kullanır.

Chrome ekibi, WebDX CG ve topluluk üyeleriyle birlikte browserslist-config-baseline adlı yeni bir aracın yayınlanmasına yardımcı oldu. Bu sayede, tarayıcı listesi hedeflerinizi yaygın olarak kullanılabilen veya temel yıllar gibi temel terimlerle yapılandırabilirsiniz.

Bu sayede, browserslist hedefi alan tüm araçlar artık Baseline açısından ifade edilebilir.

Daha fazla bilgiyi Use Baseline with browserslist (Baseline'ı browserslist ile kullanma) başlıklı makalede bulabilirsiniz.

Linting'de temel değer: ESLint ve Stylelint

Linting araçlarıyla Baseline kullanmak, kısa süre önce linting alanında kullanıma sunulan birkaç yeni araçla mümkün hâle geldi. Bu araçlardan ilki CSS için ESLint.

Baseline ESLint'te use-baseline kuralı vardır. Bunu tercih ettiğiniz temel hedef olarak ayarlayabilirsiniz. Bu durumda, hedefinizden daha yeni olan özellikleri kullandığınızda sizi uyarır. Bu uyarıları nasıl çözeceğinizi seçebilirsiniz: Bu özelliği temel öğelerle değiştirerek veya linter uyarısını bastırarak. Bu, örneğin aşamalı geliştirme gibi, en yeni özellikleri güvenli bir şekilde kullandığınızı bildiğinizde tamamen geçerli bir çözümdür.

Varsayılan olarak ESLint, @supports bloklarında daha yeni özellikler kullanılıyorsa uyarı vermez. Bunun nedeni, desteklenmeyen tarayıcıların bu özellikleri değerlendirmemesidir.

HTML linting ihtiyaçlarınız için html-eslint adlı bir topluluk eklentisi de mevcuttur.

Stylelint, stylelint-plugin-use-baseline adlı bir eklentiyi resmi olarak destekler. Bu kural, CSS için ESLint kuralıyla aynı şekilde çalışır ancak bunun yerine Stylelint üzerinde çalışır.

Birçok linter'ın IDE eklentileri de vardır. Bu sayede, kod yazarken dalgalı alt çizgilerle Baseline durumu hakkında anında geri bildirim alabilirsiniz.

VS Code ve JetBrains WebStorm'da Baseline

Birçok IDE, düzenleyicinizdeki bir özelliğin üzerine gelerek desteklenen tarayıcı sürümlerinin listesini görme yöntemini uzun süredir desteklemektedir.

Ancak bu özelliğin gerçekten güvenli olup olmadığını anlamak oldukça zor olabilir. Bu listede büyük tarayıcıların eksik olup olmadığını ve tarayıcı sürümünün ne kadar yeni olduğunu zihinsel olarak ayrıştırmanız gerekir.

Bu sorunu düzeltmek için milyonlarca web geliştiricisi tarafından kullanılan en popüler IDE olan VS Code ile iş ortaklığı yaparak Baseline verilerini doğrudan bu fareyle üzerine gelme kartlarına entegre ettik.

Artık bir özelliğin üzerine geldiğinizde bu özelliğin ne kadar süre boyunca temel olarak kabul edildiği veya henüz tam olarak uygulamayan büyük tarayıcıların olup olmadığı gösterilir.

Desteklenen özellikler arasında CSS özellikleri, HTML öğeleri ve HTML özellikleri yer alır. Daha fazla bilgiyi Visual Studio Code now supports Baseline (Visual Studio Code artık Baseline'ı destekliyor) başlıklı makalede bulabilirsiniz.

Bu entegrasyon sayesinde, VS Code tabanlı tüm IDE'ler de bu fareyle üzerine gelme kartlarından yararlanabilir.

Ayrıca, JetBrains'in WebStorm JavaScript ve TypeScript IDE'sine fareyle üzerine gelme kartları uyguladığını da duyurmaktan memnuniyet duyuyoruz.

Web, hiç olmadığı kadar hızlı gelişiyor

Baseline'ın, birlikte çalışabilir web'in her zamankinden daha hızlı geliştiği gerçeğinden yararlanmanıza yardımcı olacağını umuyoruz.

Google I/O 2024'ten bu yana son on iki ayda Baseline Newly'de kullanıma sunulan tüm özellikleri görmek için Web Platformu Kontrol Paneli'ni kullanabilirsiniz.

Ayrıca, Interop 2025 projesine dahil edilen ve çok yakında Baseline Newly olarak kullanıma sunulacağından emin olabileceğiniz bir dizi özellik de var. Dahil edilen tüm özellikler hakkında Interop2025: another year of web platform improvements (Interop2025: Web platformunda bir yıl daha iyileştirme) başlıklı makaleden bilgi edinebilirsiniz.

Yana doğru yazma modları

CSS writing-mode özelliği için sideways-rl ve sideways-lr değerleri, Baseline Newly Available (Yeni Kullanıma Sunulan Temel) özelliği olarak kullanıma sunuldu. Dikey yazma modunu yalnızca düzen amacıyla kullanıyorsanız yan değerler muhtemelen ulaşmanız gereken değerlerdir.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Sabitleme konumu

Chrome 125'te sabit konumlandırma kullanıma sunuldu. Örneğin, bir düğmeyle ipucu açarken bir öğenin konumunu bir sabitleme noktasına bağlamanıza olanak tanır.

Bu özellik artık Interop 2025'e dahil edildi. Bu nedenle, bu yıl Baseline'a ekleneceğini düşünüyoruz.

Core Web Vitals: LCP ve INP

LCP API

Etkinlik Zamanlaması API'si (INP için)

Web Verileri, sitenizin sunduğu deneyimi ölçmenize ve siteyi geliştirme fırsatlarını saptamanıza yardımcı olabilir. Web Vitals girişimi, ortamı basitleştirmeyi ve sitelerin en önemli metrikler olan Core Web Vitals'a odaklanmasına yardımcı olmayı amaçlar.

Interop 2025, tarayıcılarda LargestContentfulPaint API'sini ve Event Timing API'sini uygulayarak Largest Contentful Paint (LCP) ve Interaction to Next Paint (INP) metriklerini içerir.

<details> öğesinde yapılan geliştirmeler

<details> öğesinin kendisi zaten Baseline Widely kullanılabilir. <details> ile açıklama widget'larını daha kullanışlı hale getiren bir dizi özellik olduğundan Interop 2025'e dahil edildi.

<details> öğesi, <details> öğesi daraltıldığında sayfada görünür olan bölüm olan bir <summary> öğesi içerir. <summary> dışında kalan kısım, <details> öğesinin içeriğidir. Bu içerik, kullanıcı özeti tıklayana kadar gizlenir.

Interop 2025 sırasında birlikte çalışabilir hale getirilen özelliklerden biri, display yerine content-visibility kullanarak içeriği gizlemektir. Bu, genişletilmediği takdirde içeriğin hiç oluşturulmayacağı anlamına gelir.

Interop 2025 çalışmasının bir parçası da ::marker sözde öğesidir. ::marker sözde öğesi, <summary> öğesinin açıklama üçgenini stilize etmenize olanak tanır.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Ardından başka bir sözde öğe: ::details-content.

::details-content, içeriği temsil eder. Bu, ayrıntılar öğesinin genişleyip daralan ve stil vermenize olanak tanıyan kısmıdır.

[open]::details-content {
  border: 5px dashed hotpink;
}

Ayrıca, sayfada bulma eşleşmeleriyle <details> öğesini otomatik olarak genişletme ve HTML hidden özelliğinin until-found değerini Yeni Kullanıma Sunulan Referans'a getirme gibi bazı güzel iyileştirmeler de yapıldı. Bu özellik, bir öğeyi tarayıcının sayfa içi arama özelliği kullanılarak bulunana veya bir URL parçası takip edilerek doğrudan gidilene kadar gizler.

CSS @scope

CSS @scope kuralı, seçicilerinizin erişimini sınırlamanıza olanak tanır. @scope ile bir kapsam kökü ayarlayarak, at-rule içinde iç içe yerleştirilmiş tüm stil kuralları yalnızca bu DOM ağacı için geçerli olur.

Örneğin, yalnızca .card sınıfına sahip bir öğenin içindeki <img> öğelerini hedeflemek istiyorsanız .card, kapsam kökü olur.

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

Daha fazla bilgiyi Limit the reach of your selectors with the CSS @scope at-rule (CSS @scope at-rule ile seçicilerinizin erişimini sınırlama) başlıklı makalede bulabilirsiniz.

scrollend

Karmaşıklığı azaltan ve kaydırma arayüzlerini iyileştiren bir diğer özellik de scrollend. scrollend etkinliği olmadan kaydırmanın tamamlandığını güvenilir bir şekilde tespit etmek mümkün değildir.

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

scrollend etkinliğiyle tarayıcı, tüm bu zorlu değerlendirmeyi sizin için yapar.

document.onscrollend = event => {…}

Diğer örnekleri Scrollend, a new JavaScript event (Scrollend, yeni bir JavaScript etkinliği) başlıklı makalede bulabilirsiniz.

Aynı dokümanda görünüm geçişleri

Son olarak, görünüm geçişlerinin Interop 2025'in bir parçası olduğunu belirtmek isteriz. Bu çalışma, tek sayfalık uygulamalar ve görünüm geçişi sınıfları için de geçerli olan, aynı dokümanda görünüm geçişlerini içerir.

Projenin yıl ilerledikçe nasıl şekillendiğini görmek için Interop 2025 kontrol panelini takip edin.

Interop 2025'te yer alan özellikler, bu yıl Baseline'a dahil edilecek tek özellikler olmayacak ancak projelerde yer almaları, bu özelliklere öncelik verildiği ve yakında kullanıma sunulacağı konusunda bize oldukça iyi bir işaret veriyor.

Daha yeni başlıyoruz

Baseline için heyecan verici bir yıl oldu ve geçen yılki duyurularımızdan bu yana çok yol katettik. Web özellikleri verilerinin doldurulması tamamlandı. Bu, geliştirici araçlarının oluşturulmasına olanak tanıyan bir kapı açtı. Bu konuda henüz başlangıç aşamasındayız. Bu verilerin eklenmesinden yararlanacak bir ürününüz veya açık kaynak aracınız varsa sizden haber almak isteriz.

Web'in sunduğu her şeyden yararlanmanıza yardımcı olacak eğitimlerin yanı sıra yeni araçlarla ilgili duyurular yayınlamaya devam edeceğimiz için web.dev'i takip etmeye devam edin.