Google, web geliştiricilerinin tarayıcı uyumluluğuyla ilgili başlıca beş sorunu düzeltmek için diğer tarayıcı tedarikçileri ve sektördeki iş ortaklarıyla birlikte çalışır: CSS flexbox, CSS Grid, position: sticky, aspect-ratio ve CSS dönüşümleri.
Google, tarayıcı uyumluluğuyla ilgili web geliştiricilerinin karşılaştığı başlıca beş sorunu çözmek için diğer tarayıcı tedarikçileri ve sektördeki iş ortaklarıyla birlikte çalışmaktadır. Odaklanılan alanlar CSS flexbox, CSS Izgarası, position: sticky, aspect-ratio ve CSS dönüşümleridir. Nasıl katılacağınızı öğrenmek için Nasıl katkıda bulunabilirsiniz ve nasıl takip edebilirsiniz? başlıklı makaleye göz atın.
Arka plan
Web'de uyumluluk, geliştiriciler için her zaman büyük bir zorluk olmuştur. Son birkaç yılda, Google ile Mozilla ile Microsoft da dahil olmak üzere diğer iş ortakları, web geliştiricilerinin en çok karşılaştığı sorunlu noktalar hakkında daha fazla bilgi edinmek ve durumu daha iyi hale getirmek amacıyla çalışmalarımıza yön vermek ve önceliklendirmek için işe koyuldu. Bu proje, Google'ın Geliştirici Memnuniyeti (DevSAT) çalışmaları ile bağlantılıdır ve 2019 ile 2020'de MDN DNA (Geliştirici İhtiyaç Değerlendirmesi) anketlerinin oluşturulması ve MDN Tarayıcı Uyumluluk Raporu 2020'de sunulan ayrıntılı araştırma çalışmasıyla daha geniş ölçekte başlamıştır. CSS'nin Durumu ve JS'nin Durumu anketleri gibi çeşitli kanallarda ek araştırma yapılmıştır.
2021'de amaç, beş temel odak alanında tarayıcı uyumluluğu sorunlarını ortadan kaldırmaktır. Böylece geliştiriciler, bu sorunları güvenilir temeller olarak gönül rahatlığıyla inşa edebilirler. Bu çalışmaların adı #Compat 2021.
Neye odaklanacağınızı seçmek
Web platformunun temelde tarayıcı uyumluluğu sorunları olsa da bu projede, önemli ölçüde daha iyi hale getirilebilecek en sorunlu az sayıdaki alana odaklanılmaktadır ve böylece bunlar geliştiricilerin en sık karşılaştığı sorunlar arasındadır.
Uyumluluk projesi, hangi alanlara öncelik verileceğini etkileyen birden fazla ölçüt kullanır. Bu kriterlerden bazıları şunlardır:
- Özellik kullanımı. Örneğin, flexbox tüm sayfa görüntülemelerinin %75'inde kullanılır ve HTTP Arşivi'nde kullanım oranı giderek artıyor.
- Hata sayısı (Chromium, Gecko, WebKit'te) ve Chromium için bu hataların kaç yıldıza sahip olduğu.
Anket sonuçları:
- MDN DNA anketleri
- MDN Tarayıcı Uyumluluğu Raporu
- En çok bilinen ve kullanılan özelliklerin CSS durumu
Web platformu testlerinden elde edilen test sonuçları. Örneğin, wpt.fyi'de flexbox.
En çok aranan özelliklerini kullanabilir miyim?
2021'de odaklanılacak en önemli beş alan
Chromium, 2020'de 2020'de Chromium'un tarayıcı uyumluluğunu iyileştirme başlıklı makalede açıklanan en önemli alanlara yönelik çalışmalara başladı. 2021'de ise daha da fazlasını başarmak için özel bir çaba sarf ediyoruz. Google ve Microsoft, Igalia ile birlikte Chromium'daki en sık karşılaşılan sorunları çözmek için birlikte çalışıyor. Chromium ve WebKit'e düzenli olarak katkıda bulunan ve yerleşik cihazlar için resmi WebKit bağlantı noktasının bakımını yapan Igalia, son derece destekleyici davranıp uyumluluk çalışmalarında yer aldı ve tespit edilen sorunların ele alınmasına ve izlenmesine yardımcı olacak.
2021'de düzeltilmesi taahhüt edilen alanları aşağıda bulabilirsiniz.
CSS flexbox
CSS flexbox, web'de yaygın olarak kullanılmaktadır ve geliştiriciler için hâlâ bazı önemli zorluklar vardır. Örneğin, hem Chromium hem de WebKit, auto-height flex kapsayıcılarıyla ilgili olarak yanlış boyutlandırılmış resimlere yol açan sorunlar yaşadı.
Fotoğraf: Alireza Mahmoudi.
Igalia'nın flexbox Cats blog yayını, daha fazla örnekle bu sorunları daha ayrıntılı bir şekilde ele alıyor.
Buna neden öncelik verilir?
- Anketler: CSS Durumu'nda en çok bilinen ve kullanılan MDN Tarayıcı Uyumluluğu Raporu'nda en önemli sorun
- Testler: Tüm tarayıcılarda % 85 başarılı
- Kullanım: Sayfa görüntülemelerinin %75'i HTTP Arşivi'nde giderek artıyor
CSS Tablosu
CSS Izgarası, modern web düzenleri için temel bir yapı taşıdır ve eski tekniklerin ve çözümlerin yerini alır. Benimseme oranı arttıkça bu teknolojinin sağlam olması gerekiyor. Böylece tarayıcılar arasındaki fark, bundan kaçınmak için hiçbir zaman bir neden olmayacak. Eksik olan alanlardan biri, Gecko'da desteklenen ancak Chromium veya WebKit'te desteklenmeyen ızgara düzenleri yapabilme yeteneğidir. Desteklendiğinde aşağıdaki gibi etkiler mümkün olur:
Buna neden öncelik verilir?
- Anketler: MDN Tarayıcı Uyumluluk Raporu'nda ikinci sıraya yerleşti, iyi bilinen ancak CSS Durumu'nda daha az kullanılan
- Testler: Tüm tarayıcılarda % 75 başarılı
- Kullanım: % 8 ve istikrarlı büyüme, HTTP Arşivi'nde biraz büyüme
CSS konumu: yapışkan
Yapışkan konumlandırma, içeriğin görüntü alanının kenarına yapışmasını sağlar ve her zaman görüntü alanının en üstünde görünen başlıklar için yaygın olarak kullanılır. Tüm tarayıcılarda desteklense de, beklendiği gibi çalışmadığı yaygın kullanım alanları vardır. Örneğin, yapışkan tablo başlıkları Chromium'da desteklenmemektedir ve artık bir bayrak arkasında desteklense de, sonuçlar tarayıcılar arasında tutarsızdır:
Rob Flack'in yapışkan tablo başlıkları demosunu izleyin.
Buna neden öncelik verilir?
- Anketler: CSS Eyaleti'nde oldukça bilinen/kullanılan ve MDN Tarayıcı Uyumluluğu Raporu'nda birden çok kez gündeme getirilen anketler
- Testler: Tüm tarayıcılarda % 66 başarılı
- Kullanım: %8
CSS en boy oranı özelliği
Yeni
aspect-ratio
CSS özelliği, öğeler için tutarlı bir genişlik-yükseklik oranı sağlamayı kolaylaştırır ve iyi bilinen padding-top saldırısına olan ihtiyacı ortadan kaldırır:
.container {
width: 100%;
padding-top: 56.25%;
}
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
Bu kadar yaygın bir kullanım örneği olduğu için, bunun yaygın olarak da kullanılması bekleniyor. Tüm yaygın senaryolarda ve tarayıcılar genelinde sağlam olduğundan emin olmak istiyoruz.
Buna neden öncelik verilir?
- Anketler: CSS Eyaleti'nde iyi bilinen ancak henüz yaygın olarak kullanılmayan anketler
- Testler: Tüm tarayıcılarda % 27 başarılı
- Kullanım: %3 ve bunun artması bekleniyor
CSS dönüşümleri
CSS dönüşümleri, yıllardır tüm tarayıcılarda desteklenmektedir ve web'de yaygın bir şekilde kullanılmaktadır. Ancak, hâlâ özellikle animasyonlar ve 3D dönüştürmeler gibi tarayıcılarda aynı şekilde çalışmadıkları birçok alan var. Örneğin, bir kart çevirme efekti tarayıcılar arasında çok tutarsız olabilir:
Buna neden öncelik verilir?
- Anketler: CSS Eyaleti'nde çok iyi bilinen ve kullanılan anketler
- Testler: Tüm tarayıcılarda % 55 başarılı
- Kullanım: %80
Nasıl katkıda bulunup takip edebilirsiniz?
@ChromiumDev hesabında veya herkese açık posta listesinde, Compat 2021'de yayınladığımız tüm güncellemeleri takip edin ve paylaşın. Hatalar olduğundan emin olun veya karşılaştığınız sorunlar için sorunları bildirin. Eksik bir hata varsa yukarıdaki kanallar üzerinden bize ulaşın.
İlerleme durumu hakkında web.dev sayfasında düzenli olarak güncellemeler olacak. Ayrıca, Compat 2021 kontrol panelinde her odak alanının ilerleme durumunu takip edebilirsiniz.
Tarayıcı tedarikçilerinin güvenilirliği ve birlikte çalışabilirliği artırmak için yaptıkları bu ortak çalışmanın, web'de harika ürünler oluşturmanıza yardımcı olacağını umuyoruz.