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 akan mengoptimalkan penggunaan tabel di
platform web secara keseluruhan. Beberapa masalah yang paling berbintang mencakup position:
sticky dalam baris,
geometri subpiksel,
dan penutupan batas yang tepat.
Upaya TablesNG
TablesNG merupakan upaya selama beberapa tahun, yang dipimpin oleh developer Chrome Aleks Totic, untuk merancang ulang sepenuhnya cara tabel dirender di web. Tabel adalah area gesekan tertentu dalam pengembangan web, sebagian karena sejarahnya.
Tabel ditambahkan ke HTML pada 1994, lalu digunakan sebagai metode utama
untuk membuat tata letak halaman yang kompleks selama bertahun-tahun. File ini masih ditemukan di seluruh web,
meskipun penggunaan modern umumnya menampilkan data tabel.
Namun, ada perbedaan besar dalam perilaku tabel di berbagai browser,
banyak di antaranya terjadi karena spesifikasi tabel tidak lengkap dan kurang detail.
Tabel juga diimplementasikan di browser sebelum banyak fitur CSS:
mode penulisan ortogonal, position:relative, box-sizing, penampung flexbox,
dan lainnya. Jadi, dukungan untuk banyak fitur ini tidak konsisten.
Spesifikasi baru, Modul Tabel CSS Level 3, ditulis setelah Edge menerapkan ulang tabel 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 yang telah dihasilkan dari hal ini adalah:
- Mengaktifkan pemosisian melekat di baris untuk tabel panjang yang di-scroll.
- Memperbaiki perataan dengan geometri sub-piksel dan batas tabel.
- Peningkatan kualitas gambar untuk latar belakang dan batas.
position: sticky dalam baris
Salah satu permintaan terbesar dan hal yang paling menjengkelkan tentang 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 men-scroll header sehingga tidak terlihat dan melihat
tabel yang penuh dengan angka, Anda akan mudah lupa arti angka tersebut.
position: sticky diterapkan ke <thead>.Alasan kami memiliki bug ini begitu lama adalah karena position: sticky
ditentukan dengan baik setelah tabel HTML muncul. Sebelum perbaikan ini, header dengan
position: sticky yang diinginkan hanya dikonversi menjadi position: static, tetapi
sekarang, Anda dapat menggunakan position: sticky di mana saja dalam tabel: pada header (<thead>) atau
label sumbu vertikal.
Peningkatan kualitas gambar batas dan gambar latar belakang
Salah satu bug tabel tertua berasal dari September 2008. Bug ini dilaporkan hampir segera setelah Chrome dirilis, dan tidak pernah dapat diperbaiki karena arsitektur tabel lama. Masalah ini berkaitan dengan penggambaran tabel dan batas yang diciutkan.
Cara tabel digambar, dalam urutan z-index, adalah: sel > baris >
bagian > tabel. Kemudian, sel tersebut digambar sesuai urutan kemunculan di DOM
(Document Object Model), meskipun sel itu sendiri berada dalam urutan DOM terbalik,
dengan sel pertama dalam tabel berada di bagian paling atas.
Jadi, masalahnya di sini adalah batas merupakan bagian dari tabel, bukan sel, dengan cara lama tabel digambar. Batas yang diciutkan akan digambar saat tabel menggambar latar depannya. Artinya, satu sel tabel tidak dapat memiliki beberapa batas:
Pada contoh di atas, Anda dapat melihat bahwa sel biru paling kiri salah dicat di atas sel kanan bawah oranye karena tidak boleh memiliki beberapa batas. Dalam implementasi yang dirancang ulang, masalah ini telah dipecahkan, dan sel batas oranye digambar dengan benar di atas sel batas biru, sehingga celah tabel kedua memiliki garis batas 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, semuanya akan berubah, yang menyebabkan masalah perataan. TablesNG memperbaiki masalah perataan ini.
Membuat arsitektur ulang web
Tim Chrome tidak hanya memperkenalkan fitur baru untuk membuat pembuatan web lebih andal, tetapi mereka juga telah bekerja keras untuk meningkatkan API yang ada dan kompatibilitasnya. Faktanya, TablesNG hanyalah salah satu dari banyak project re-arsitektur yang telah dilakukan tim ini selama delapan tahun terakhir. Lainnya, meskipun tidak semua project, mencakup:
- LayoutNG: penulisan ulang dari awal semua algoritma tata letak, untuk meningkatkan keandalan dan performa yang lebih dapat diprediksi.
- BlinkNG: pembersihan sistematis dan pemfaktoran ulang mesin rendering Blink menjadi fase pipeline yang dipisahkan dengan rapi. Hal ini memungkinkan caching yang lebih baik, keandalan yang lebih tinggi, dan fitur re-entrant/rendering 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 berangkai: upaya jangka panjang untuk memindahkan semua animasi scroll dan yang bukan pemicu tata letak ke thread compositor.
Nantikan beberapa informasi lainnya tentang peningkatan ini dan lainnya.