Funcionalidades CSS no compatibles y soluciones alternativas

De un vistazo

El motor writeHtml representa el contenido en una sola pasada hacia adelante y nunca vuelve a maquetar el contenido anterior. Algunos comportamientos de las hojas de estilo en cascada (CSS) no encajan en ese modelo. Esta página enumera los comportamientos específicos que el motor no aplica y ofrece una alternativa compatible para cada caso. Para conocer el estado de verificación por módulo, consulta la matriz de compatibilidad de CSS.

Estas limitaciones están acotadas y no constituyen una hoja de ruta. Cada entrada identifica el comportamiento exacto no compatible, no la propiedad completa.

Comportamientos no compatibles

Comportamiento	Lo que no se aplica	Solución alternativa
Maquetación por desplazamiento con position: absolute / position: relative	El motor coloca las cajas en orden de documento. Los desplazamientos top/right/bottom/left que sacan una caja posicionada del flujo normal no se aplican. El posicionamiento estático sí funciona.	Usar tablas o flex en el flujo normal para colocar los elementos.
grid-template-areas con nombre	El motor no implementa la colocación mediante áreas de cuadrícula con nombre. La colocación explícita en la cuadrícula basada en líneas sí funciona.	Colocar los elementos con líneas de cuadrícula explícitas o usar una tabla.
rowspan a través de un salto de página (degradado)	Una celda con rowspan se representa en una sola página. Cuando la tabla se pagina, una celda que abarca varias filas y cruza el límite de página se fragmenta según lo descrito en el Registro de Decisión Arquitectónica (ADR-007), y una celda demasiado alta para dividirse lanza UnsplittableContentException.	Para filas agrupadas que deban permanecer intactas durante la paginación, usar una fila flotante o una fila de encabezado de categoría en lugar de un rowspan alto.
Orden de pintado del fondo con overflow: hidden	overflow: hidden no cambia el orden de pintado del fondo ni recorta el fondo de un hijo a la caja redondeada o dimensionada de un ancestro.	Aplicar el fondo al elemento propietario del recorte o evitar depender de fondos recortados.
Texto que se ajusta dentro de un elemento flex en disposición lado a lado	Un elemento flex con texto que se ajusta desborda su pista en lugar de ajustarse dentro de ella.	Usar una tabla de dos columnas con anchos de columna explícitos en píxeles.
Ancho de columna en porcentaje que se resuelve a cero	Cuando un width de columna en % no tiene una base resoluble, se analiza como 0 y activa la advertencia de compresión de columnas.	Asignar anchos explícitos en píxeles a las columnas en disposiciones lado a lado.

Véase también

• Matriz de compatibilidad de CSS — estado de verificación por módulo y funcionalidades compatibles.
• HTML: subsistema de representación de HTML+CSS a PDF — el modelo de una sola pasada que explica estos límites.
• Maquetar una tabla HTML — patrones de tabla para reemplazar el posicionamiento por desplazamiento y el texto ajustado dentro de flex.