A partir de Chrome 115, existen varios valores para la propiedad de visualización CSS. display: flex se convierte en display: block flex y display: block se convierte en display: block flow. Los valores únicos que conoce ahora se consideran heredados, pero se conservan en los navegadores para garantizar la compatibilidad con versiones anteriores.

¿Por qué se ha retrasado tanto?

En resumen: cambia la forma en que podemos explicar cosas como el modelo de caja. La especificación sigue siendo una instantánea CR, lo que significa que el W3C recopila experiencias de los implementadores para finalizar el estándar. Por lo tanto, es posible que parte de esto aún cambie.

La revisión divide el tipo de visualización en dos partes: el tipo de visualización exterior y el tipo de visualización interior.

El tipo de visualización exterior dicta cómo la propia caja principal participa en el diseño del flujo.

El tipo de visualización interior dicta cómo se distribuyen sus cuadros descendientes (a excepción de los elementos reemplazados, que son un poco más complejos).

Por lo tanto, display: flex se convierte en display: block flex, lo que significa que el tipo de visualización exterior es bloque (se comporta como un elemento de bloque en el exterior), pero sus elementos secundarios se representan de acuerdo con el diseño flexible.

Este es el mismo comportamiento que antes, pero con este cambio, podemos hablar sobre la influencia de la propiedad de visualización con respecto a los elementos secundarios y los elementos circundantes. En mi opinión, este modelo mental facilita la creación de diseños más predecibles y es más sencillo explicar los diferentes modos de diseño y sus efectos.

En cursos o tutoriales más nuevos, una buena explicación del modelo de caja debe cubrir no solo los márgenes, bordes, rellenos, ancho y alto, sino también el tamaño de la caja y la propiedad de visualización.

¿Cuáles son los valores válidos de la propiedad de visualización?

Como ya se mencionó, algunas propiedades antiguas ahora son heredadas. Aquí están todas las propiedades válidas:

Para la visualización de sintaxis de valores múltiples: tipo externo tipo interno los tipos externos válidos son bloque, en línea y ejecución. Los tipos de visualización interna válidos son flujo, raíz de flujo, tabla, flex, grid y rubí.

También hay valores únicos válidos: elemento de lista, contenidos y ninguno.

Además de eso, CSS tiene algunos valores de visualización internos que siguen siendo válidos. Estos valores se calcularán cuando se utilicen tipos de visualización de tabla o Ruby.

Las siguientes combinaciones ahora son heredadas: inline-block, inline-table, inline-flex y inline-grid . Se pueden reemplazar con sus equivalentes de valores múltiples, por ejemplo: display: inline flex.

Los valores múltiples son compatibles con versiones recientes de navegadores modernos: https://caniuse.com/mdn-css_properties_display_multi-keyword_values

Caniuse para valores de palabras clave múltiples de la propiedad de visualización.

¡Eso es todo amigos!

¡Muchas Gracias Por Leer!