Se lanza TablesNG en Chromium 91 y corrige una tonelada de errores que han sido parte de la plataforma web durante años. Estas actualizaciones mejorarán la compatibilidad con el navegador como parte del esfuerzo #Compat2021, y el uso de tablas en la plataforma web en general. Algunos de los problemas más destacados incluyen position:
sticky en filas, geometría de subpíxeles y contraimiento de borde adecuado.
El esfuerzo de TablesNG
TablesNG es un esfuerzo de varios años, dirigido por el desarrollador de Chrome Aleks Totic, para rediseñar por completo la forma en que se renderizan las tablas en la Web. Las tablas son un área particular de inconvenientes en el desarrollo web, en parte debido a su historial.
En 1994, se agregaron tablas a HTML y, luego, se usaron como método principal para crear diseños de página complejos durante muchos años. Todavía se encuentran en la Web, aunque el uso moderno suele mostrar datos tabulares.
Sin embargo, existen grandes diferencias en el comportamiento de las tablas entre navegadores, muchas de las cuales se deben a que la especificación de las tablas estaba incompleta y carecía de detalles.
Las tablas también se implementaron en navegadores antes de muchas funciones de CSS: modos de escritura ortogonales, position:relative, box-sizing, contenedores de flexbox y mucho más. Por lo tanto, la compatibilidad con muchas de estas funciones no fue coherente.
La especificación nueva, el nivel de módulo 3 de la tabla de CSS, se escribió después de que Edge volviera a implementar las tablas en 2018. TablesNG es un esfuerzo de rediseño de la arquitectura que no solo apunta a seguir esta nueva especificación, sino también a solucionar muchas de las incoherencias de las tablas a lo largo del proceso. Algunos de los cambios más visibles que se generaron a partir de esto son los siguientes:
- Habilitar el posicionamiento fijo en filas para tablas largas en las 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 mayores inquietudes y los aspectos más frustrantes sobre el diseño de tablas en el pasado era 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 brindará contexto a las tablas de datos largas. Cuando te desplaces el encabezado y veas una tabla llena de números, es fácil olvidar lo que significan esos números.
position: sticky a <thead>.El motivo por el que hemos tenido este error durante tanto tiempo es porque position: sticky
se especificó mucho después de que se lanzaron 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 lugar de las tablas: en encabezados (<thead>) o etiquetas del eje vertical.
Pintura de bordes y de fondo mejorada
Uno de los bugs de tabla más antiguos data de septiembre de 2008. Se archivó casi apenas se lanzó Chrome y nunca pudo arreglarse debido a la antigua arquitectura de la tabla. El problema rodea a la pintura de tablas y los bordes contraídos.
La forma en que se pintan las tablas, en orden de z-index, es: celdas > filas > secciones > tablas. Luego, se pintan según el orden en el que aparecen en el DOM (Modelo de objetos del documento), aunque las celdas en sí están en orden inverso del DOM, donde la primera celda de la tabla es la de más arriba.
El problema aquí es que los bordes pertenecen a la tabla, no a la celda, como antes se pintaban las tablas. Los bordes contraídos se pintan cuando la tabla pinta el 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 pintó de forma incorrecta sobre la celda naranja inferior derecha, ya que no podía tener varios bordes. En la implementación rediseñada, esto está resuelto 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 ya se corrigió en Chromium y Firefox.
Geometría de los subpíxeles (alineación de la tabla)
La alineación de píxeles en las tablas es otro problema de interoperabilidad que se solucionó con TablesNG. Anteriormente, el motor anterior siempre redondeaba los valores de los gráficos al píxel. Eso significa que, a medida que acercas y alejas la página, las cosas se cambian, lo que provoca problemas de alineación. TablesNG corrige estos problemas de alineación.
Rediseña la Web
El equipo de Chrome no solo introdujo nuevas funciones para mejorar la solidez de la creación web, 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 rediseño de arquitectura que este equipo asumió durante los últimos ocho años. Otros, aunque no en todos los proyectos, se incluyen los siguientes:
- LayoutNG: una reescritura desde cero de todos los algoritmos de diseño para mejorar en gran medida la confiabilidad y el rendimiento más predecible.
- BlinkNG: una limpieza y la refactorización sistemáticas 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 reentramiento o renderización retrasada, como la visibilidad del contenido y las consultas de contenedores.
- Raster de GPU en todas partes: Es un esfuerzo a largo plazo para implementar la rasterización de GPU en todas las plataformas, siempre que sea posible.
- Desplazamiento y animaciones de subprocesos: Es un esfuerzo a largo plazo para mover todas las animaciones de desplazamiento y las que no generan diseño al subproceso del compositor.
No te pierdas las novedades sobre estas mejoras y mucho más.