TablesNG, Chromium 91'de kullanıma sunuldu ve yıllardır web platformunun bir parçası olan çok sayıda hatayı düzeltti. Bu güncellemeler, #Compat2021 çalışmasının bir parçası olarak tarayıcı uyumluluğunu ve web platformundaki tabloların genel olarak kullanımını iyileştirecektir. En çok yıldızlı sorunlardan bazıları arasında satırlarda position:
sticky, alt piksel geometrisi ve uygun kenarlık daraltma yer alır.
TablesNG
TablesNG, tabloların web'de oluşturulma şeklini tamamen yeniden tasarlamak için Chrome geliştiricisi Aleks Totic önderliğindeki çok yıllık bir çalışmadır. Tablolar, kısmen geçmişleri nedeniyle, web geliştirmede özellikle zorluk yaşanan bir alandır.
1994 yılında HTML'ye tablolar eklenen tablolar, yıllar boyunca karmaşık sayfa düzenleri oluşturmak için birincil yöntem olarak kullanıldı. Modern kullanım alanı genellikle tablo biçiminde veri göstermek olsa da, bu veriler web'in tamamında bulunmaktadır.
Ancak tarayıcılar arasındaki tablo davranışında büyük farklılıklar vardır. Bu farklılıkların çoğu, tablo spesifikasyonunun eksik olması ve ayrıntıların eksik olması nedeniyle ortaya çıkmıştır.
Tablolar ayrıca birçok CSS özelliğinden önce tarayıcılarda da uygulanıyordu: dikey yazma modları, position:relative, box-sizing, flexbox container'ları ve daha fazlası. Dolayısıyla bu özelliklerin birçoğuna verilen destek tutarsızdı.
CSS Tablo Modülü Düzey 3 adlı yeni spesifikasyon, Edge'in 2018'de tabloları yeniden uygulamasından sonra yazılmıştır. TablesNG, hem bu yeni spesifikasyona uymayı hem de süreç boyunca tablolardaki birçok tutarsızlığı düzeltmeyi amaçlayan bir yeniden mimari çalışmasıdır. Bu değişiklikler sonucunda görülen en göze çarpan değişikliklerden bazıları şunlardır:
- Kayan uzun tablolar için satırlarda sabit konumlandırmayı etkinleştirme.
- Alt piksel geometrisi ve tablo kenarlıklarıyla hizalamayı düzeltme.
- Arka planlar ve kenarlıklar için iyileştirilmiş boyama.
Satırlarda position: sticky
Geçmişte tabloların stil özelliklerini ayarlamayla ilgili en çok istenen ve en can sıkıcı durumlardan biri, satırlarda position: sticky desteğinin olmamasıydı. Bu özellik, siz sayfayı kaydırırken tablo başlığının sayfada kalmasını ve uzun veri tablolarına bağlam bilgisi sağlar. Başlığı kaydırarak görünümden çıktığınızda ve sayılarla dolu bir tabloya
baktığınızda bu sayıların ne anlama geldiğini kolayca unutabilirsiniz.
<thead> öğesine position: sticky uygulanmasına rağmen tablo başlığı sabit konumda kalmıyor.Uzun zamandır bu hatayla karşılaşmamızın nedeni, position: sticky öğesinin HTML tabloları çıktıktan sonra doğru bir şekilde belirtilmesidir. Bu düzeltmeden önce, tasarlanan position: sticky içeren başlıklar sadece position: static dönüştürülüyordu ancak artık tablolardaki herhangi bir yerde position: sticky kullanabilirsiniz: başlıklarda (<thead>) veya dikey eksen etiketlerinde.
Gelişmiş kenarlık boyama ve arka plan boyama
En eski tablo bugs birinin tarihi Eylül 2008'e kadar uzanır. Bu sorun, Chrome yayınlanır yayınlanmaz dosyalandı ve eski tablo mimarisi nedeniyle hiçbir zaman düzeltilemedi. Sorun, masa boyaması ve daraltılmış kenarlıklar ile ilgilidir.
Tablolar, z-index sırasına göre sırasıyla şu şekilde boyanır: hücreler > satırlar > bölümler > tablolar. Ardından, DOM'de (Belge Nesne Modeli) göründükleri sıraya göre boyanırlar. Ancak, tablodaki ilk hücre en üstte olacak şekilde ters DOM düzenindedir.
Burada sorun, tabloların boyandığı eski yöntemde kenarlıkların hücreye değil, tabloya ait olmasıdır. Daraltılmış kenarlıklar, masanın ön planı boyanırken boyanır. Yani, tek bir tablo hücresinde birden çok kenarlık olamaz:
Yukarıdaki örnekte, en soldaki mavi hücrenin birden çok kenarlığı olamayacağından sağ alttaki turuncu hücrenin yanlış bir şekilde üstünü çizdiğini görebilirsiniz. Yeniden tasarlanan uygulamada bu sorun çözülmüştür ve turuncu kenarlık hücresi mavi hücrenin üstüne doğru şekilde boyanarak ikinci tablo boşluğunun hem mavi hem de turuncu kenarlık çizgilerine sahip olmasını sağlar.
Bu hata artık Chromium ve Firefox'ta düzeltilmiştir.
Alt piksel geometrisi (tablo hizalaması)
Tablolarda piksel hizalaması, TablesNG ile düzeltilen başka bir birlikte çalışabilirlik sorunudur. Önceden, eski motor, grafik değerlerini her zaman piksele yuvarlıyordu. Bu da, sayfayı yakınlaştırıp uzaklaştırdığınızda bazı şeylerin değişeceği ve hizalama sorunlarına yol açacağı anlamına geliyordu. TablesNG, bu hizalama sorunlarını düzeltir.
Web'i yeniden tasarlama
Chrome ekibi yalnızca web yazarlığını daha güçlü hale getirecek yeni özellikler sunmakla kalmıyor, aynı zamanda mevcut API'leri ve uyumluluklarını iyileştirmek için de yoğun bir şekilde çalışıyor. Aslında TablesNG, bu ekibin son sekiz yılda üstlendiği pek çok yeniden mimari projesinden yalnızca biri. Tüm projeler olmasa da bazıları şunlardır:
- LayoutNG: Büyük ölçüde iyileştirilmiş güvenilirlik ve daha tahmin edilebilir performans için tüm düzen algoritmalarının baştan aşağı yeniden yazılması.
- BlinkNG: Blink oluşturma motorunun sistematik bir şekilde temizlenmesi ve temiz bir şekilde ayrılmış ardışık düzen aşamalarına yeniden düzenlenmesi. Bu, daha iyi önbelleğe alma, daha yüksek güvenilirlik ve içerik görünürlüğü ve kapsayıcı sorguları gibi yeniden giriş/gecikmeli oluşturma özelliklerine olanak tanır.
- GPU Raster Everywhere: Mümkün olduğunda GPU pikselleştirmesini tüm platformlarda kullanıma sunmak için uzun vadeli bir çalışma.
- İleti dizisi kaydırma ve animasyonlar: Tüm kaydırma ve düzen oluşturmayan animasyonları, birleştirici iş parçacığına taşımak için uzun süreli bir çabadır.
Bu iyileştirmeler ve daha fazlasıyla ilgili gelişmeler için takipte kalın.