Compat2021: CSS Grid uyumluluğunu GridNG ile iyileştirme
Microsoft Edge 93'ün önümüzdeki ay piyasaya sürülmesiyle birlikte, CSS Grid'in diğer uygulamalarıyla uyumluluğu önemli ölçüde artıran ve web geliştiricileri için en önemli uyumluluk sorunlarından birini ele alan CSS Grid 1 modülünün (“GridNG”) yeniden yazılmasını yayınlayacağız. Bu gönderide, yeniden yazma ve Edge ve diğer Chromium tarayıcılarında görmeyi bekleyebilecekleriniz hakkında daha fazla bilgi paylaşacağız.
Güncellenen uygulamayı bugün deneyebilirsiniz - sadece en son Microsoft Edge Beta sürümünü yükleyin ve lütfen Chromium'un hata izleyicisinde bulduğunuz sorunları bildirin !
LayoutNG , Chromium'un temel oluşturma motoru olan Blink'teki düzen motorunun çok yıllı bir yeniden yazılmasıdır. Başlangıcından bu yana, eski düzen motorundan performansı iyileştirdi ve uzun süredir devam eden sorunları giderdi. LayoutNG'nin Chrome ve Microsoft Edge 76'da satır içi ve blok düzeni desteğiyle ilk lansmanından bu yana, diğer düzen temel öğeleri (CSS Tablo Düzeni, CSS Flexbox) aşamalı olarak yeniden yazıldı, dengelendi ve başlatıldı.
Chromium projesine geçişimizi duyurduğumuzda, web'i herkes için iyileştirme taahhüdümüzü vurguladık. Microsoft Edge ve Chrome'un M93 sürümünde piyasaya sürülecek olan Blink'in CSS Grid 1 modülünün (GridNG) uygulamasının yeniden yazılması buna harika bir örnektir. Biraz arka plan sağlamak için, CSS Grid, web geliştiricilerinin satır ve sütunlardaki öğeleri hizalamasına olanak tanıyan ve iki boyutlu düzenler oluşturmak için CSS tablolarından daha sezgisel bir model sağlayan bir düzen ilkeldir. CSS Grid ayrıca, CSS Flexbox'tan popüler kavramların yanı sıra köklü grafik tasarım ilkelerinden gelen terminolojiyi de içerir.
Web'de CSS Izgarasının kullanımı son birkaç yılda yavaş ama istikrarlı bir şekilde büyüyor :
GridNG, sitelerinde Grid kullanan web geliştiricileri tarafından uzun süredir devam eden birçok sorunu ve bir uygulamanın spesifikasyona uygunluğunu ölçen Web Platformu Testlerini düzeltir. Aynı WPT testleri, GridNG etkinleştirildiğinde % 94,3'ten % 96,5'e yükselen Compat2021 puanının temelidir. Genel olarak, GridNG'yi başlatmak , Chromium'un hata izleyicisinden gelen 38 sorunu giderir .
Grid içinde görüntülerin ve değiştirilen diğer içeriğin kullanılması, geliştiricilerin Grid ile karşılaştığı birlikte çalışabilirlik sorunlarına bir örnekti. Önceden, uygulamalar arasında sınırlı uyumluluk vardı, ancak bu şimdi GridNG tarafından çözüldü. Aşağıdaki örnekler için, Gecko (Firefox için işleme motoru) ve Blink artık belirtildiği gibi doğru sonuçları veriyor.
| Önce | Sonrasında |
 |
 |
Izgaralara gömülü SVG içeriği, en boy oranının doğru şekilde korunmadığı benzer sorunlar gösterdi.
| Önce | Sonrasında |
 |
 |
GridNG, bu sorun sınıfını düzeltmek için, bileşeni yeniden yazarken spesifikasyona bağlı kalmanın yanı sıra, LayoutNG'deki diğer gelişmelerden (özellikle değiştirilen öğelerin geliştirilmiş düzeninden) yararlandı.
Uyumluluğun yanı sıra performans, geliştiriciler tarafından bildirilen bir diğer tutarlı sorundu. Geliştirilmiş önbelleğe alma mekanizmalarının yanı sıra LayoutNG'nin üzerinde çalıştığı ilkel öğeler nedeniyle GridNG, eski mimariye karşı bildirilen geçersiz kılma sorunlarından kaçınırken önemli senaryolarda daha iyi performansa sahiptir. En belirgin örnek, bu demo sitesinde görebileceğiniz, üstel karmaşıklığa sahip iç içe ızgaraların düzenidir .
Bu performans uçurumu geliştiriciler tarafından kolayca vuruldu ve canlı siteleri etkiliyor (bunun örneklerini bu Firefox hatasında ve kopyalarında görebilirsiniz). GridNG'deki iyileştirmelerimiz sayesinde, web geliştiricileri, uzun süredir birden fazla tarayıcı motorunu etkileyen bu performans sorunlarıyla Chromium'da artık karşılaşmayacak. Tüm Blink'in mükemmel regresyon mikro kıyaslamaları için eski uygulama ile pariteye veya daha iyisine geri dönmek için hala yapılması gereken bazı işler var, ancak geliştiricilerin karmaşık iç içe ızgara düzenlerini kullanmasını engelleyen ana sorunlardan birini ele almaktan mutluluk duyuyoruz.
GridNG'yi bitirmenin son bir faydası, alt ızgarayı uygulamak için kapıyı açmasıdır ( CSS Grid seviye 2 ). Bu, Blink'in uzun süredir bir özellik isteğiydi ve Chromium'un hata izleyicisinde yazı yazıldığı sırada yaklaşık 600 yıldız vardı. Eski düzen motorunun kısıtlamaları ve NG dönüştürme çabası artık faktör olmadığından, geliştiricilerin alt ızgaranın kilidini açan düzenleri elde etmelerine yardımcı olmak için çalışmaya başlamaktan heyecan duyuyoruz.
Izgara düzenlerini kullanan bir Web Geliştiricisiyseniz, lütfen en son Microsoft Edge Beta sürümünü yükleyin ve bulduğunuz sorunları Chromium'un hata izleyicisinde bildirin .
GridNG'nin geliştirilmesi, yalnızca Google'daki meslektaşlarımızla yakın işbirliği sayesinde mümkün oldu. Ian Kilpatrick ve Christian Biesinger'e kavramları açıkladıkları, tasarım geri bildirimi sağladıkları, ayrıntılı kod incelemeleri ve önemli yamalara katkıda bulundukları için çok teşekkürler!
– Daniel Libby, Baş Yazılım Mühendisliği Müdürü, Microsoft Edge