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

Google, web geliştiricilerinin karşılaştığı en büyük beş tarayıcı uyumluluğu sorununu (CSS flexbox, CSS Grid, position: sticky, aspect-ratio ve CSS dönüşümleri) düzeltmek için diğer tarayıcı tedarikçileri ve sektör iş ortaklarıyla birlikte çalışıyor.

Google, web geliştiricileri için en önemli beş tarayıcı uyumluluğu sorununu düzeltmek amacıyla diğer tarayıcı tedarikçileriyle ve sektör iş ortaklarıyla birlikte çalışmaktadır. Odak noktaları CSS flexbox, CSS Grid, position: sticky, aspect-ratio ve CSS dönüşümleridir. Nasıl katılacağınızı öğrenmek için Katkıda bulunma ve takip etme başlıklı makaleyi inceleyin.

Arka plan

Web'de uyumluluk, geliştiriciler için her zaman büyük bir zorluk olmuştur. Son birkaç yıldır Google ve Mozilla ile Microsoft gibi diğer iş ortakları, web geliştiricilerinin en büyük sorunlarını daha iyi anlamak için çalışmalar yapıyor ve bu sorunları çözmek üzere önceliklerimizi belirliyor. Bu proje, Google'ın Geliştirici Memnuniyeti (DevSAT) çalışmasıyla bağlantılıdır ve 2019 ile 2020'de MDN DNA (Geliştirici İhtiyaç Değerlendirmesi) anketlerinin oluşturulması ve MDN Tarayıcı Uyumluluğu Raporu 2020'de sunulan ayrıntılı bir araştırma çalışmasıyla daha geniş ölçekte başlamıştır. CSS Durumu ve JS Durumu anketleri gibi çeşitli kanallarda ek araştırmalar yapıldı.

2021'deki hedefimiz, geliştiricilerin güvenilir temeller olarak bu platformları kullanabilmesi için beş önemli odak alanındaki tarayıcı uyumluluk sorunlarını ortadan kaldırmaktır. Bu çalışmanın adı #Compat 2021.

Neye odaklanacağınızı seçme

Web platformlarının neredeyse tamamında tarayıcı uyumluluğu sorunları olsa da bu projenin odak noktası, önemli ölçüde iyileştirilebilecek ve böylece geliştiriciler için en önemli sorunlardan biri olmaktan çıkarılabilecek en sorunlu alanların küçük bir kısmıdır.

Uyumluluk projesi, hangi alanlara öncelik verileceğini etkileyen birden fazla ölçüt kullanır. Bunlardan bazıları şunlardır:

2021'de odaklanacağımız beş önemli alan

Chromium, 2020'de 2020'de Chromium'un tarayıcı uyumluluğunu iyileştirme başlıklı makalede belirtilen en önemli alanları ele almaya başladı. 2021'de bu konuda daha da ileri gitmek için özel bir çalışma başlatıyoruz. Google ve Microsoft, Igalia ile birlikte Chromium'daki en önemli 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ısını koruyan Igalia, bu uyumluluk çalışmalarında çok destekleyici ve aktif bir rol oynadı. Ayrıca, tespit edilen sorunları gidermeye ve takip etmeye yardımcı olacak.

2021'de düzeltileceği taahhüt edilen alanlar aşağıda verilmiştir.

CSS flexbox

CSS flexbox, web'de yaygın olarak kullanılıyor ancak geliştiriciler için hâlâ bazı önemli zorluklar var. Örneğin, hem Chromium hem de WebKit'te auto-height esnek kapsayıcılarla ilgili sorunlar vardı ve bu sorunlar yanlış boyutlarda resimlere neden oluyordu.

Bir satranç tahtasının uzatılmış fotoğrafı.
Hatalar nedeniyle hatalı boyutlandırılmış resim.
Satranç tahtası.
Doğru boyutlandırılmış resim.
Fotoğraf: Alireza Mahmoudi.

Igalia'nın flexbox Cats blog yayınında, bu sorunlar daha ayrıntılı bir şekilde ele alınmakta ve daha fazla örnek sunulmaktadır.

