TablesNG ra mắt trong Chromium 91 và sửa rất nhiều lỗi đã có trên nền tảng web trong nhiều năm. Những bản cập nhật này sẽ cải thiện khả năng tương thích của trình duyệt trong nỗ lực #Compat2021 và cải thiện việc sử dụng bảng trên nền tảng web nói chung. Một số vấn đề được gắn dấu sao nhiều nhất bao gồm position:
sticky theo hàng, hình học điểm ảnh 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 của nhà phát triển Chrome Aleks Totic nhằm tái cấu trúc hoàn toàn cách hiển thị bảng trên web. Bảng là một khía cạnh cụ thể gây khó khăn trong quá trình phát triển web, một phần là do quá trình phát triển của bảng.
Các 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 trang 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ó sự khác biệt lớn về hành vi của bảng trên các trình duyệt, nhiều lỗi trong số đó 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.
Bảng cũng được triển khai trong các trình duyệt trước khi có nhiều tính năng CSS: chế độ viết trực giao, position:relative, box-sizing, vùng chứa flexbox, v.v. Vì vậy, việc hỗ trợ nhiều tính năng 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 Edge triển khai lại các bảng vào năm 2018. TablesNG là một 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 bảng. Sau đây là một số thay đổi rõ ràng nhất từ việc này:
- Bật vị trí cố định trong các hàng cho các bảng dài có khả năng cuộn.
- Khắc phục việc căn chỉnh bằng hình học phụ pixel và đường viền bảng.
- Cải thiện tính năng vẽ cho nền và đường viền.
position: sticky theo hàng
Một trong những yêu cầu lớn nhất và khó chịu nhất về việc tạo kiểu cho bảng trước đây là việc thiếu tính năng hỗ trợ position: sticky trong các hàng. Tính năng này 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 các bảng dữ liệu dài. Khi cuộn tiêu đề ra khỏi chế độ xem và nhìn vào một bảng đầy các số, bạn dễ dàng quên ý nghĩa của những con số đó.
position: sticky được áp dụng cho <thead>.Lý do chúng ta gặp phải lỗi này trong thời gian dài là do position: sticky
được chỉ định rõ sau khi bảng HTML ra mắt. Trước khi khắc phục lỗi này, các tiêu đề có position: sticky dự kiến chỉ được chuyển đổi thành position: static, nhưng giờ đây, bạn có thể sử dụng position: sticky ở bất kỳ vị trí nào trong bảng: trên tiêu đề (<thead>) hoặc nhãn trục dọc.
Cải thiện tính năng vẽ đường viền và vẽ nền
Một trong những lỗi bảng cũ nhất xảy ra từ tháng 9 năm 2008. Tệp này được gửi gần như ngay khi Chrome được phát hành và không bao giờ có thể khắc phục được do cấu trúc bảng cũ. Vấn đề liên quan đến 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 ô này ở thứ tự DOM ngược, trong đó ô đầu tiên trong bảng là ô trên cùng.
Vì vậy, vấn đề ở đây là đường viền thuộc về bảng chứ không phải ô, theo cách cũ mà bảng được vẽ. Các đường viền thu gọn được vẽ khi bảng vẽ nền trước. Điều này có nghĩa 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 rằng ô màu xanh dương ở ngoài cùng bên trái đã vẽ không chính xác lên trên ô màu cam ở dưới cùng bên phải vì ô này không thể có nhiều đường viền. Trong quá trình triển khai được thiết kế lại, vấn đề này đã được giải quyết và ô đường viền màu cam sẽ vẽ chính xác lên 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 phụ pixel (căn chỉnh bảng)
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ụ cũ luôn làm tròn các giá trị đồ hoạ thành pixel. Điều này có nghĩa là khi bạn thu phóng vào và ra khỏi 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 tạo nội dung web trở nên mạnh mẽ hơn, mà còn 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 đã đảm nhậ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: là một bản viết lại từ đầu tất cả thuật toán bố cục, giúp cải thiện đáng kể độ tin cậy và hiệu suất dự đoán dễ dàng hơn.
- BlinkNG: một quá trình 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 cho phép lưu vào bộ nhớ đệm tốt hơn, có độ tin cậy cao hơn và các tính năng tham gia lại/kết xuất trễ, chẳng hạn như chế độ hiển thị nội dung và truy vấn vùng chứa.
- GPU Raster Everywhere (Tạo điểm ảnh GPU ở mọi nơi): một nỗ lực lâu dài để triển khai tính năng 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 và ảnh động theo luồng: một nỗ lực lâu dài để di chuyển tất cả các ảnh động cuộn và không tạo bố cục sang luồng trình kết hợp.
Hãy chú ý theo dõi để biết thêm thông tin cập nhật về những cải tiến này và nhiều thông tin khác!