Compat 2021'de yıl ortası güncellemesi: Tarayıcı uyumluluğuyla ilgili beş temel alanda sorunu ortadan kaldırmaya yönelik bir çalışma: CSS flexbox, CSS Izgarası, konum: sabit, en boy oranı ve CSS dönüşümleri.
Beş temel alanda tarayıcı uyumluluğu sorunlarını ortadan kaldırmaya yönelik bir çalışma olan Compat 2021'in yıl ortası güncellemesinin zamanı geldi. #compat2021 çalışmaları ve odaklanılacak alanlara nasıl karar verdiğimiz hakkında daha fazla bilgi için Mart duyurusuna göz atın.
Bu yayında açıklanan Chromium iyileştirmeleri Chrome'a, Edge'e ve tüm Chromium tabanlı tarayıcılara ulaşacak.
İlerlemeyi nasıl ölçüyoruz?
Web platformu testleri için Compat 2021 kontrol panelini inceleyerek başarılı testlerin sayısını ve farklı tarayıcılardaki trend grafikleri görebilirsiniz.
Basit bir "geçilen test sayısı", tarayıcı uyumluluğu konusunda tüm hikayeyi anlatmaz, ancak çalışmalarımızın ilerlemesini görmek için kullandığımız sinyallerden biridir. Test sonuçlarında tarayıcılar arasında daha az fark olması, bir web özelliğinin birden çok tarayıcıda birlikte daha iyi çalışabilmesi anlamına gelir.
CSS flexbox
Üç tarayıcı motorunun üçü de flexbox'ta iyileştirmeler gördü.
Safari 14.1, flexbox için gap özelliğini gönderdi. gap özelliği, öğeler arasındaki boşlukları ayarlamanın kolay bir yoludur. Bu özellik genellikle ızgara düzeninde kullanılır ve flexbox düzeni desteği MDN Tarayıcı Uyumluluk Raporu'nda en çok istenen özelliklerden biriydi. Bu güncellemeyle birlikte, esnek düzenlerdeki gap özelliği, önde gelen tüm tarayıcılarda kullanılabilir ve uyumlulukla ilgili en önemli zorluk çözülmüştür. Safari 14.1, flexbox'taki resimler için de birçok düzeltme ekleyerek eski geçici çözümlere duyulan ihtiyacı ortadan kaldırdı.
Firefox, tabloların esnek öğeler olarak oluşturulmasını çözdü ve Firefox'u geçen testlerin% 100'üne yaklaştırdı (şu anda %98,5).
Chromium, tabloları esnek öğeler olarak da düzeltti.
Chromium 88'de, resimlerin esnek öğeler olarak yeniden yazılması sayesinde uzun süredir var olan bir dizi hata çözüldü. Son olarak, Chromium yakın zamanda yeni hizalama anahtar kelimeleri için destek ekledi: start, end, self-start, self-end, left ve right. Bu anahtar kelimeleri Chrome Canary ve Edge Canary'de deneyebilirsiniz.
CSS Tablosu
CSS ızgara kullanımı istikrarlı bir şekilde büyüyor ve şu anda sayfa görüntülemelerinin% 9'unu oluşturuyor. Üç büyük tarayıcı motorunun tümü CSS Grid'i uyguluyor ve ilgili web platformu testlerinin% 89'undan fazlasını şimdiden başarıyla karşılıyor. Uyumluluk boşluğunun kapatılması, bu özelliğin istikrarlı büyümesini desteklemek için önemlidir.
Safari 2021'de şimdiye kadar testleri geçme oranını% 89'dan% 93'e çıkardı ve Chromium, daha fazla CSS Grid sorununu çözmek için GridNG adı verilen yeni bir mimari üzerinde çalışıyor. Microsoft ekibi tarafından yürütülen bu çalışma, hedeflenen Izgara testlerinde yakın zamanda% 94'ten% 97'ye yükselmesini sağladı. Yakında Edge blogunda GridNG ile ilgili bir güncelleme alacaksınız.
CSS position: sticky
Chromium'da, tabloların oluşturulmasını yeniden tasarlamak için yıllarca süren TablesNG'ın kullanıma sunulmasıyla birlikte tablo başlıkları için position: sticky işlevi düzeltildi.
Bu değişiklik, birkaç son
düzeltmeyle birlikte, Chrome ve Edge 93 geliştirici kanalının hedeflenen testlerin% 100'ünü geçmesini sağladı.
position: sticky dışında, TablesNG 72 Chromium hatasını çözdü!
CSS aspect-ratio özelliği
Genişlik-yükseklik oranının ayarlanmasını kolaylaştıran aspect-ratio özelliği, duyarlı web tasarımı için çok önemlidir. Bu aynı zamanda kümülatif düzen kaymalarını önlemek için de bir çözümdür.
aspect-ratio özelliği artık Chrome, Edge ve Firefox'un kararlı sürümlerinde ve Safari 15 beta'da desteklenmektedir. Tarayıcılar arası destek iyileştikçe kullanım da artmaktadır.
Hiçbir tarayıcı testleri% 100 geçmese de aspect-ratio uyumluluk boşluğu, 2021'in beş odak alanı arasında en küçük olanıdır. Tüm popüler tarayıcılar için yapılan testlerin% 90'ından fazlası bulunmaktadır. Gelecekte, çok sağlam bir özellik haline getirmek için bu test paketini kullanarak ilerlemeyi izlemeye devam edeceğiz.
web.dev'de aspect-ratio mülkünün kullanımı ve avantajları hakkında daha fazla bilgi edinin.
CSS dönüşümleri
Hem hata düzeltmeleri hem de testlerin kendisinde yapılan iyileştirmeler nedeniyle CSS dönüşümleri için hedeflenen testlerin sonuçlarında yavaş ve sürekli bir iyileşme olmuştur.
Chromium ekibi, transform-style:
preserve-3d ve transform :perspective() ürünlerinin birlikte çalışabilirliğini iyileştirmek için de çalışmaktadır. Bir sonraki güncellemede daha fazla ilerleme paylaşmayı umuyoruz.
Genel puan iyileştirmeleri
Mart ayındaki duyurudan bu yana üç tarayıcı motoru da Compat 2021 puanlarını yükseltti:
- Chrome ve Edge Dev 86'dan 92'ye yükseldi.
- Firefox 83'ten 86'ya çıktı.
- Safari 64'ten 82'ye yükseldi.
WebKit'e katkıda bulunanların çok sayıda çalışması sayesinde Safari, uyumluluk açığını 18 puan azaltma konusunda ısrarcı oldu. Özellikle Igalia ekibi, aspect-ratio özelliğinin yanı sıra Flexbox ve Grid özelliklerine flexbox için gap gibi birçok iyileştirme ve çeşitli hata düzeltmelerine katkıda bulundu.
2021'deki yarışmalarda kaydedilen ilerlemeyi takip edin
Compat 2021'de kaydedilen ilerlemeyi takip etmek için kontrol panelini takip edin, posta listemize abone olun veya @chromiumdev adresinden bizimle iletişime geçin. Herhangi bir sorun yaşarsanız etkilenen tarayıcı için hata bildiriminde bulunduğunuzdan emin olun.