Beş temel odak alanındaki tarayıcı uyumluluğu sorunlarını ortadan kaldırma çabası olan Compat 2021’de yıl ortası güncellemesinin zamanı geldi. hakkında daha fazla ayrıntı için #uyumlu2021 nasıl çalıştığımızı ve odak alanlarına nasıl karar verdiğimizi öğrenmek için Mart ayı duyurusuna göz atın.
Bu yayında tartışılan Chromium iyileştirmeleri Chrome, Edge ve tüm Chromium tabanlı tarayıcılara ulaşacaktır.
İlerlemeyi nasıl ölçeriz? #
kontrol edebilirsiniz Uyumlu 2021 kontrol paneli için web-platform-testleri farklı tarayıcılar için başarılı testlerin sayısını ve trend grafiklerini görmek için.
Basit bir “geçilen testler” sayısı, tarayıcı uyumluluğunun tüm hikayesini anlatmaz, ancak çabalarımızın ilerleyişini 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 daha fazla birlikte çalışabilirliği anlamına gelir.
CSS esnek kutusu #
Üç tarayıcı motorunun tümü gördü flexbox’ta iyileştirmeler.
Safari 14.1, gap flexbox özelliği . bu gap özelliği, öğeler arasındaki aralığı ayarlamak için uygun bir yoldur. Bu özellik genellikle Izgara düzeninde kullanılır ve flexbox düzeninde destek, en çok talep edilen özelliklerden biriydi. MDN Tarayıcı Uyumluluk Raporu . Bu güncelleme ile, gap Esnek mizanpajlardaki özellik, tüm büyük tarayıcılarda mevcuttur ve üst düzey uyumluluk sorunu çözülmüştür. Safari 14.1 ayrıca aşağıdakiler için birçok düzeltme içeriyordu: flexbox’taki görüntülereski geçici çözümlere olan ihtiyacı ortadan kaldırır.
Firefox çözümlenmiş oluşturma esnek öğeler olarak tablolarFirefox’u testleri %100’e yaklaştırdı (şu anda %98,5).
krom sabit esnek öğeler olarak tablolar ilave olarak. Chromium 88’de ayrıca bir görüntülerin esnek öğeler olarak yeniden yazılması, uzun süredir devam eden bir dizi hatayı çözüyor. Son olarak, Chromium kısa süre önce eklendi yeni hizalama anahtar kelimeleri için destek : start, end, self-start, self-end, leftVe right. Bu anahtar kelimeler denenebilir krom kanarya Ve Kenar Kanaryası.
CSS Izgarası #
CSS Izgarası kullanımı sürekli büyüyen, şu anda sayfa görüntülemelerinin %9’unda. Üç büyük tarayıcı motoru da CSS Grid’i uyguluyor ve şimdiden ilgili web platformu testlerinin %89’undan fazlasını geçiyor. Bu özelliğin istikrarlı bir şekilde büyümesini desteklemek için uyumluluk açığını kapatmak önemlidir.
Şimdiye kadar 2021’de Safari, testleri geçme oranını %89’dan %93’e yükseltti ve Chromium, daha fazla CSS Izgarası sorununu çözmek için GridNG adlı yeni bir mimari üzerinde çalışıyor. Bu, Microsoft ekibi tarafından yürütülen bir çabadır ve son zamanlarda %94’ten %97’ye yükselmesine yol açmıştır. hedeflenen Grid testleri. GridNG ile ilgili bir güncelleme bekleyebilirsiniz. Kenar blogu yakında.
CSS position: sticky #
Chromium’da, position: sticky tablo başlıkları için tabloların oluşturulmasını yeniden tasarlamak için çok yıllı bir çaba olan TablesNG’nin piyasaya sürülmesiyle düzeltildi. Bu değişiklik, birkaç son düzeltmelerChrome ve Edge 93 geliştirici kanalını testin %100’ünü geçmesi için zorladı hedeflenen testler.
Öte position: sticky, TablesNG, 72 Chromium hatasını çözdü!
CSS aspect-ratio mülk #
bu aspect-ratio Genişlik-yükseklik oranını ayarlamayı kolaylaştıran özellik, duyarlı web tasarımı için çok önemlidir. Aynı zamanda kümülatif düzen kaymalarını önlemek için bir çözümdür.
bu aspect-ratio özelliği artık Chrome, Edge ve Firefox’un kararlı sürümlerinde ve Safari 15 beta . Tarayıcılar arası destek geliştikçe, kullanım artıyor.
Hiçbir tarayıcı testleri %100 geçmemesine rağmen, uyumluluk açığı aspect-ratio Compat 2021 için beş odak alanının en küçüğüdür. Tüm büyük tarayıcılar için %90’dan fazla başarılı testler . İleride, sağlam bir özellik haline getirmek için bu test paketini kullanarak ilerlemeyi izlemeye devam edeceğiz.
kullanımı ve faydaları hakkında daha fazla bilgi edinin. aspect-ratio web.dev’deki mülk.
CSS dönüşümleri #
sonuçlarında yavaş ve istikrarlı bir iyileşme olmuştur. CSS dönüşümleri için hedeflenen testlerhem hata düzeltmeleri hem de testlerin kendisinde yapılan iyileştirmeler nedeniyle.
Chromium ekibi ayrıca, transform-style: preserve-3d Ve transform :perspective(). Bir sonraki güncellemede paylaşmak için daha fazla ilerleme kaydetmeyi umuyoruz.
Genel puan iyileştirmeleri #
Mart ayındaki duyurudan bu yana, üç tarayıcı motorunun tümü de Compat 2021 puanlarını iyileştirdi:
- Chrome ve Edge Dev, 86’dan 92’ye çıktı.
- Firefox 83’ten 86’ya çıktı.
- Safari 64’ten 82’ye çıktı.
Özellikle Safari, WebKit katkıda bulunanların çok sayıda çalışması sayesinde uyumluluk açığını 18 puan kapatmaya zorladı. Özellikle şu adresteki ekip Igalia katkıda bulundu için aspect-ratio özelliği ve Flexbox ve Grid’deki birçok iyileştirme, örneğin gap flexbox ve çeşitli hata düzeltmeleri için.
Compat 2021 ilerlemesini takip edin #
Compat 2021’deki ilerlemeyi takip etmek için gözünüz Gösterge Paneliabone olmak posta listemizveya bize ulaşın @chromiumdev. Herhangi bir sorun yaşarsanız, etkilenen tarayıcı için bir hata bildirdiğinizden emin olun.