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 ve önceliklerimizi belirleyerek durumu daha iyi hale getirmek için elimizden geleni yapıyoruz. 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:
- Özellik kullanımı. Örneğin, flexbox şurada kullanılır: %75 tüm sayfa görüntülemelerinin sayısını artırdı ve HTTP'de benimsenmesinde büyük bir artış Arşivle.
- Hata sayısı (Chromium'da) Gecko, WebKit) ve Chromium için bu yıldızların kaç yıldız inceleyeceğiz.
Anket sonuçları:
- MDN DNA anketleri
- MDN Tarayıcı Uyumluluk Raporu
- CSS'nin durumu en bilinen ve kullanılan özellikler
web-platform-tests test sonuçları. Örneğin, flexbox açık wpt.fyi içinde yeniden kullanılabilir.
En çok aranan özelliklerini kullanabilir miyim?
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ı.
. 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?
- Anketler: Şu bölgedeki en popüler sorun: MDN Tarayıcı Uyumluluk Raporu, en çok bilinen ve kullanılan Eyaleti CSS
- Testler: Tüm tarayıcılarda % 85 başarılı
- Kullanım: %75 oranında sayfa görüntüleme sayısı, HTTP'de güçlü bir şekilde artmaktadır Arşivle
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:
Buna neden öncelik verilir?
- Anketler: Finalist, MDN Tarayıcı Uyumluluk Raporu, bilinen ancak daha az sıklıkla kullanılan Eyaletler CSS
- Testler: Tüm tarayıcılarda % 75 başarılı
- Kullanım: % 8 istikrarlı bir şekilde artıyor, HTTP'de küçük bir büyüme var Arşivle
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:
Daha fazla bilgi için yapışkan tablo başlıklarına demo hazırlayın.
Buna neden öncelik verilir?
- Anketler: Şurada yaygın olarak biliniyor/kullanılıyor: CSS olarak ayarlanmış bir içinde birden çok kez MDN Tarayıcı Uyumluluk Raporu
- Testler: % 66'lık geçiş tüm tarayıcılarda
- Kullanım: %8
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ı:
.container {
width: 100%;
padding-top: 56.25%;
}
.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:
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.
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!