Yıl sonu yaklaşıyor ve beş temel odak alanındaki tarayıcı uyumluluğu sorunlarını ortadan kaldırma çabası olan Compat 2021’de son bir güncelleme zamanı geldi.
>90%
tüm tarayıcılarda puan
Son güncellememizden bu yana, tüm tarayıcılarda iyileştirmeler görmeye devam ettik. Yılın başında tüm tarayıcılar çok daha düşük test puanlarıyla başladı, ancak şimdi tüm tarayıcılar %90’ı aştı! Bu, web platformunun beş odak alanının birlikte çalışabilirliğini önemli ölçüde geliştirdiği anlamına gelir.
Tarayıcı motorlarına katkılar yalnızca tarayıcı satıcıları tarafından değil, web topluluğundaki diğer kişiler tarafından da yapılır. Bu proje için Igalia’ya özellikle teşekkür etmek istiyoruz. onların katılımı ve puanları iyileştirmek için çalışmaya devam etti. Igalia, Compat 2021’in beş odak alanının iyileştirilmesine katkıda bulundu.
Açık wpt.fyitest sonuçları panosu, artık bir filtrelenmiş test sonuçları görünümü Compat 2021’de yer alan tüm testleri ve ayrıca aşağıdakiler için görünümleri gösterir: Krom, FirefoxVe Safari sonuçları Temmuz ayındaki son güncellememizle karşılaştırarak.
Her alandaki iyileştirmelere bir göz atalım!
CSS esnek kutusu #
flex-basis: content şimdi tüm tarayıcılara doğru ilerliyor ve uygulamalar geliyor Krom Ve Web Kiti. ( content değer zaten Gecko tarafından destekleniyordu.)
Chromium’da bir flexbox boyutlandırma ile ilgili sorun sabittir, özellik ve Gecko’nun davranışıyla eşleşir. Ve Gecko’da birkaç Compat 2021’i etkileyen sorunlar dahil olmak üzere sabitlenir esnek öğelerde yüzde yüksekliği sorunu. Son olarak, WebKit’te daha fazla hizalama özelliği değeri desteği (sol sağ, kendi kendine başlama, kendini bitirme, başlamak, bitirmek) eklendi ve birçok iyileştirme yapıldı. mutlak konumlandırmaCompat 2021’deki flexbox test sonuçlarını da iyileştirdi.
CSS Izgarası #
CSS Grid’in web üzerinde kullanımı, her ikisinde de görülebileceği gibi büyümeye devam ediyor. 2021 Web Almanak ve Chrome’un kullanım ölçümleri.
bu GridNG’nin lansmanı Chrome ve Edge 93, Grid ile uzun süredir devam eden birçok sorunu çözerek, Chromium’un hata izleyicisindeki 38 etkileyici sorunu kapattı. Ardından gelen birçok küçük iyileştirmeyle birlikte, Grid in Chromium için Compat 2021 puanı %3 artarak %97’ye yükseldi. Bu çalışma, Microsoft’taki Edge ekibi tarafından yönetildi.
Bir mutlak konumlandırma hatası Grid’i etkileyen Gecko’da düzeltildi ve birçok düzeltme WebKit’e girerek Firefox için %1 ve Safari on the Grid testlerinde %3 iyileşme sağladı.
CSS position: sticky #
Son güncellememizde, position: sticky herhangi bir tarayıcının (bu durumda Chrome ve Edge) testlerden %100 geçme oranına ulaştığı ilk alandı. Şimdi, takip eden bir düzeltme sayısı WebKit’in uygulamasında Safari de bu testler için %100 puan alır. Bu iyileştirmelerin çoğu Safari 15’e dahil edilmiştir.
CSS aspect-ratio mülk #
Öğelerin en boy oranını (genişlik-yükseklik oranı) tanımlamaya yönelik çapraz tarayıcı desteği gelişmeye devam etti ve Compat 2021 puanları Chrome/Edge, Firefox ve Safari için sırasıyla %99, %97 ve %95’e ulaştı. İyileştirmelerin çoğu, aspect-ratio mülkiyetin kendisi değil, nasıl width Ve height nitelikler varsayılana eşlendi aspect-ratio değer elemanlar için. Bu, birden çok öğe için uygulandı Web KitiVe <canvas> için Krom.
CSS dönüşümleri #
İçin destek transform: perspective(none) şimdi destekleniyor Krom, Geko Ve Web Kiti. Bu, bir perspektif ile perspektifsiz arasında animasyon yapmayı kolaylaştıracaktır.
Chromium’da, transform-style: preserve-3d (bu, alt öğelerin aynı 3B sahneye katılmasına izin verir) ve perspective özellik (alt öğelere bir perspektif dönüşümü uygular) artık spesifikasyon ile uyumlu yalnızca alt öğelere uygulanmalarını sağlayarak.
daki büyük artış puanlar Tüm tarayıcılar için CSS dönüşümleri, temel olarak yanlış testlerin düzeltildiği veya kaldırıldığı test paketindeki iyileştirmelerden kaynaklanmaktadır. Bu, kalan birlikte çalışabilirlik sorunlarını anlamayı ve gelecekte gerilemelerden kaçınmayı kolaylaştırır.
Çözüm #
Skorda birçok iyileştirme ve daha iyi test altyapısı ile yılı bitirmek için herkesin ortaya koyduğu çalışma için minnettarız. aspect-ratio web geliştiricilerinden uzun süredir talep edilen bir özellikti ve artık tüm tarayıcılarda destekleniyor. Flexbox, ızgara ve position: sticky hepsi büyüyor ve bu özellikler, 2021 boyunca yapılan birçok iyileştirme sayesinde artık tarayıcılarda daha iyi destekleniyor.
Sıradaki ne? Bu çabanın bir sonraki yinelemesinde diğer tarayıcı satıcıları ve daha geniş toplulukla işbirliği yapmaya devam etmekten heyecan duyuyoruz. 2022 için odak alanlarını araştırmaya ve tartışmaya başladık. Lütfen yakında yapılacak duyuruyu bekleyin.
Herhangi bir geri bildiriminiz veya sorunuz varsa, lütfen bize Twitter üzerinden ulaşın. @ChromiumDev.