Fecha de publicación: 11 de junio de 2025
Dile adiós a los hacks de borde y pseudoelementos, y dale la bienvenida a las decoraciones de espacio de CSS.
El equipo de Microsoft Edge se complace en anunciar que las decoraciones de espacios de CSS, una nueva forma de aplicar diseño a los espacios entre elementos en diseños flexibles, de cuadrícula y de varias columnas, ya están disponibles para la prueba para desarrolladores en Chrome y Edge 139.
Pruébala y comparte tus comentarios para ayudar a definir el futuro de esta API.
Vínculos útiles
Problema
Los espacios de diseño en los componentes de la IU, como calendarios, tarjetas o cuadrículas de datos, pueden mejorar en gran medida la legibilidad y agregar a la estética general. Sin embargo, lograr este efecto en los diseños de cuadrícula y flexbox tradicionalmente requirió soluciones alternativas incómodas con bordes, pseudoelementos o trucos de fondo. Estas soluciones pueden ser problemáticas por varios motivos.
- No son intuitivos: Introducen dependencias estructurales para el diseño visual, lo que va en contra de los principios del HTML semántico.
- No son accesibles: A menudo, requieren elementos DOM adicionales, que podrían interferir con las tecnologías de accesibilidad, como los lectores de pantalla.
- Difíciles de mantener: requieren una lógica de diseño complicada y dificultan la aplicación de un estilo coherente en todos los componentes.
- Afectan el rendimiento: Estas soluciones pueden agregar elementos innecesarios al DOM, lo que puede generar problemas de rendimiento.
Si bien la plataforma web ya admite espacios de diseño con la propiedad column-rule, por el momento, esto se limita solo a los diseños de varias columnas. Los desarrolladores web llevan mucho tiempo solicitando una forma coherente de aplicar diseño a los espacios en otros tipos de diseño relevantes, como la cuadrícula y el flexbox.
La solución: decoraciones de espacios de CSS
Las decoraciones de espacio extienden la propiedad column-rule para que funcione con otros tipos de diseño, como cuadrícula y flexbox, y presentan una nueva propiedad row-rule para complementarla. Esto brinda coherencia y nuevas opciones de personalización a la forma en que se aplica diseño a los espacios en diferentes tipos de diseño.
Las decoraciones de espacios de CSS ofrecen los siguientes beneficios:
- Sin impacto en el diseño: Las decoraciones son puramente visuales. No afectan el diseño ni el espaciado, por lo que puedes adoptarlos sin temor a romper los diseños existentes.
- Sintaxis de repetición: Al igual que en CSS Grid, puedes usar la sintaxis
repeat()para crear patrones de decoraciones en diferentes partes de un contenedor, lo que permite diseños ricos y coherentes con CSS mínimo. - Marcado más limpio: No se necesitan elementos adicionales ni pseudoelementos, solo se deben aplicar estilos directamente a los espacios.
- Personalización: Las nuevas propiedades de CSS, como
*rule-break,*rule-outsetygap-rule-paint-order, permiten más opciones de personalización más allá de los estilos de reglas tradicionales de ancho, estilo y color.
Con las decoraciones de espacios de CSS, es más fácil que nunca crear diseños de página visualmente distintos y fáciles de mantener.
Decoraciones de espacios en acción
Para jugar con las decoraciones de espacios de CSS hoy, usa un navegador que las admita: Edge o Chrome, a partir de la versión 139, y activa o desactiva la marca Enable Experimental Web Platform Features en edge://flags o chrome://flags.
Área de juegos interactiva para desarrolladores
Para probar los diferentes tipos de diseños en los que se admiten las decoraciones de espacios de CSS y con todas las propiedades nuevas, prueba nuestro campo de pruebas interactivo para desarrolladores.
Menú de opciones
En la demostración del menú de opciones, se muestra cómo usar la propiedad column-rule-break: intersection para interrumpir las decoraciones de espacios de columna en cada intersección visible con espacios de fila.
La demostración también usa column-rule-offset: -15px para ajustar la longitud de las decoraciones y alejarlas de los bordes de cada intersección.
Notebook
En la demostración del notebook, row-rule-break: none garantiza que las decoraciones de fila no se interrumpan en las intersecciones: se ejecutan de forma continua de la izquierda a la derecha del contenedor.
Por otro lado, column-rule-break: spanning-item garantiza que las decoraciones de columna no se pinten detrás de los elementos de extensión; comienzan y terminan en los elementos de extensión que forman una intersección en T visible.
La propiedad row-rule usa la función repeat() para tener un control preciso sobre cómo se aplican las decoraciones de espacio en las diferentes secciones del diseño.
Esto permite un patrón de diseño en el que las reglas de fila se ocultan en el encabezado y el pie de página, son más gruesas alrededor del contenido principal y más sutiles en otros lugares.
Noticias diarias de CSS
La demo de Daily CSS News usa un diseño de estilo de revista y define decoraciones de espacios de CSS en varios contenedores de cuadrícula y flexbox.
Observa el juego de Sudoku de la derecha, que usa una cuadrícula de 9 × 9 y el patrón de repetición para dibujar las líneas finas y gruesas entre las filas y las columnas:
.sudoku {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
gap: 6px;
column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
column-rule-style: solid;
column-rule-color: var(--secondary);
row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
row-rule-style: solid;
row-rule-color: var(--secondary);
}
Llamado a comentarios
Nos complace que pruebes las decoraciones de espacios de CSS. Creemos que resuelve un problema habitual y nos encantaría conocer tus comentarios sobre ella para poder definir mejor la función y que se adapte a tus necesidades.
La función de decoraciones de espacios de CSS aún se está implementando en Chromium. Si la pruebas, ten en cuenta que aún estamos trabajando activamente en ella y que es posible que encuentres casos en los que no se comporte como se espera. Algunas de las limitaciones actuales implican animar decoraciones de espacios y usar una gran cantidad de segmentos de cuadrícula.
Si encuentras un error o tienes alguna idea sobre la función, comparte tus comentarios abriendo un nuevo error de Chromium.