İlk kez, tüm büyük tarayıcı satıcıları ve diğer paydaşlar, web geliştiricileri tarafından belirlenen başlıca tarayıcı uyumluluğu sorunlarını çözmek için bir araya geldi. Interop 2022, web için geliştirme deneyimini 15 önemli alanda iyileştirecek. Bu makalede, buraya nasıl geldiğimizi, projenin neye odaklandığını, başarının nasıl ölçüleceğini ve kaydedilen ilerlemeyi nasıl takip edebileceğinizi öğreneceksiniz.
Her şey 2019'da başladı
2019'da Mozilla, Google ve diğerleri geliştiricilerin uygulamalarını anlamak için büyük bir çalışma MDN Developer Needs Assessment anketleri ve ayrıntılı Tarayıcı Uyumluluğu Raporu yoluyla soruna neden olan noktalar vardır. Bu raporlar, web platformundaki geliştiricilerin karşılaştığı en büyük zorlukların üstesinden gelmemiz için bize ayrıntılı ve uygulanabilir bilgiler sağladı. Bu raporlar, Compat 2021 çalışmalarında yer almamızı sağladı.
Compat 2021, diğer avantajlarının yanı sıra, CSS tablosu (% 12 oranında kullanım ve sürekli büyüme) ve CSS flexbox (% 77 kullanımı) gibi güçlü özellikler için sağlam bir temel oluşturdu. Flexbox'taki gap özelliği, yeni düzen yöntemlerini benimserken geliştiricilerin en büyük sorunu çözdü.
2021'in sonunda tüm uygulamalarda %90'ın üzerinde bir puana ulaşmaktan mutluluk duyduk.
Interop 2022 nedir?
Interop 2022, üç önemli tarayıcı uygulamasının temsilcileri tarafından kabul edilen ve herkese açık aday gösterme süreci ve destekleyici Apple, Bocoup, Google, Igalia, Microsoft ve Mozilla'nın görüşleriyle inceleme süreciyle geliştirilmiş bir karşılaştırmadır.
Karşılaştırma, geliştiriciler tarafından özellikle eksik olduklarında veya tarayıcılar arasında uyumluluk sorunları olduğunda sorunlu oldukları 15 alana odaklanır. Tüm tarayıcı tedarikçileri bu alanlara odaklanmayı kabul etmiştir ve dahil olan herkes web için geliştirme deneyimini daha iyi hale getirmek üzere başlangıç yapmaktan heyecan duyacaktır.
15 odak alanı
Interop 2022'nin odak noktası aşağıdaki özellikler olacaktır. 10 yeni alan ile birlikte Compat 2021'den aktarılan 5 alan da bunlar arasındadır. Yeni odaklanılacak alanlar şunlardır:
Katmanları basamakla
Basamaklı katmanlar web geliştiricilerine basamak üzerinde daha fazla kontrol sunar. Seçicileri, her biri ayrı bir ayrıntıya sahip katmanlar halinde gruplandırmak için bir yöntem sağlarlar. Bu, 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 gerekmediği anlamına gelir.
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üncellenebilmesi anlamına gelir. Yeni renk alanları, sRGB gamına ilişkin kısıtlamayı ve HSL'nin algısal sınırlamalarını kaldırır.
CSS Renk Düzeyi 5'te tanımlanan ve web platformunda daha dinamik tema oluşturmayı sağlayan iki işlev vardır:
color-mix(): İki renk 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 renkle en yüksek kontrasta sahip rengi seçer.
Bu işlevler, genişletilmiş renk alanlarını (LAB, LCH ve P3) destekler ve HSL ve sRGB'ye ek olarak tek tip LCH renk alanını kullanır.
Yeni görüntü alanı birimleri
Görüntü alanı boyutlandırmayla ilgili zorluklar hem MDN Tarayıcı Uyumluluk Raporu 2020 hem de yeni CSS 2021 Eyaleti anketinde belirgindir. CSS Değerleri ve Birimler 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ğu dikkate alınırken mobil cihazlarda görünür görüntü alanını dolduran düzenler oluşturmayı kolaylaştırır.
Ayrıca, Interop 2022'yi destekleyen 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 için birlikte çalışacak.
Kaydırma
2021 Kaydırma 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 doğruluyor. Kaydırmanın platformlar arasında daha tutarlı ve sorunsuz olmasına yardımcı olmak için kaydırma karesi, scroll-behavior ve fazla kaydırma davranışı üzerinde duracağız.
Ayrıca, yeni kaydırma çubuğu özelliği tekliflerini de araştırıyoruz.
Alt ızgara
grid-template-columns ve grid-template-rows subgrid değeri, display: grid uygulanmış bir ızgara öğesinin, yerleştirildiği üst ızgaranın bölümünden kanal tanımını devralabileceği anlamına gelir.
Örneğin, her kart bağımsız bir tabloya sahip olsa da, aşağıdaki üç kart bileşeninde bitişik kart başlıkları ve alt bilgileri ile hizalanan bir başlık ve alt bilgi bulunur. Her kart üst ızgaranın üç satırını kapsayan ve ardından bu satırları karta devralmak için alt ızgara kullanan bir öğe olduğu için bu kalıp çalışır.
Dahil edilenler
- CSS Kapsama (
containözelliği) <dialog>öğesi- Form kontrolleri
- Tipografi ve Kodlamalar:
font-variant-alternates,font-variant-position,icbirimi 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 Comat
Aşağıdaki alanlarda Compat 2021 projesinde büyük ilerleme kaydetmiş olsa da daha fazla iyileştirme yapılabilir. Bu nedenle, kalan sorunların giderilebilmesi için bu yazılımlar 2022'de Interop 2022'ye dahil edilmiştir.
- En Boy Oranı
- Flexbox
- Izgara
- Yapışkan Konumlandırma
- Dönüşümler
İnceleme çalışmaları
Interop 2022, odaklanılacak 15 alana ek olarak üç inceleme çalışması içeriyor. Sorunlu olan ve iyileştirilmesi gereken alanlar şunlardır; ancak spesifikasyonların veya testlerin mevcut durumu, test sonuçlarını kullanarak ilerlemeyi puanlamak için henüz yeterli değildir:
- Düzenleme,
contenteditableveexecCommand - İşaretçi ve Fare Etkinlikleri
- Görüntü Alanı Ölçümü
Tarayıcı tedarikçi firmaları ve diğer paydaşlar, bu alanlara yönelik testlerin ve spesifikasyonların iyileştirilmesi konusunda iş birliği yaparak bu çalışmaların gelecekteki iterasyonlarına dahil edilebilmelerini sağlayacaklardır.
Başarıyı ölçme ve ilerlemeyi izleme
Mevcut web platformu testleri kontrol paneli, odaklanılan 15 alandaki ilerlemeyi izlemek için kullanılacak. Her alan için bir dizi test tanımlanmıştır. Tarayıcılar daha sonra bu testler ile karşılaştırılarak her alan için bir puan ve 15 alanın tümü için bir genel puan verilir.
İlerlemeyi takip etmek ve takip etmek için Interop 2022 kontrol paneline göz atın. Yıl boyunca, platformunuzu geliştirmek için geliştirdiğiniz ilerlemeyi takip edip görebilirsiniz.
Tüm bunlar geliştiriciler için ne anlama geliyor?
Compat 2021, Interop 2022 ve çok daha fazlasını içeren bu çok yıllık birlikte çalışabilirlik çalışmalarının amacı, geliştiricilerin yıllardır yaşadığı sorunları tam olarak anlamak ve ele almaktır. Bu, tek tarayıcılı bir çalışma değil, tüm önemli tarayıcı tedarikçileri ve arkadaşlarının web platformunu her alanda iyileştirmek için yaptığı güçlü bir işbirliğidir.
Esas olarak amaç, web platformunu geliştiriciler için daha kullanışlı ve güvenilir hale getirerek tarayıcı tutarsızlıklarıyla uğraşmak yerine harika web deneyimleri oluşturmaya daha fazla zaman ayırabilmelerini sağlamaktır.
Düşüncelerinizi bizimle paylaşın
Compat 2021 sırasında yapılan iyileştirmeler veya Interop 2022'deki herhangi bir özellik hakkında geri bildirimlerinizi bizimle paylaşırsanız çok memnun oluruz. İşinizde en büyük fark aşağıdaki özelliklerden hangisi olacaktır? Sizi heyecanlandıran şey ne? GitHub deposuyla ilgili sorunları bildirin veya Twitter'da bize bildirin.
Interop 2022 hakkında daha fazla bilgiyi aşağıda bulabilirsiniz: