TablesNG diluncurkan di Chromium 91, dan memperbaiki banyak bug
yang telah menjadi bagian dari platform web selama bertahun-tahun. Update ini akan meningkatkan
kompatibilitas browser sebagai bagian dari
upaya #Compat2021, dan meningkatkan penggunaan tabel di
platform web secara keseluruhan. Beberapa masalah yang paling banyak diberi bintang mencakup position:
sticky dalam baris,
geometri subpiksel,
dan
penciutan batas yang tepat.
Upaya TablesNG
TablesNG adalah upaya multi-tahun, yang dipimpin oleh developer Chrome, Aleks Totic, untuk sepenuhnya merancang ulang cara tabel dirender di web. Tabel adalah area hambatan tertentu dalam pengembangan web, sebagian karena historinya.
Tabel ditambahkan ke HTML pada 1994, lalu digunakan sebagai metode utama
untuk membuat tata letak halaman yang kompleks selama bertahun-tahun. Tabel tersebut masih dapat ditemukan di seluruh web,
meskipun penggunaan modern umumnya menampilkan data tabulasi.
Namun, ada perbedaan besar dalam perilaku tabel di seluruh browser,
banyak di antaranya terjadi karena spesifikasi tabel tidak lengkap dan tidak memiliki detail.
Tabel juga diimplementasikan di browser sebelum banyak fitur CSS:
mode penulisan ortogonal, position:relative, box-sizing, container flexbox,
dan lainnya. Jadi, dukungan untuk banyak fitur ini tidak konsisten.
Spesifikasi baru, CSS Table Module Level 3, ditulis setelah tabel Edge diimplementasikan kembali pada tahun 2018. TablesNG adalah upaya arsitektur ulang yang bertujuan untuk tidak hanya mengikuti spesifikasi baru ini, tetapi juga memperbaiki banyak inkonsistensi dalam tabel di sepanjang prosesnya. Beberapa perubahan yang paling terlihat adalah:
- Mengaktifkan penempatan melekat dalam baris untuk tabel panjang yang dapat di-scroll.
- Memperbaiki perataan dengan geometri sub-piksel dan batas tabel.
- Peningkatan kualitas lukisan untuk latar belakang dan batas.
position: sticky dalam baris
Salah satu permintaan terbesar dan hal yang paling menjengkelkan tentang menata gaya tabel di
masa lalu adalah kurangnya dukungan untuk position: sticky dalam baris. Fitur ini akan memungkinkan header tabel tetap berada di halaman saat Anda men-scroll, dan memberikan konteks ke tabel data yang panjang. Saat Anda menggulir {i>header<i} hingga terlihat dan melihat
tabel yang penuh dengan angka, mudah untuk melupakan arti angka-angka itu.
position: sticky diterapkan ke <thead>.Alasan kami mengalami bug ini sejak lama adalah karena position: sticky
ditentukan jauh setelah tabel HTML keluar. Sebelum perbaikan ini, header dengan
position: sticky yang dimaksudkan hanya dikonversi menjadi position: static, tetapi
sekarang, Anda dapat menggunakan position: sticky di mana saja dalam tabel: pada header (<thead>) atau
label sumbu vertikal.
Pengecatan batas dan lukisan latar belakang yang lebih baik
Salah satu tabel bugs terlama berasal dari September 2008. Masalah ini diajukan segera setelah Chrome dirilis, dan tidak pernah dapat diperbaiki karena adanya arsitektur tabel lama. Masalah ini berkaitan dengan pengecatan tabel dan batas yang diciutkan.
Cara menggambar tabel, dalam urutan z-index, adalah: sel > baris >
bagian > tabel. Sel-sel tersebut kemudian digambar berdasarkan urutan kemunculannya di DOM (Document Object Model), meskipun sel-sel itu sendiri berada dalam urutan DOM terbalik, dengan sel pertama dalam tabel adalah yang paling atas.
Masalahnya di sini adalah bahwa {i>border<i} ada di tabel, bukan pada sel, seperti cara lama yang digunakan untuk menggambar tabel. Batas yang diciutkan akan digambar saat tabel menggambar latar depan. Ini berarti satu sel tabel tidak bisa memiliki beberapa {i>border<i}:
Pada contoh di atas, Anda dapat melihat bahwa sel biru paling kiri salah dicat di atas sel kanan bawah berwarna oranye karena tidak dapat memiliki beberapa batas. Dalam implementasi yang dibangun ulang, hal ini dapat diselesaikan, dan sel batas oranye digambarkan dengan benar di atas sel batas berwarna biru, sehingga celah pada tabel kedua dapat memiliki garis batas berwarna biru dan oranye.
Bug ini kini telah diperbaiki di Chromium dan Firefox.
Geometri sub-piksel (perataan tabel)
Perataan piksel dalam tabel adalah masalah interoperabilitas lain yang telah diperbaiki dengan TablesNG. Sebelumnya, mesin lama selalu membulatkan nilai grafis ke piksel. Artinya, saat Anda memperbesar dan memperkecil halaman, segala sesuatunya akan berubah, sehingga menyebabkan masalah perataan. TablesNG memperbaiki masalah penyelarasan ini.
Merancang ulang web
Tim Chrome tidak hanya memperkenalkan fitur baru untuk membuat penulisan web lebih tangguh, tetapi mereka juga bekerja keras untuk meningkatkan API yang ada dan kompatibilitasnya. Faktanya, TablesNG hanyalah salah satu dari banyak project arsitektur ulang yang pernah dilakukan tim ini selama delapan tahun terakhir. Namun, project lainnya, meskipun tidak semua, mencakup:
- LayoutNG: penulisan ulang dasar dari semua algoritma tata letak, untuk keandalan yang jauh lebih baik dan performa yang lebih dapat diprediksi.
- BlinkNG: pembersihan sistematis dan pemfaktoran ulang mesin rendering Blink ke dalam fase pipeline yang dipisahkan secara rapi. Hal ini memungkinkan penyimpanan cache yang lebih baik, keandalan yang lebih tinggi, dan fitur rendering ulang/tertunda seperti visibilitas konten dan kueri penampung.
- GPU Raster Everywhere: upaya jangka panjang untuk meluncurkan rasterisasi GPU di semua platform, jika memungkinkan.
- Scroll dan animasi dengan thread: upaya jangka panjang untuk memindahkan semua animasi scroll dan animasi yang tidak menyebabkan tata letak ke thread compositor.
Nantikan beberapa pembaruan lainnya tentang peningkatan ini dan lainnya.