Birlikte Çalışabilirlik 2022: Geliştiriciler için web'i iyileştirmek üzere birlikte çalışan tarayıcılar

Tüm büyük tarayıcı sağlayıcıları ve diğer paydaşlar ilk kez, web geliştiricilerinin belirlediği başlıca tarayıcı uyumluluk sorunlarını çözmek için bir araya gelmiştir. Birlikte çalışabilirlik 2022, 15 önemli alanda web için geliştirme deneyimini iyileştirecek. Bu makalede bu noktaya nasıl geldiğimizi, projenin neye odaklandığını, başarının nasıl ölçüleceğini ve ilerlemeyi nasıl takip edebileceğinizi öğrenebilirsiniz.

Her şey 2019'da başladı

2019'da Mozilla, Google ve diğer firmalar geliştiricilerin sorunlarını anlamak için MDN Geliştirici İhtiyaç Değerlendirmesi anketleri ve ayrıntılı Tarayıcı Uyumluluk Raporu aracılığıyla büyük bir çalışma başlattı. Bu raporlar, web platformundaki geliştiricilerin karşılaştığı en büyük sorunların üstesinden gelmemizi sağlayacak ayrıntılı ve uygulanabilir bilgiler vererek Compat 2021 çalışmasının yolunu açtı.

Compat 2021, diğer geliştirmelerin yanı sıra CSS ızgarası (% 12 kullanımı ve giderek artıyor) ve CSS flexbox (% 77 kullanım) gibi güçlü özellikler için sağlam bir temel oluşturdu. flexbox'taki gap özelliği, geliştiricilerin yeni düzen yöntemlerini benimsediği en önemli sorunları çözüyor.

2021'in sonunda tüm uygulamalarda %90'ın üzerinde bir puana ulaşmaktan memnunuz.

Birlikte Çalışabilirlik 2022 nedir?

Interop 2022, üç ana tarayıcı uygulamasının temsilcileri tarafından kabul edilen bir karşılaştırma ölçütüdür. Herkese açık bir aday gösterme süreci ile geliştirilen ve Apple, Bocoup, Google, Igalia, Microsoft ve Mozilla destekçilerinin görüşleri doğrultusunda geliştirildi.

Karşılaştırma, geliştiriciler tarafından özellikler eksik olduğunda veya tarayıcılar arasında uyumluluk sorunları yaşandığında özellikle sorunlu olarak tanımlanan 15 alana odaklanmaktadır. Tüm tarayıcı sağlayıcıları bu alanlara odaklanmayı kabul etmiştir ve dahil olan herkes web için geliştirme deneyimini ölçülebilir şekilde daha iyi hale getirmek üzere çalışmaya başlama konusunda heyecanlıdır.

15 odak alanı

Birlikte çalışabilirlik 2022'nin odak noktası aşağıdaki özellikler olacaktır. 10 yeni alanın yanı sıra 2021'de 2021'de tamamlanan 5 yeni alana sahip olacaklar. Yeni odak alanları şunlardır:

Katmanları basamakla

Basamaklı katmanlar, web geliştiricilerine şelale üzerinde daha fazla kontrol sağlar. Bu şemalar, seçicileri her biri kendine özgü özelliklere sahip katmanlar halinde gruplandırmak için bir yol sunar. Bu nedenle, temel CSS kurallarının üzerine yazmak için seçicileri dikkatli bir şekilde sıralamanız veya son derece spesifik seçiciler oluşturmanız gerekmez.

Renk alanları ve CSS renk işlevleri

Bir tasarım sisteminde renk işlevlerini kullanmak için şu anda HSL değerlerinde Sass, PostCSS veya calc() kullanmanız gerekir. CSS'de yerleşik olarak bulunan renk işlevleri, renklerin dinamik olarak güncellenebileceği anlamına gelir. Yeni renk alanları ise sRGB gamı ve HSL'nin algı sınırlamalarını ortadan kaldırır.

CSS Renk Düzeyi 5'te tanımlanan, web platformunda daha dinamik tema oluşturma olanağı tanıyan iki işlev vardır:

  • color-mix(): İki rengi alır ve bu renklerin belirli bir renk alanında belirtilen miktarda karıştırılmasıyla elde edilen sonucu döndürür.
  • color-contrast(): Renk listesinden, belirtilen tek bir rengin en yüksek kontrastına sahip rengi seçer.

Bu işlevler, genişletilmiş renk alanlarını (LAB, LCH ve P3) destekler. HSL ve sRGB'ye ek olarak, varsayılan olarak tek tip LCH renk alanını kullanırlar.

Yeni görüntü alanı birimleri

Görüntü alanı boyutlandırmasıyla ilgili zorluklar hem MDN Tarayıcı Uyumluluk Raporu 2020 hem de yeni CSS 2021 Durumu anketinde belirgin şekilde belirtilmiştir. CSS Değerleri ve Birim Düzey 4 en büyük, en küçük ve dinamik görüntü alanı boyutları olan lv*, sv* ve dv* için yeni birimler ekler. Bu birimler, adres çubuğunu hesaba katarken mobil cihazlarda görünür görüntü alanını dolduran düzenler oluşturmayı kolaylaştırır.

Her görüntü alanı birimi türü için görünümün farklı bölümleri.

Ayrıca, Interop 2022'nin ardındaki tedarikçiler arası ekip, mevcut vh birimi de dahil olmak üzere mevcut görüntü alanı ölçüm özelliklerinin birlikte çalışabilirlik durumunu araştırmak ve iyileştirmek üzere birlikte çalışacak.

