El año pasado, publicamos la entrada de blog
Resuelve la desconexión del diseño CSS y el orden de las fuentes.
Detalle la propuesta que se estaba debatiendo en
el grupo de trabajo de CSS para resolver el problema de que el reordenamiento
en flexbox y cuadrícula,
lo que genera una experiencia de tabulación desconectada. El
la sección inicial de esa publicación describe el problema al que el grupo de trabajo está
de resolver. Desde entonces, todo ha ido avanzando, y esta publicación ofrece
una actualización de dónde estamos ahora. También necesitamos que sus
comentarios, ¿cómo lidiamos con los elementos que tienen display-contents?
Actualizaciones de la propuesta
Ahora hay
borrador de texto de especificación
en la especificación de nivel 4 de Display del CSS.
Esto presenta una nueva propiedad llamada reading-flow.
Esta propiedad se agrega al elemento contenedor para el diseño flexible 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 valor actual. el comportamiento de los usuarios.flex-visual: Solo tiene efecto en los contenedores flexibles. Sigue el 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 el flujo flexible dirección IP.grid-rows: Solo tiene efecto en los contenedores de cuadrícula. Sigue el elemento visual el orden 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 elementos de 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 propiedadorder. pero actúa comonormal.
Por ejemplo, si tiene tres elementos flexibles en un contenedor,
y establece su flex-direction en
row-reverse, se alinean desde el final del contenedor flexible y el orden de tabulación
se mueve de derecha a izquierda.
.flex {
display: flex;
flex-direction: row-reverse;
}
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;
}
reading-flow:flex-visual.En los diseños de cuadrícula, usa reading-flow para seguir las filas o columnas visuales en lugar de
que el orden de origen. En el siguiente ejemplo, el flujo de lectura sigue el
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; }
reading-flow: grid-rows.Probar
Actualmente, esta propiedad de CSS es experimental, pero es posible habilitarla
para realizar pruebas. Para probarlo, instala Chrome Dev o la versión Canary 128 o una posterior.
y habilita el
marca de tiempo de ejecución CSSReadingFlow.
Aquí tienes algunos ejemplos para comenzar,
que funcionan en Canary con la marca habilitada.
El comportamiento para los casos de display: contents aún está en desarrollo y podría
cambio en función del feedback 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 el grupo de trabajo de CSS decidir cómo lidiar con una situación en la que uno de
los elementos secundarios de un elemento con flujo de lectura tienen display: contents
de manera similar si el elemento fuera un <slot>.
En el siguiente ejemplo, los elementos <div> tienen display: contents. Debido a
todos los elementos <button> se promueven para que participen en el programa
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 tiene algún ejemplo real que esté causando la situación
como se muestra en este ejemplo. ¿Alguna vez necesitas volver a pedir los artículos que están dentro de
que tiene display: contents con elementos que no son del mismo nivel, debido a
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 es posible que quieras usar la
Propiedad reading-flow con display: contents. Comprende el mundo real
casos de uso que tengas, nos ayudará a diseñar una solución que satisfaga tus necesidades.
Agrega casos de uso al Problema con el grupo de trabajo de CSS. Si tiene ejemplos en sitios activos o puede crear una demostración en CodePen o JSFiddle, serían muy útiles cuando analicemos este problema. como un grupo. Si tienes pensamientos sobre lo que esperarías que suceda, eso también es útil. Sin embargo, el lo más importante es ver los casos de uso reales.