TablesNG ra mắt trong Chromium 91 và khắc phục rất nhiều lỗi đã tồn tại trên nền tảng web trong nhiều năm qua. Những bản cập nhật này sẽ cải thiện khả năng tương thích với trình duyệt trong nỗ lực #Compat2021 và cải thiện việc sử dụng các bảng trên nền tảng web nói chung. Một số vấn đề được quan tâm nhiều nhất bao gồm position:
sticky trong hàng, hình học pixel phụ và thu gọn đường viền đúng cách.
Nỗ lực của TablesNG
TablesNG là một nỗ lực trong nhiều năm, dưới sự lãnh đạo của nhà phát triển Chrome Aleks Totic, để tái cấu trúc lại hoàn toàn cách các bảng hiển thị trên web. Bảng là một vấn đề cụ thể trong quá trình phát triển web, một phần là do lịch sử của chúng.
Bảng được thêm vào HTML vào năm 1994, sau đó được dùng làm phương thức chính để tạo bố cục trang phức tạp trong nhiều năm. Bạn vẫn có thể tìm thấy các báo cáo này trên web,
mặc dù cách sử dụng hiện đại thường là để hiển thị dữ liệu dạng bảng.
Tuy nhiên, có những khác biệt lớn về hành vi trong bảng trên các trình duyệt, nhiều lý do trong số này xảy ra do quy cách của bảng chưa hoàn chỉnh và thiếu thông tin chi tiết.
Các bảng cũng được triển khai trong trình duyệt trước nhiều tính năng CSS:
chế độ ghi trực giao, position:relative, box-sizing, vùng chứa flexbox,
và nhiều tính năng khác. Vì vậy, khả năng hỗ trợ nhiều tính năng trong số này không nhất quán.
Thông số kỹ thuật mới, Mô-đun bảng CSS cấp 3, được viết sau khi triển khai lại các bảng trong Edge vào năm 2018. TablesNG là nỗ lực tái cấu trúc nhằm không chỉ tuân theo quy cách mới này, mà còn khắc phục nhiều điểm không nhất quán trong các bảng. Sau đây là một số thay đổi dễ thấy nhất:
- Bật vị trí cố định trong hàng cho các bảng dài cuộn.
- Sửa lỗi căn chỉnh với đường viền bảng và hình học pixel phụ.
- Cải thiện tính năng vẽ cho nền và đường viền.
position: sticky trong hàng
Một trong những câu hỏi lớn nhất và điều khó chịu nhất về việc tạo kiểu trước đây
là việc thiếu hỗ trợ cho position: sticky trong các hàng. Tính năng này sẽ cho phép tiêu đề bảng vẫn xuất hiện trên trang khi bạn cuộn và cung cấp ngữ cảnh cho bảng dữ liệu dài. Vào thời điểm bạn cuộn tiêu đề ra khỏi chế độ xem và đang xem một bảng đầy số, bạn rất dễ quên ý nghĩa của các số đó.
position: sticky đã được áp dụng cho <thead>.Lý do chúng tôi gặp lỗi này lâu như vậy là vì position: sticky
được chỉ định tốt sau khi bảng HTML xuất hiện. Trước khi sửa lỗi này, các tiêu đề có
position: sticky mong muốn chỉ được chuyển đổi thành position: static, nhưng
hiện bạn có thể sử dụng position: sticky ở mọi vị trí trong bảng: trên tiêu đề (<thead>) hoặc
nhãn trục tung.
Cải thiện tính năng vẽ đường viền và vẽ nền
Một trong những bugs trong bảng cũ nhất có từ tháng 9 năm 2008. Nội dung này được gửi gần như ngay khi Chrome ra mắt và không bao giờ khắc phục được do cấu trúc bảng cũ. Sự cố này xảy ra xung quanh việc vẽ bảng và đường viền đã thu gọn.
Cách vẽ bảng, theo thứ tự z-index, là: ô > hàng > phần > bảng. Sau đó, các ô này được vẽ theo thứ tự xuất hiện trong DOM (Mô hình đối tượng tài liệu), mặc dù bản thân các ô được sắp xếp theo thứ tự DOM ngược, trong đó ô đầu tiên trong bảng là ô trên cùng.
Vì vậy, vấn đề ở đây là các đường viền thuộc về bảng, chứ không phải ô, theo cách cũ mà bảng được vẽ. Đường viền thu gọn được sơn khi bảng vẽ nền trước. Tức là một ô trong bảng không thể có nhiều đường viền:
Trong ví dụ trên, bạn có thể thấy ô màu xanh dương ngoài cùng bên trái đã được vẽ không chính xác lên trên ô màu cam dưới cùng bên phải vì không thể có nhiều đường viền. Trong quá trình triển khai thiết kế lại, vấn đề này đã được giải quyết và ô đường viền màu cam vẽ đúng cách trên ô màu xanh dương, cho phép khoảng trống bảng thứ hai có cả đường viền màu xanh dương và màu cam.
Lỗi này hiện đã được khắc phục trong Chromium và Firefox.
Hình học pixel phụ (căn chỉnh bảng)
Việc căn chỉnh pixel trong bảng là một vấn đề khác về khả năng tương tác đã được khắc phục bằng TablesNG. Trước đây, công cụ đồ hoạ cũ luôn làm tròn các giá trị đồ hoạ đến điểm ảnh. Điều này có nghĩa là khi bạn phóng to và thu nhỏ trang, mọi thứ sẽ thay đổi, gây ra vấn đề về căn chỉnh. TablesNG khắc phục các vấn đề căn chỉnh này.
Tái cấu trúc web
Nhóm Chrome không chỉ giới thiệu các tính năng mới giúp việc biên soạn web trở nên mạnh mẽ hơn mà họ còn đang nỗ lực cải thiện các API hiện có và khả năng tương thích của các API đó. Trên thực tế, TablesNG chỉ là một trong nhiều dự án tái cấu trúc mà nhóm này đã thực hiện trong 8 năm qua. Các dự án khác (mặc dù không phải tất cả) bao gồm:
- LayoutNG: một bản viết lại từ đầu cho tất cả thuật toán bố cục, để cải thiện đáng kể độ tin cậy và hiệu suất dễ dự đoán hơn.
- BlinkNG: một hoạt động dọn dẹp và tái cấu trúc có hệ thống của công cụ kết xuất Blink thành các giai đoạn quy trình được tách biệt rõ ràng. Điều này giúp cải thiện khả năng lưu vào bộ nhớ đệm tốt hơn, độ tin cậy cao hơn và các tính năng kết xuất lại/bị trễ như khả năng hiển thị nội dung và truy vấn vùng chứa.
- GPU Raster Everywhere: nỗ lực lâu dài để triển khai quá trình tạo điểm ảnh GPU trên tất cả các nền tảng, bất cứ khi nào có thể.
- Cuộn theo chuỗi và ảnh động: một nỗ lực lâu dài để di chuyển tất cả các ảnh động cuộn và ảnh động không tạo ra bố cục sang luồng của trình tổng hợp.
Hãy theo dõi để biết thêm một số thông tin cập nhật về những cải tiến này và nhiều nội dung khác!