Kaydırma

2021 Scroll Anket Raporu, kaydırma özelliklerinin ve kaydırma uyumluluğunun uygulanmasının zor olduğunu ve iyileştirilmesi gereken birçok alan olduğunu onaylamaktadır. Kaydırma işleminin platformlar arasında daha tutarlı ve sorunsuz olmasına yardımcı olmak için kaydırma tutturma, kaydırma davranışı ve aşırı kaydırma davranışı konularına odaklanacağız.

Ayrıca, yeni kaydırma özelliği tekliflerini de inceliyoruz.

Alt ızgara

grid-template-columns ve grid-template-rows değerlerinin subgrid değeri, display: grid uygulanmış bir ızgara öğesinin, kanal tanımını üst tablonun üzerine yerleştirildiği bölümünden devralabileceği anlamına gelir.

Örneğin, aşağıdaki üç kart bileşeninde, her kart bağımsız bir ızgara olsa bile, bitişik kart başlıkları ve altbilgileriyle uyumlu bir üstbilgi ve altbilgi vardır. Her kart, üst tablonun üç satırını kapsayan bir öğe olduğundan ve ardından bu satırları karta aktarmak için alt ızgara kullandığından bu kalıbın işe yarar.

Kartlar ve altbilgilerin kartlar arasında hizalandığı üç kart bileşeni.
Bunu CodePen'de inceleyin.

Dahil olanlar

  • CSS Kapsayıcısı (contain özelliği)
  • <dialog> öğesi
  • Form kontrolleri
  • Tipografi ve Kodlamalar: font-variant-alternates, font-variant-position, ic birimi ve CJK metin kodlamaları dahil
  • Son kullanıcıları etkileyen site uyumluluğu sorunlarına neden olan tarayıcılar arasındaki farklılıklara odaklanan Web Compat

Compat 2021 projesinde aşağıdaki alanlarda büyük ilerleme kaydedildi. Ancak daha fazla iyileştirme yapılabilir. Bu nedenle, geri kalan sorunların ele alınabilmesi için birlikte çalışabilirlik 2022'ye dahil edildi.

  • En Boy Oranı
  • Flexbox
  • Tablo
  • Yapışkan Konumlandırma
  • Dönüşümler

İnceleme çalışmaları

Interop 2022, odaklanılan 15 alanın yanı sıra üç inceleme çalışması içermektedir. Şu alanlar sorunlu ve iyileştirilmesi gereken, ancak spesifikasyonların veya testlerin mevcut durumunun henüz test sonuçlarını kullanarak ilerleme kaydedecek kadar iyi olmadığı alanlardır:

  • Düzenleme, contenteditable ve execCommand
  • İşaretçi ve Fare Etkinlikleri
  • Görüntü Alanı Ölçümü

Tarayıcı satıcıları ve diğer paydaşlar bu alanlara ilişkin testlerin ve spesifikasyonların iyileştirilmesi için işbirliği yapacaktır. Böylece söz konusu kaynaklar, bu çalışmanın gelecekteki yinelemelerine dahil edilebilir.

Başarıyı ölçme ve ilerlemeyi izleme

Tarayıcı başına puanlar - Chrome ve Edge için 71, Firefox için 74, Safari Teknoloji Önizlemesi için 73.

Mevcut web platformu testleri kontrol paneli, odaklanılan 15 alanda ilerleme durumunu izlemek için kullanılacaktır. Her alan için bir dizi test belirlenmiştir. Ardından tarayıcılar, bu testlere karşı her alan için bir puan ve 15 alanın tümü için bir genel puan verilir.

İlerlemeyi takip etmek için Interop 2022 kontrol paneline göz atın. Yıl boyunca, oluşturduğunuz platformun nasıl geliştiğini takip edebilir ve görebilirsiniz.

Tüm yaygın web tarayıcıları için birçok alan için puanları içeren bir tablonun resmi
Odaklanılan alan başına tüm tarayıcı puanlarını wpt.fyi/interop-2022 adresinde görebilirsiniz.

Tüm bunlar geliştiriciler için ne anlama geliyor?

Compat 2021, Interop 2022 ve diğer formatlarda gerçekleştirilen bu çok yıllık birlikte çalışabilirlik çalışmalarının hedefi, geliştiricilerin yıllardır yaşadıkları sorunları tam olarak anlayıp ele almaktır. Bu, tek tarayıcıyla gerçekleştirilen bir çalışma değil, tüm büyük tarayıcı tedarikçileri ve arkadaşları arasında, web platformunu her açıdan daha iyi hale getirmek için güçlü bir işbirliği yapmanızı sağlayacak bir çalışmadır.

Esas itibarıyla amaç, web platformunu geliştiriciler için daha kullanışlı ve güvenilir hale getirmektir. Böylece geliştiriciler, tarayıcı tutarsızlıklarıyla uğraşmak yerine harika web deneyimleri oluşturmaya daha fazla zaman ayırabilirler.

Düşüncelerinizi bizimle paylaşın

Compat 2021 sırasında yapılan iyileştirmeler veya Interop 2022'ye dahil edilen özelliklerden herhangi biriyle ilgili geri bildirimde bulunmak isterseniz lütfen bizimle iletişime geçin. Aşağıdaki özelliklerden hangisi çalışmalarınızda en büyük farkı yaratacak? Sizi gerçekten heyecanlandıran şey nedir? GitHub deposuyla ilgili sorunları bildirin veya Twitter'dan bize bildirin.

Birlikte Çalışabilirlik 2022 hakkında daha fazla bilgi: