Compat 2021 ile ilgili yıl sonu güncellemesi. Bu güncelleme, temel odak noktalarımız olan CSS Flexbox, CSS Izgarası, konum: sabit, en boy oranı ve CSS dönüşümleri olmak üzere, tarayıcı uyumluluğu sorunlarını ortadan kaldırmaya yönelik bir çalışmadır.
Yıl sonu yaklaşıyor. Compat 2021 ile ilgili son bir güncellemenin zamanı geldi. Bu güncelleme, beş temel alanda tarayıcı uyumluluğu sorunlarını ortadan kaldırmaya yönelik bir çalışma.
%>90
tüm tarayıcılarda puanı
Son güncellememizden bu yana tüm tarayıcılarda iyileştirmeler görmeye devam ettik. Tüm tarayıcılar yılın başında çok daha düşük test puanlarıyla başlamış, ancak şimdi tüm tarayıcılar %90'ı geçmiş durumda! Bu, web platformunun odaklanılan beş alanın birlikte çalışabilirliğini önemli ölçüde iyileştirdiği anlamına geliyor.
Tarayıcı motorlarına yalnızca tarayıcı sağlayıcıları değil, web topluluğundaki diğer kullanıcılar da katkıda bulunur. Bu projede, özellikle katkıcılığı ve puanları artırmak için devam eden çalışması için Igalia'ya teşekkür etmek istiyoruz. Igalia, 2021'in beş odak alanının da iyileştirilmesine katkıda bulundu.
wpt.fyi'de test sonuçları kontrol panelinde, Compat 2021'e dahil olan tüm testlerin gösterildiği filtrelenmiş test sonuçları görünümü ile Chrome, Firefox ve Safari'de, sonuçları Temmuz ayındaki son güncellememizle karşılaştırdık.
Her alanda yapılan iyileştirmelere göz atalım.
CSS flexbox
flex-basis: content, artık Chromium ve WebKit'e uygulamalar ekleyerek tüm tarayıcılarda sorunsuz bir şekilde kullanılabiliyor. (content değeri Gecko tarafından zaten destekleniyordu.)
Chromium'da, spesifikasyonla ve Gecko'nun davranışıyla eşleşen flexbox boyutlandırmasıyla ilgili bir sorun düzeltildi. Gecko'da esnek öğelerde yükseklik yüzdesiyle ilgili bir sorun da dahil olmak üzere Compat 2021'i etkileyen bazı sorunlar düzeltildi. Son olarak, WebKit'te artık daha fazla hizalama özelliği değeri (left, right, self-start, self-end, start, end) desteği eklendi. Ayrıca, mutlak konumlandırma ile ilgili birçok iyileştirme yapıldı ve Compat 2021'de flexbox test sonuçları iyileştirildi.
CSS Tablosu
Hem 2021 Web Almanağı'nda hem de Chrome'un kullanım metriklerinde görülebildiği gibi, CSS Grid'in web'deki kullanımı artmaya devam ediyor.
Chrome ve Edge 93'te gridNG'nin kullanıma sunulması, Grid ile ilgili uzun süredir devam eden birçok sorunu çözdü ve Chromium'un hata izleyicisindeki etkileyici 38 sorunu kapattı. Ardından gelen birçok küçük iyileştirmenin yanı sıra Chromium'da Grid için Compat 2021 puanı% 3'ten %97'ye yükseldi. Bu çalışma Microsoft'un Edge ekibi tarafından gerçekleştirilmiştir.
Gecko'da Grid'i etkileyen mutlak konumlandırma hatası düzeltildi ve WebKit'te yapılan birçok düzeltme sonucunda, Grid testlerinde Firefox için% 1, Safari için% 3 iyileştirme sağlandı.
CSS position: sticky
Son güncellememizde, tüm tarayıcıların (bu örnekte Chrome ve Edge) testleri% 100 geçmelerine olanak tanıyan ilk alanın position: sticky olduğunu gördük. Şimdi, WebKit'in uygulanmasındaki çeşitli düzeltmelerin ardından Safari, bu testlerde% 100'lük bir puan aldı. Bu iyileştirmelerin çoğu
Safari 15'e dahil edildi.
CSS aspect-ratio özelliği
Öğelerin en boy oranını (genişlik-yükseklik oranı) tanımlamaya yönelik tarayıcılar arası destek gelişmeye devam etti. Chrome/Edge, Firefox ve Safari için Compat 2021 puanları sırasıyla %99, %97 ve% 95'e ulaştı. İyileştirmelerin çoğu aspect-ratio özelliğinin kendisiyle değil, width ve height özelliklerinin öğeler için varsayılan aspect-ratio değeriyle nasıl eşlendiğiyle ilgilidir. Bu uygulama, WebKit'teki birden çok öğeye, Chromium için <canvas> değerine uygulandı.
CSS dönüşümleri
transform: perspective(none) desteği artık Chromium, Gecko ve WebKit'te desteklenmektedir. Böylece, bir bakış açısında olan ve olmayan
animasyonlar daha kolay etkinleştirilir.
Chromium'da, transform-style: preserve-3d (alt öğelerin aynı 3D sahneye katılmasına olanak tanır) ve perspective özelliği (alt öğelere perspektif dönüştürmesi uygular) artık yalnızca alt öğelere uygulanmalarını sağlayarak spesifikasyonla hizalanır.
Tüm tarayıcılarda CSS dönüşümlerinin puanlarındaki büyük artış, temel olarak yanlış testlerin düzeltildiği veya kaldırıldığı test paketinde yapılan iyileştirmelerden kaynaklanır. Bu, birlikte çalışabilirlik sorunlarını anlamayı ve gelecekte regresyonları önlemeyi kolaylaştırır.
Sonuç
Puanda birçok iyileştirme ve daha iyi test altyapısıyla yıl sonuna kadar emeği geçen herkese minnettarız. aspect-ratio, web geliştiricilerinin uzun süredir istediği bir özellikti ve artık tüm tarayıcılarda destekleniyor. Flexbox, ızgara ve position: sticky kullanımlarının tamamı artıyor ve bu özellikler 2021 yılında yapılan birçok iyileştirme sayesinde artık tarayıcılarda daha iyi destekleniyor.
Sonraki adım Bu çalışmanın bir sonraki yinelemesinde diğer tarayıcı tedarikçileriyle ve daha geniş çaplı toplulukla iş birliği yapmaya devam etmekten heyecan duyuyoruz. 2022 için odaklanılacak alanları araştırmaya ve tartışmaya başladık. Yakında yapılacak bir duyuruyu kaçırmayın.
Herhangi bir geri bildiriminiz veya sorunuz varsa lütfen Twitter'da @ChromiumDev adresi üzerinden bize ulaşın.