TablesNG, Chromium 91'de kullanıma sunulmuş ve yıllardır web platformunun bir parçası olan birçok hatayı düzeltmiştir. Bu güncellemeler, #Compat2021 çalışması kapsamında tarayıcı uyumluluğunu iyileştirecek ve web platformunda tabloların kullanımını genel olarak iyileştirecektir. Satırlarda position:
sticky, alt piksel geometrisi ve uygun kenar daraltma, en çok yıldızlı sorunlardan bazılarıdır.
TablesNG çalışması
TablesNG, Chrome geliştiricisi Aleks Totic liderliğinde, tabloların web'de oluşturulma şeklini tamamen yeniden tasarlamak için yürütülen çok yıllık bir çalışmadır. Tablolar, kısmen geçmişleri nedeniyle web geliştirmede her zaman sorunlu bir alandır.
Tablolar 1994'te HTML'ye eklendi ve ardından uzun yıllar boyunca karmaşık sayfa düzenleri oluşturmak için birincil yöntem olarak kullanıldı. Bu tablolar, web'in her yerinde bulunsa da günümüzde genellikle tablo biçiminde verileri görüntülemek için kullanılır.
Ancak tarayıcılar arasında tablo davranışında büyük farklılıklar vardır. Bunların çoğu, tablo spesifikasyonunun eksik ve ayrıntılı olmaması nedeniyle ortaya çıkmıştır.
Tablolar, birçok CSS özelliğinden önce tarayıcılara da uygulandı: ortogonal yazma modları, position:relative, box-sizing, esnek kutu kapsayıcılar ve daha fazlası. Bu nedenle, bu özelliklerin çoğu için destek tutarlı değildi.
CSS Tablo Modülü Seviye 3 adlı yeni spesifikasyon, Edge 2018'de tabloları yeniden uyguladıktan sonra yazılmıştır. TablesNG, yalnızca bu yeni spesifikasyonu takip etmeyi değil, aynı zamanda tablolardaki tutarsızlıkların çoğunu düzeltmeyi amaçlayan bir yeniden mimari çalışmasıdır. Bu süreçte en belirgin değişikliklerden bazıları şunlardır:
- Kaydırılan uzun tablolar için satırlarda yapışkan konumlandırmayı etkinleştirme
- Alt piksel geometrisi ve tablo kenarlıkları ile hizalamayı düzeltme.
- Arka planlar ve kenarlıklarda boyama işlemi iyileştirildi.
Satırlarda position: sticky
Geçmişte tabloları biçimlendirmeyle ilgili en çok istenen ve en can sıkıcı şeylerden biri, satırlarda position: sticky için destek olmamasıydı. Bu özellik, siz sayfayı kaydırırken tablo başlığının sayfada kalmasını sağlar ve uzun veri tablolarına bağlam bilgisi verir. Başlığı kaydırarak görünmez hale getirdiğinizde ve sayılarla dolu bir tabloya baktığınızda bu sayıların ne anlama geldiğini unutmanız kolaydır.
position: sticky, <thead>'ye uygulanmasına rağmen tablo başlığı yapışkan konumda kalmıyor.Bu hatayı uzun süredir görmemizin nedeni, position: sticky
HTML tabloları kullanıma sunulduktan çok sonra belirtilmiş olmasıdır. Bu düzeltmeden önce, planlanan position: sticky içeren başlıklar kısa süre önce position: static biçimine dönüştürülüyordu. Ancak artık position: sticky özelliğini tabloların herhangi bir yerinde kullanabilirsiniz: başlıklarda (<thead>) veya dikey eksen etiketlerinde.
İyileştirilmiş sınır boyama ve arka plan boyama
En eski tablo hatalarından biri Eylül 2008'e dayanır. Bu sorun, Chrome yayınlandıktan hemen sonra bildirildi ve eski tablo mimarisi nedeniyle hiçbir zaman düzeltilemez. Sorun, tablo boyama ve daraltılmış kenarlıklar ile ilgilidir.
Tablolar, z-index sırasına göre şu şekilde boyanır: hücreler > satırlar > bölümler > tablolar. Ardından, DOM'da (Belge Nesne Modeli) göründükleri sıraya göre boyanırlar. Ancak hücrelerin kendisi ters DOM sırasına göredir. Bu sırada tablodaki ilk hücre en üstte olur.
Buradaki sorun, tabloların eski boyama yönteminde olduğu gibi kenarlıkların hücreye değil, tabloya ait olmasıdır. Tablo ön planını boyarken daraltılmış kenarlıklar da boyanır. Bu, tek bir tablo hücresinin birden çok kenarlığının olamayacağı anlamına gelir:
Yukarıdaki örnekte, en soldaki mavi hücrenin birden fazla kenarlığı olamayacağı için sağ alttaki turuncu hücrenin üzerine yanlış şekilde boyandığını görebilirsiniz. Yeniden tasarlanmış uygulamada bu sorun çözülür ve turuncu kenar hücresi mavi hücrenin üzerine doğru şekilde boyanır. Böylece ikinci tablo boşluğu hem mavi hem de turuncu kenar çizgilerine sahip olur.
Bu hata artık Chromium ve Firefox'ta düzeltildi.
Alt piksel geometrisi (tablo hizalama)
Tablolardaki piksel hizalaması, TablesNG ile düzeltilen başka bir birlikte çalışabilirlik sorunudur. Eski motor daha önce grafik değerlerini her zaman piksele yuvarlıyordu. Bu da sayfayı yakınlaştırıp uzaklaştırırken öğelerin kaymasına ve hizalama sorunlarına yol açıyordu. TablesNG, bu hizalama sorunlarını düzeltir.
Web'i yeniden tasarlama
Chrome ekibi, web içeriği oluşturmayı daha güçlü hale getirmek için yalnızca yeni özellikler sunmakla kalmıyor, aynı zamanda mevcut API'leri ve bunların uyumluluğunu iyileştirmek için de yoğun şekilde çalışıyor. TablesNG, bu ekibin son sekiz yılda üstlendiği birçok yeniden mimari projesinden yalnızca biridir. Tüm projeler olmasa da diğer projeler şunlardır:
- LayoutNG: Çok daha yüksek güvenilirlik ve daha tahmin edilebilir performans için tüm düzen algoritmalarının sıfırdan yeniden yazılmış hali.
- BlinkNG: Blink oluşturma motorunun sistematik bir şekilde temizlenmesi ve net bir şekilde ayrılmış ardışık düzen aşamalarına yeniden düzenlenmesi. Bu sayede daha iyi önbelleğe alma, daha yüksek güvenilirlik ve content-visibility ile container sorguları gibi yeniden giren/gecikmeli oluşturma özellikleri kullanılabilir.
- Her Yerde GPU Rastreleme: Mümkün olduğunda tüm platformlarda GPU rasterleştirmeyi kullanıma sunma hedefiyle uzun vadeli bir çalışmadır.
- Dizili kaydırma ve animasyonlar: Tüm kaydırma ve düzene neden olmayan animasyonlar, uzun vadeli bir çalışmayla birleştiriciye aktarıldı.
Bu iyileştirmeler ve daha fazlası hakkında daha fazla güncelleme için takipte kalın.