Şimdiye kadar ilk kez, tüm büyük tarayıcı satıcıları ve diğer paydaşlar, web geliştiricileri tarafından belirlenen en önemli tarayıcı uyumluluk sorunlarını çözmek için bir araya geldi. Interop 2022, 15 temel alanda web için geliştirme deneyimini iyileştirecek. Bu yazıda, 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 öğrenin.
Her şey 2019’da başladı #
2019’da Mozilla, Google ve diğerleri başladı büyük bir çaba geliştiricilerin sorunlu noktalarını anlamak için MDN Geliştirici İhtiyaç Değerlendirmesi anketlerive derin dalış Tarayıcı Uyumluluk Raporu. Bu raporlar, geliştiricilerin web platformuyla ilgili en büyük zorluklarını ele almamız için bize ayrıntılı ve eyleme geçirilebilir bilgiler sağladı ve Compat 2021 çalışmasına öncülük etti.
Diğer şeylerin yanı sıra Compat 2021, aşağıdakiler gibi güçlü özellikler için sağlam bir temel oluşturulmasına yol açtı: CSS ızgarası (%12 kullanım ve sürekli büyüme) Ve CSS esnek kutusu (%77 kullanım), I dahil ederek gap yeni düzen yöntemlerini benimserken geliştiriciler için en büyük sıkıntı noktasını çözen flexbox özelliği.
2021’in sonunda tüm uygulamalarda %90’ın üzerinde bir puana ulaşmanın mutluluğunu yaşadık!
Interop 2022 nedir? #
Interop 2022, üç ana tarayıcı uygulamasının temsilcileri tarafından üzerinde anlaşmaya varılan ve bir süreçle geliştirilen bir kıyaslamadır. halka açık adaylık ve gelen girdilerle gözden geçirin destekçiler Elma, bocoupGoogle, İgalya, MicrosoftVe Mozilla.
Kıyaslama, geliştiriciler tarafından özellikle eksik olduklarında veya tarayıcılar arasında uyumluluk sorunları yaşadıklarında sıkıntılı olarak tanımlanan 15 alana odaklanıyor. Tüm tarayıcı satıcıları bu alanlara odaklanmayı kabul etti ve dahil olan herkes web için geliştirme deneyimini ölçülebilir şekilde daha iyi hale getirmeye başlamaktan heyecan duyuyor.
15 odak alanı #
Aşağıdaki özellikler, Interop 2022’nin odak noktası olacaktır. Bunlar, 10 yeni alanı ve Compat 2021’den taşınan 5 alanı içerir. Yeni odak alanları şunlardır:
Basamaklı katmanlar #
sweatymw2player" rel="noopener">Basamaklı katmanlar web geliştiricilerine basamak üzerinde daha fazla kontrol sağlayın. Seçicileri, her biri kendi özgüllüğü olan katmanlar halinde gruplamak için bir yol sağlarlar. Bu, seçicileri dikkatli bir şekilde sıralamanıza veya temel CSS kurallarının üzerine yazmak için oldukça özel seçiciler oluşturmanıza gerek olmadığı anlamına gelir.
Renk uzayları ve CSS renk fonksiyonları #
Bir tasarım sisteminde renk işlevlerini kullanmak için şu anda Sass, PostCSS veya calc() HSL değerleri üzerinde. CSS’de yerleşik renk işlevleri, renklerin dinamik olarak güncellenebileceği anlamına gelir ve yeni renk alanları, sRGB gamındaki kısıtlamayı ve HSL’nin algısal sınırlamalarını kaldırır.
içinde tanımlanmış iki fonksiyon vardır. CSS Renk Seviyesi 5 web platformunda daha dinamik tema oluşturmaya olanak tanıyan:
color-mix(): İki renk alır ve bunları belirli bir renk uzayında belirli bir miktarda karıştırmanın sonucunu verir.color-contrast(): Bir renk listesinden, belirtilen tek bir renge 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 varsayılan olarak tek tip LCH renk uzayını kullanır.
Yeni görünüm birimi birimleri #
Görünüm alanı boyutlandırma ile ilgili zorluklar her ikisinde de belirgindir. MDN Tarayıcı Uyumluluk Raporu 2020 ve yeni CSS Durumu 2021 anket. CSS Değerleri ve Birimleri Seviye 4 en büyük, en küçük ve dinamik görüntü alanı boyutları için yeni birimler ekler, lv*, sv*Ve dv*. Bu birimler, adres çubuğunu dikkate alarak mobil cihazlarda görünen görünümü dolduran düzenler oluşturmayı kolaylaştıracaktır.
Ek olarak, Interop 2022’nin arkasındaki satıcılar arası ekip, mevcut görüntüleme alanı ölçüm özelliklerinin birlikte çalışabilirlik durumunu araştırmak ve iyileştirmek için işbirliği yapacak. vh birim.
kaydırma #
2021 Scroll Survey Raporu, kaydırma özelliklerinin ve kaydırma uyumluluğunun uygulanmasının zor olduğunu ve iyileştirilecek birçok alana sahip olduğunu doğrular. odaklanacağız kaydırma çıtçıt, kaydırma davranışıVe aşırı kaydırma davranışı kaydırmanın platformlar arasında daha tutarlı ve sorunsuz olmasına yardımcı olmak için.
Biz de yeni keşfediyoruz kaydırma ek özellik önerileri.
alt ızgara #
bu subgrid değeri grid-template-columns Ve grid-template-rows sahip bir ızgara öğesinin olduğu anlamına gelir display: grid Uygulanan iz tanımını, üzerine yerleştirildiği ana ızgara bölümünden devralabilir.
Örneğin, aşağıdaki üç kart bileşeninin, her kartın bağımsız bir ızgarası olmasına rağmen, bitişik kart üstbilgileri ve altbilgileriyle hizalanmış bir üstbilgisi ve altbilgisi vardır. Bu model çalışır çünkü her kart, ana ızgaranın üç sırasını kapsayan bir öğedir ve ardından bu satırları karta miras almak için alt ızgarayı kullanır.
Ayrıca dahil #
- CSS Muhafazası (
containmülk) - bu
<dialog>eleman - Form kontrolleri
- Tipografi ve Kodlamalar: dahil
font-variant-alternates,font-variant-position,icbirim ve CJK metin kodlamaları - Son kullanıcıları etkileyen site uyumluluğu sorunlarına neden olan tarayıcılar arasındaki farklılıklara odaklanan Web Uyumluluğu
Aşağıdaki alanlarda Compat 2021 projesinde büyük ilerleme kaydedildi, ancak hala iyileştirme için yer var. Bu nedenle, kalan sorunların ele alınabilmesi için Interop 2022’ye dahil edilmiştir.
- En Boy Oranı
- esnek kutu
- Kafes
- Yapışkan Konumlandırma
- Dönüşümler
Soruşturma çabaları #
Interop 2022, 15 odak alanına ek olarak üç araştırma çalışması içerir. Bunlar, sorunlu ve iyileştirme gerektiren alanlardır, ancak teknik özelliklerin veya testlerin mevcut durumunun, test sonuçlarını kullanarak ilerlemeyi puanlamak için henüz yeterince iyi olmadığı durumlardır:
- düzenleme,
contenteditableVeexecCommand - İşaretçi ve Fare Olayları
- Görünüm Ölçümü
Tarayıcı satıcıları ve diğer paydaşlar, bu çabanın gelecekteki yinelemelerine dahil edilebilmeleri için bu alanlara ilişkin testlerin ve spesifikasyonların iyileştirilmesi konusunda işbirliği yapacaklardır.
Başarıyı ölçmek ve ilerlemeyi izlemek #
Var olan web platformu testleri kontrol paneli 15 odak alanındaki ilerlemeyi izlemek için kullanılacaktır. Her alan için bir dizi test tanımlanmıştır. Tarayıcılar daha sonra bu testlere göre puanlandırılır ve her alan için bir puan ve 15 alanın tümü için genel bir puan verilir.
Takip etmek ve ilerlemeyi takip etmek için şuraya göz atın: Interop 2022 kontrol paneli. Yıl boyunca, oluşturduğunuz platformun nasıl geliştiğini takip edebilir ve görebilirsiniz.
Tüm bunlar geliştiriciler için ne anlama gelecek? #
Compat 2021, Interop 2022 ve çok daha fazlası biçimindeki bu çok yıllı birlikte çalışabilirlik çabalarının amacı, geliştiricilerin uzun yıllardır deneyimledikleri sıkıntılı noktaları tam olarak kabul etmek ve ele almaktır. Ve bu, tek bir tarayıcı çabası değil, web platformunu genel olarak geliştirmek için tüm büyük tarayıcı satıcıları ve arkadaşlar arasında güçlü bir işbirliğidir.
Temelde amaç, web platformunu geliştiriciler için daha kullanılabilir ve güvenilir hale getirmektir, böylece tarayıcı tutarsızlıklarını gidermek yerine harika web deneyimleri oluşturmak için daha fazla zaman harcayabilirler.
Haydi ne düşündüğünü söyle #
Compat 2021 sırasında yapılan iyileştirmeler veya Interop 2022’deki özelliklerden herhangi biri hakkında geri bildiriminiz varsa, sizden haber almaktan memnuniyet duyarız. Bu özelliklerden hangisi işinizde en fazla fark yaratacak? Gerçekten ne hakkında heyecanlısın? GitHub deposu için dosya sorunları veya Twitter’da bize bildirin.
Interop 2022 hakkında daha fazla bilgi için: