2021 Karşılaştırması: Web'de uyumlulukla ilgili en önemli beş sorunu ortadan kaldırma

Google, web geliştiricileri için tarayıcı uyumluluğuyla ilgili en büyük beş sorunu düzeltmek için diğer tarayıcı tedarikçileri ve sektör iş ortaklarıyla birlikte çalışmaktadır: CSS flexbox, CSS Izgarası, position: sticky, aspect-ratio ve CSS dönüşümleri.

Google, tarayıcı uyumluluğuyla ilgili en sorunlu beş nokta konusundan bahsetmek istiyorum. Odaklanılan alanlar CSS flexbox, CSS Izgarası, position: sticky, aspect-ratio ve CSS'dir dönüşür. Nasıl katkıda bulunabilir ve takip edebilirsiniz? nasıl katılacağınızı öğrenin.

Arka plan

Web'de uyumluluk, geliştiriciler için her zaman büyük bir zorluk olmuştur. Google'ın yanı sıra Mozilla ve diğer iş ortakları da dahil olmak üzere web'de yaşanan sorunlar hakkında daha fazla bilgi edinmek için durumu daha iyi hale getirmek üzere çalışmamıza ve önceliklendirmemize yön veriyor. Bu proje, Google'ın Geliştirici Memnuniyet (DevSAT) çalışması yaratılmasıyla birlikte daha büyük bir ölçekte MDN DNA (Geliştirici Gereksinimleri Değerlendirmesi) anketleri 2019 ve 2020 yıllarında gerçekleştirdiği ayrıntılı bir araştırmaya ait MDN Tarayıcı Uyumluluk Raporu 2020. Eyaleti ülke ve bölge yöneticileri gibi CSS ve JS'nin Durumu anketleri ile başlayalım.

2021'deki hedef, tarayıcı uyumluluğu sorunlarını beş temel odak noktasıyla ortadan kaldırmaktır. geliştiricilerin güvenilir temeller olarak güvenle inşa edebilmeleri için sağlam temeller atacağız. Bu çabanın adı #Compat 2021.

Neye odaklanacağınızı seçme

Temelde web'in tamamında tarayıcı uyumluluğu sorunları olsa da bu projenin odağında en sorunlu olanların küçük bir kısmı vardır daha iyi hale getirilebilecek alanlar ve alanlar yer aldığı için bunları en önemli sorunlar olmaktan çıkarır. göz atabilirsiniz.

Uyumluluk projesinde, test edilecek alanlarda ve bazıları şunlar:

2021'de odaklanılacak beş alan

Chromium, 2020'de Google Ads'de bahsedilen en yaygın alanları ele almak için çalışmaya başladı. Chromium'un tarayıcı uyumluluğunu 2020'de iyileştirme. 2021'de, daha da ilerlemek için özel bir çalışmaya başlıyoruz. Google ve Microsoft ve Igalia, Chromium'da sık karşılaşılan sorunları gidermek için birlikte çalışıyor. Düzenli olarak katkıda bulunan Igalia Chromium ve WebKit'e ve yerleşik cihazlar için resmi WebKit bağlantı noktasının yöneticilerine ve bu uyumluluk çalışmalarına çok destek oldum. Ayrıca daha fazlası da tespit edilen sorunları ele almanıza ve takip etmenize yardımcı olur.

2021'de düzeltilmesi planlanan alanlar aşağıda belirtilmiştir.

CSS flexbox

CSS flexbox : yaygın şekilde kullanılıyor halen geliştiricilerin karşılaştığı bazı büyük zorluklar vardır. Örneğin, Chromium ve WebKit auto-height esnek kapsayıcıda yanlış boyutlu resimlere yol açan sorunlar yaşandı.

Uzun satranç tahtasının fotoğrafı.
Hatalar nedeniyle yanlış boyutlandırılmış resim.
ziyaret edin.
'nı inceleyin.
Satranç tahtası.
Doğru boyutlandırılmış resim.
. Fotoğraf: Alireza Mahmoudi.

Igalia'nın flexbox Cats blog yayınında, bu sorunlar daha fazla örnekle derinlemesine ele alınmaktadır.

Buna neden öncelik verilir?

CSS Izgarası

CSS Izgarası birçok eski tekniğin yerini alarak modern web düzenleri için temel bir yapı taşı ve geçici çözümler hakkında bilgi edinin. Gittikçe benimsenme oranı arttıkça, sağlam bir yapıya sahip olması gerekir. tarayıcılar arasındaki farklar bundan kaçınmak için bir neden değildir. Proje yönetiminin ızgara düzenlerine animasyon ekleme özelliği yoktur; bu özellik Gecko'da desteklense de Chromium veya WebKit'i seçin. Desteklendiğinde Efektler aşağıdaki gibidir:

Chen'den animasyonlu satranç demosu Hui Jing.

Buna neden öncelik verilir?

ziyaret edin.

CSS konumu: sabit

Sabit konumlandırma içeriğin görüntü alanının kenarında kalmasına olanak tanır ve her zaman görüntü alanının üst kısmında görünen başlıklar içindir. Desteklenirken tüm tarayıcılarda beklendiği gibi çalışmadığı yaygın kullanım durumları vardır. Örneğin, yapışkan tablo başlıkları şu an için Chromium'da desteklenmiyor. bir işaretin arkasında desteklenir, sonuçlar tarayıcılar arasında tutarsızdır:

"TablesNG" ile Chromium
Geko
WebKit

Daha fazla bilgi için yapışkan tablo başlıklarına demo hazırlayın.

Buna neden öncelik verilir?

CSS en boy oranı özelliği

Yeni aspect-ratio CSS özelliği, web sayfaları için tutarlı bir genişlik-yükseklik oranı sağlamayı Böylece iyi bilinen içerik türlerine olan ihtiyacı padding-top saldırı:

Dolgu üstünü kullanma
.container {
  width: 100%;
  padding-top: 56.25%;
}
En boy oranı kullanılıyor
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Oldukça yaygın bir kullanım alanı olduğu için yaygın olarak kullanılması beklenmektedir. tüm yaygın senaryolarda ve tüm tarayıcılarda sorunsuz bir şekilde göründüğünden emin olmak istiyoruz.

Buna neden öncelik verilir?

  • Anketler: Halihazırda iyi biliniyor ancak henüz yaygın olarak kullanılmıyor Eyaleti CSS
  • Testler: % 27 başarılı tüm tarayıcılarda
  • Kullanım: %3 ve artış bekleniyor

CSS dönüşümleri

CSS dönüşümleri tüm tarayıcılarda yıllardır desteklenmekte olup Google yardımcı olur. Ancak hâlâ aynı şekilde çalışmadıkları birçok alan vardır. . Örneğin, bir kart çevirme efekti tarayıcılar arasında çok tutarsız olabilir:

Chromium (sol), Gecko (orta) ve WebKit'te (sağ) kart çevirme efekti. David Baron'ın bug paketindeki demosu yorum'u tıklayın.

Buna neden öncelik verilir?

  • Anketler: Çok iyi bilinen ve şurada kullanılan kaynaklardır: CSS
  • Testler: Tüm sınavlar % 55 başarılı Tarayıcı
  • Kullanım: %80

Nasıl katkıda bulunabilir ve takip edebilirsiniz?

Yayınladığımız tüm güncellemeleri takip edin ve paylaşın @ChromiumDev veya herkese açık posta listesi Uygunluk 2021. Hatalar bulunduğundan emin olun veya bunları bildirin lütfen bizimle iletişime geçin. Eksik bir şey varsa yukarıdaki kanallar.

Web.dev adresinde ilerlemeyle ilgili düzenli güncellemeler olacak. Buradan, her bir odak alanında kaydedilen ilerlemeyi Compat 2021 Kontrol Paneli.

Compat 2021 Kontrol Paneli
Comat 2021 Kontrol Paneli (ekran görüntüsü 16 Kasım 2021'de alınmıştır).

Tarayıcı satıcılarının bu büyük çabanın güvenilirliğini ve Birlikte çalışabilirlik web'de harika şeyler derlemenize yardımcı olacak!