Una nueva forma de dibujar separadores en CSS: `CSS Gap Decorations`

• Agregar separadores entre secciones en una página web es una técnica de diseño común para organizar claramente el contenido y mejorar la legibilidad
• Se pueden agregar separadores con técnicas CSS existentes como border, pero tienen limitaciones como cambios de tamaño y la necesidad de código adicional
• CSS Gap Decorations resuelve estos problemas al agregar propiedades como column-rule y row-rule

Técnicas tradicionales de separadores en CSS y sus limitaciones

• La propiedad border es una forma común de agregar separadores, pero puede generar los siguientes problemas
  • Al agregar border, el tamaño del elemento puede cambiar
  • Se necesita escribir código adicional para el primer y el último elemento
  • Si hay saltos de línea en un layout con Flexbox, el separador puede no cubrir toda el área
• También se pueden agregar separadores usando los pseudoelementos ::before y ::after, pero existen las siguientes limitaciones
  • Se necesita código adicional para el primer y el último elemento
  • Se requiere código complejo de posicionamiento absoluto
• Se puede simular un separador aplicando un color de fondo al contenedor grid y configurando un color de fondo en los ítems
  • No se puede ajustar la longitud del separador
  • Si hay celdas vacías, se verá el color de fondo
  • Si los ítems no llenan la celda, se verá el color de fondo
  • No funciona si el fondo de la página no es de un solo color
• En layouts multicolumna se pueden agregar separadores con la propiedad column-rule, pero existen las siguientes restricciones
  • Solo funciona en layouts multicolumna
  • No permite controlar la dirección inline del contenido

Propuesta de CSS Gap Decorations

• CSS Gap Decorations es una nueva propuesta para resolver los problemas anteriores
• Puntos principales de la propuesta
  • Extender la propiedad column-rule para que también pueda aplicarse a layouts de grid y flexbox
  • Introducir la nueva propiedad row-rule
  • Permitir configurar separadores diferentes para cada parte del contenedor
• La propiedad row-rule-color permite cambiar el color de los separadores

  .alternate-red-blue {  
    display: grid;  
    grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);  
    gap: 10px;  
    row-rule: 1px solid;  
    row-rule-color: red blue;  
  }  
  

• También se pueden definir separadores con distinto grosor y color

  .varying-widths {  
    display: grid;  
    grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);  
    row-gap: 10px;  
    row-rule: 5px solid black / repeat(auto, 1px solid #666) / 3px solid black;  
  }  
  

• Se puede controlar el comportamiento de los separadores en las intersecciones
  • Se pueden usar las propiedades *-rule-break y *-rule-outset
  • Se puede controlar dónde comienzan y terminan los separadores en las intersecciones
  • Es posible ajustar con precisión la longitud y el desplazamiento de los separadores

Solicitud de feedback sobre la propuesta

• La propuesta de CSS Gap Decorations se seguirá mejorando con base en el feedback de los desarrolladores
• Puedes revisar más detalles en el explainer oficial
• El feedback puede enviarse mediante issues en GitHub
• En especial, se agradecen comentarios sobre el comportamiento de los separadores en las intersecciones

[GN⁺]

Opiniones de Hacker News

• Quisiera un nuevo pseudoelemento: .container:gap { background-color: red; }

  • Podría crear fondos más vistosos, como líneas punteadas o degradados
  • Podría establecer espacio en los extremos del separador usando { padding: 2px }
  • Se podría configurar el espaciado vertical y horizontal por separado con :gap-horz y :gap-vert
  • Se podrían obtener colores alternados con .container:gap:nth-gap(2n) { color: blue; }

• El diseño por comité no es lo mejor, pero como no nativo, los nombres de propiedades propuestos no transmiten bien el significado

  • Por ejemplo, definen el espacio, pero en realidad dibujan un separador

• Ojalá hubieran considerado el caso de uso de paneles ajustables

  • Incluso si la implementación queda totalmente en el espacio del usuario, sería útil que los separadores estilizados pudieran recibir eventos

• Agregar bordes cambia el tamaño de los elementos, y eso puede no ser deseable

  • Este problema lleva más de 10 años resuelto
  • Me imagino que la primera línea del archivo CSS de todo el mundo es * { box-sizing: border-box; }
  • Es más razonable pensar en el borde como algo que queda dentro del ancho

• Interesante. Últimamente hago sobre todo trabajo de UI en QML, y eso ya resuelve casi todos estos problemas

  • Hace unos meses implementé líneas de cuadrícula en una vista de calendario dejando que el fondo se viera a través del espacio entre elementos
  • Dejé que la propiedad "spacing" del layout y la GPU hicieran el trabajo

• Es una idea aceptable, pero siento que habría sido más útil hace unos 10 años

  • Con el CSS moderno, los separadores se pueden resolver con un solo selector y una sola propiedad
  • Se puede hacer de una forma como .things .thing:not(:last-child) { border-bottom: 1px solid gray; }
  • El artículo menciona este punto, pero parece sobreestimar la frecuencia de los casos extremos

• Ha sido un problema doloroso durante mucho tiempo. Da gusto ver a alguien haciendo algo al respecto

  • Esto solo aplica a display: grid, no a elementos de ancho no fijo
  • En pantallas pequeñas, el | entre enlaces puede aparecer al final de la primera línea o al inicio de la segunda

• Me recuerda a un dicho de diseñadores alemanes: "Cuando a un diseñador se le acaban las ideas, agrega unas cuantas líneas"

  • Empiezan a agregar líneas cuando no encuentran una forma de separar claramente el contenido

• Me topo con este problema seguido y quisiera algo mejor que <hr/>

  • No funciona con filas de tabla ni con múltiples columnas

• Ojalá esto se apruebe... usar IA para arreglar mi escaso conocimiento de flexbox fue una bendición, pero esto sí se siente como una solución real