TablesNG se lanzó en Chromium 91 y corrige una gran cantidad de errores que forman parte de la plataforma web desde hace años. Estas actualizaciones mejorarán la compatibilidad con los navegadores como parte del esfuerzo de #Compat2021 y mejorarán el uso de tablas en la plataforma web en general. Algunos de los problemas con más estrellas incluyen position:
sticky en filas, geometría de subpíxeles y cierre de bordes adecuado.
El esfuerzo de TablesNG
TablesNG es un esfuerzo de varios años, dirigido por el desarrollador de Chrome Aleks Totic, para reestructurar por completo la forma en que se renderizan las tablas en la Web. Las tablas son un área particular de fricción en el desarrollo web, en parte debido a su historia.
Las tablas se agregaron al HTML en 1994 y, luego, se usaron como método principal para crear diseños de páginas complejos durante muchos años. Aún se encuentran en toda la Web, aunque el uso moderno suele ser para mostrar datos tabulares.
Sin embargo, existen grandes diferencias en el comportamiento de las tablas entre los navegadores, muchas de las cuales se deben a que la especificación de las tablas es incompleta y carece de detalles.
Las tablas también se implementaron en los navegadores antes que muchas funciones de CSS, como los modos de escritura ortogonales, position:relative, box-sizing, los contenedores de flexbox y mucho más. Por lo tanto, la compatibilidad con muchas de estas funciones no era uniforme.
La nueva especificación, el módulo de tablas de CSS de nivel 3, se escribió después de que Edge reimplementó las tablas en 2018. TablesNG es un esfuerzo de rearquitectura que tiene como objetivo no solo seguir esta nueva especificación, sino también corregir muchas de las incoherencias en las tablas durante el proceso. Estos son algunos de los cambios más visibles que se generaron a partir de este cambio:
- Habilita la posición fija en filas para tablas largas que se desplazan.
- Se corrigió la alineación con la geometría de subpíxeles y los bordes de la tabla.
- Se mejoró la pintura de fondos y bordes.
position: sticky en filas
Una de las solicitudes más grandes y frustrantes sobre el diseño de tablas en el
pasado fue la falta de compatibilidad con position: sticky en las filas. Esta función permitiría que un encabezado de tabla permanezca en la página mientras te desplazas y le dé contexto a las tablas de datos largas. Cuando dejas el encabezado fuera de la vista y ves una tabla llena de números, es fácil olvidar lo que significan.
position: sticky a <thead>.La razón por la que hemos tenido este error durante tanto tiempo es porque position: sticky se especificó mucho después de que salieron las tablas HTML. Antes de esta corrección, los encabezados con un position: sticky previsto solo se convertían en position: static, pero ahora puedes usar position: sticky en cualquier parte de las tablas: en encabezados (<thead>) o en etiquetas de ejes verticales.
Mejoras en la pintura de bordes y de fondo
Uno de los errores de tablas más antiguos data de septiembre de 2008. Se archivó casi tan pronto como se lanzó Chrome y nunca se pudo corregir debido a la antigua arquitectura de la tabla. El problema es sobre la pintura de tablas y los bordes contraídos.
Las tablas se pintan, en orden de z-index, de la siguiente manera: celdas > filas > secciones > tablas. Luego, se pintan según el orden en que aparecen en el DOM (modelo de objetos del documento), aunque las celdas están en orden inverso del DOM, en el que la primera celda de la tabla es la más alta.
El problema aquí es que los bordes pertenecen a la tabla, no a la celda, de la misma manera que se pintaban las tablas. Los bordes contraídos se pintan cuando la tabla pinta su primer plano. Esto significa que una sola celda de la tabla no puede tener varios bordes:
En el ejemplo anterior, puedes ver que la celda azul de la izquierda se pintaba de forma incorrecta sobre la celda naranja de la esquina inferior derecha, ya que no podía tener varios bordes. En la implementación con la nueva arquitectura, se resuelve este problema, y la celda del borde naranja se pinta correctamente sobre la azul, lo que permite que la segunda brecha de la tabla tenga líneas de borde azul y naranja.
Este error se corrigió en Chromium y Firefox.
Geometría de subpíxeles (alineación de la tabla)
La alineación de píxeles en las tablas es otro problema de interoperabilidad que se corrigió con TablesNG. Anteriormente, el motor anterior siempre redondeaba los valores de los gráficos al píxel. Esto significaba que, a medida que acercabas y alejabas la página, los elementos se cambiaban, lo que provocaba problemas de alineación. TablesNG corrige estos problemas de alineación.
Rediseña la Web
El equipo de Chrome no solo presentó nuevas funciones para que la creación de contenido web sea más sólida, sino que también trabajó arduamente para mejorar las APIs existentes y su compatibilidad. De hecho, TablesNG es solo uno de los muchos proyectos de rearquitectura que este equipo asumió en los últimos ocho años. Otros, aunque no todos los proyectos, incluyen lo siguiente:
- LayoutNG: Una reescritura desde cero de todos los algoritmos de diseño para mejorar significativamente la confiabilidad y brindar un rendimiento más predecible.
- BlinkNG: Es una limpieza y refactorización sistemática del motor de renderización de Blink en fases de canalización separadas de forma clara. Esto permite un mejor almacenamiento en caché, una mayor confiabilidad y funciones de renderización reentrante o retrasada, como visibilidad del contenido y consultas de contenedor.
- Rasterización de GPU en todas partes: un esfuerzo a largo plazo para lanzar la rasterización de GPU en todas las plataformas, siempre que sea posible.
- Animaciones y desplazamiento en subprocesos: Es un esfuerzo a largo plazo para mover todo el desplazamiento y las animaciones que no inducen el diseño al subproceso del compositor.
No te pierdas las novedades sobre estas mejoras y mucho más.