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 Solución al problema de desconexión entre el diseño CSS y el orden de la fuente. En este documento, se detalla una propuesta que se está analizando en el grupo de trabajo de CSS, cuyo objetivo es resolver el problema en el que el reordenamiento de elementos en flexbox y cuadrícula causa una experiencia de 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 avanzado, y esta publicación brinda una breve actualización de nuestro estado actual. También necesitamos tus comentarios de un área específica, ¿cómo lidiamos con los artículos que tienen display-contents?

Actualizaciones de la propuesta

Ahora hay un texto de especificación en borrador en la especificación de nivel 4 de Display de CSS. Esto introduce una nueva propiedad llamada reading-flow. Esta propiedad se agrega al elemento contenedor del diseño flex o de cuadrícula (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 flex, teniendo en cuenta el modo de escritura.
• flex-flow: Solo tiene efecto en contenedores flexibles. Sigue la dirección de flujo flexible.
• 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 funciona como normal.

Por ejemplo, si tienes tres elementos flex en un contenedor y configuras su flex-direction en row-reverse, se alinean desde el final del contenedor flex y el orden de tabulación se mueve 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, por lo tanto, 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 CSS es experimental, pero es posible habilitarla para pruebas. Para probarlo, instala Chrome Dev o la versión 128 de Canary o una versión posterior, y habilita la marca del entorno de ejecución CSSReadingFlow. Hay algunos ejemplos para comenzar, que funcionan en Canary con la marca habilitada.

El comportamiento de los casos de display: contents aún está en desarrollo y podría cambiar en función de los comentarios que envíes 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 flujo de lectura 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 promocionan 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 ejemplos del mundo real que provoquen la situación que se ve en este ejemplo. ¿Alguna vez necesitas reordenar los elementos que están dentro de un elemento que tiene display: contents con elementos que no sean del mismo nivel, ya que son elementos del mismo nivel que el elemento que tiene display: contents.

Además, a medida que trabajamos para resolver los problemas relacionados con display: contents, sería útil ver ejemplos en los que es posible que quieras usar la propiedad reading-flow con display: contents. Comprender los casos de uso del mundo real 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 en vivo o puedes crear una demostración en CodePen o JSFiddle, eso sería increíblemente útil cuando analicemos este tema en grupo. Si tienes ideas sobre lo que esperarías que sucediera, eso también es útil. Sin embargo, lo más importante es ver los casos de uso reales.