Neden öncelikli?

CSS Grid

CSS Grid, birçok eski tekniğin ve geçici çözümün yerini alarak modern web düzenleri için temel bir yapı taşıdır. Kullanım arttıkça, tarayıcılar arasındaki farklılıklar hiçbir zaman bu teknolojiden kaçınmak için bir neden olmayacak şekilde sağlam olması gerekir. Eksik olan bir alan, ızgara düzenlerini animasyonlu hale getirme özelliğidir. Bu özellik Gecko'da desteklenir ancak Chromium veya WebKit'te desteklenmez. Desteklendiğinde aşağıdaki gibi efektler kullanılabilir:

Chen Hui Jing tarafından oluşturulan animasyonlu satranç demosu.

Neden öncelikli?

CSS position: sticky

Yapışkan konumlandırma, içeriğin görüntü alanının kenarına yapışmasını sağlar ve genellikle görüntü alanının üst kısmında her zaman görünen üstbilgiler için kullanılır. Tüm tarayıcılarda desteklenir ancak amaçlanan şekilde çalışmadığı yaygın kullanım alanları vardır. Örneğin, sabit tablo başlıkları Chromium'da desteklenmez. Şu anda bir işaretle desteklenmesine rağmen sonuçlar tarayıcılar arasında tutarlı değildir:

"TablesNG" ile Chromium
Gecko
WebKit

Rob Flack'ın sabit tablo başlıkları demosuna göz atın.

Neden öncelikli?

CSS aspect-ratio özelliği

Yeni aspect-ratio CSS mülkü, öğeler için tutarlı bir genişlik-yükseklik oranı sağlamanızı kolaylaştırarak iyi bilinen padding-top hile'nin kullanımını ortadan kaldırır:

padding-top özelliğini kullanma
.container {
 
width: 100%;
 
padding-top: 56.25%;
}
aspect-ratio özelliğini kullanma
.container {
 
width: 100%;
 
aspect-ratio: 16 / 9;
}

Bu özelliğin yaygın olarak kullanılması beklendiği için tüm yaygın senaryolarda ve tarayıcılarda sorunsuz çalıştığından emin olmak istiyoruz.

Neden öncelikli?

  • Anketler: CSS Durumu'nda iyi bilinmesine rağmen henüz yaygın olarak kullanılmayan özellikler
  • Testler: Tüm tarayıcılarda % 27 başarı
  • Kullanım: %3 ve bu oranın artması bekleniyor

CSS dönüşümleri

CSS dönüştürme işlemleri, birçok yıldır tüm tarayıcılarda desteklenmektedir ve web'de yaygın olarak kullanılmaktadır. Ancak özellikle animasyonlar ve 3D dönüşümler söz konusu olduğunda, tarayıcılar arasında aynı şekilde çalışmadığı birçok alan hâlâ mevcut. Örneğin, kart çevirme efekti tarayıcılar arasında çok tutarsız olabilir:

Chromium (solda), Gecko (ortada) ve WebKit'te (sağda) kart çevirme efekti. Hata yorumundan David Baron tarafından oluşturulan demo.

Neden öncelikli?

Katkıda bulunma ve süreci takip etme

@ChromiumDev veya herkese açık posta listesi Compat 2021'de yayınladığımız güncellemeleri takip edin ve paylaşın. Hataların mevcut olduğundan emin olun veya yaşadığınız sorunlar için destek kaydı oluşturun. Eksik bir şey varsa yukarıdaki kanallardan bize ulaşın.

web.dev'de ilerlemeyle ilgili düzenli güncellemeler yapılacak. Ayrıca Compat 2021 kontrol panelinde her odak alanının ilerleme durumunu da takip edebilirsiniz.

Uyumluluk 2021 Kontrol Paneli
Compat 2021 kontrol paneli (16 Kasım 2021'de çekilen ekran görüntüsü).

Tarayıcı tedarikçileri arasında güvenilirliği ve birlikte çalışabilirliği iyileştirmek için yapılan bu ortak çalışmanın, web'de muhteşem şeyler oluşturmanıza yardımcı olacağını umuyoruz.