Solicitud de comentarios del desarrollador sobre el flujo de lectura y los elementos con pantalla: contenido

Rachel Andrew

El año pasado, publicamos la entrada de blog Cómo resolver la desconexión entre el diseño CSS y el orden del código fuente. En esta entrada, se detalla una propuesta que se está debatiendo en el Grupo de trabajo de CSS, cuyo objetivo es resolver el problema por el que el reordenamiento de elementos en Flexbox y cuadrícula provoca una experiencia de navegación con tabulación desconectada. En la sección inicial de esa publicación, se describe el problema que el grupo de trabajo intenta resolver. Desde entonces, las cosas han cambiado, y esta publicación ofrece una breve actualización de la situación actual. También tenemos un área específica en la que necesitamos tus comentarios: ¿cómo abordamos los elementos que tienen display-contents?

Actualizaciones de la propuesta

Ahora hay texto de especificación de borrador en la especificación de CSS Display Level 4. Esto introduce una nueva propiedad llamada reading-flow. Esta propiedad se agrega al elemento contenedor para el diseño de cuadrícula o flexible (el elemento con display: grid o display: flex).

La propiedad acepta los siguientes valores:

• normal: Sigue el orden de los elementos en el DOM, que es el comportamiento actual.
• flex-visual: Solo tiene efecto en los contenedores flexibles. Sigue el orden de lectura visual de los elementos flexibles, teniendo en cuenta el modo de escritura.
• flex-flow: Solo tiene efecto en los contenedores flexibles. Sigue la dirección de flex-flow.
• grid-rows: Solo tiene efecto en los contenedores de cuadrícula. Sigue el orden visual de los elementos de la cuadrícula por fila, teniendo en cuenta el modo de escritura.
• grid-columns: Solo tiene efecto en los contenedores de cuadrícula. Sigue el orden visual de los elementos de la cuadrícula por columna, teniendo en cuenta el modo de escritura.
• grid-order: Solo tiene efecto en los contenedores de cuadrícula. Tiene en cuenta la propiedad order, pero, de lo contrario, actúa como normal.

Por ejemplo, si tienes tres elementos flexibles en un contenedor y configuras su flex-direction en row-reverse, se alinearán desde el final del contenedor flexible y el orden de tabulación se desplazará de derecha a izquierda.

.flex {
  display: flex;
  flex-direction: row-reverse;
}

Agrega flex-flow: visual y, luego, el flujo de lectura seguirá el orden visual en inglés, es decir, de izquierda a derecha.

.flex {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}

En los diseños de cuadrícula, usa reading-flow para seguir las filas o columnas visuales en lugar del orden de la fuente. En el siguiente ejemplo, el flujo de lectura sigue las filas.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-areas: "d b b"
                       "c c a";
  reading-flow: grid-rows;
}

.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }

Probar

Actualmente, esta propiedad de CSS es experimental, pero se puede habilitar para realizar pruebas. Para probarlo, instala la versión 128 o posterior de Chrome Dev o Canary y habilita la marca de tiempo de ejecución CSSReadingFlow. Hay algunos ejemplos para que comiences, que funcionan en Canary con la marca habilitada.

El comportamiento para los casos de display: contents aún está en desarrollo y podría cambiar según los comentarios que proporciones después de leer la siguiente sección de esta publicación.

Elementos con display: contents y componentes web

Hay un problema pendiente para que el grupo de trabajo de CSS decida cómo abordar la situación en la que uno de los elementos secundarios de un elemento con reading-flow tiene display: contents, y de manera similar si el elemento fuera un <slot>.

En el siguiente ejemplo, los elementos <div> tienen display: contents. Debido a esto, todos los elementos <button> se promueven para participar en el diseño flexible y, por lo tanto, reading-flow tiene en cuenta su orden.

 .wrapper {
   display: flex;
   reading-flow: flex-visual;
 }

<div class="wrapper">
   <div style="display: contents" id="contents1">
     <button style="order: 3" id="o3">3</button>
     <button style="order: 1" id="o1">1</button>
     <div style="display: contents" id=contents2>
       <button style="order: 4" id="o4">4</button>
       <button style="order: 2" id=o2>2</button>
     </div>
   </div>
 </div>

Nos gustaría saber si tienes algún ejemplo del mundo real que cause la situación que se ve en este ejemplo. ¿Alguna vez necesitas reordenar elementos que están dentro de un elemento que tiene display: contents con elementos que no son hermanos, ya que son hermanos del elemento que tiene display: contents?

Además, mientras trabajamos para resolver los problemas relacionados con display: contents, sería útil ver ejemplos en los que te gustaría usar la propiedad reading-flow con display: contents. Comprender los casos de uso reales que tienes nos ayudará a diseñar una solución que satisfaga tus necesidades.

Agrega casos de uso al problema del grupo de trabajo de CSS. Si tienes ejemplos en sitios activos o puedes crear una demostración en CodePen o JSFiddle, sería muy útil cuando analicemos este problema en grupo. También es útil que nos cuentes qué esperas que suceda. Sin embargo, lo más importante es ver los casos de uso reales.