Conoces la sintaxis de valor único: .thing { display: block; }. El valor “bloque” es un valor único. Hay muchos valores únicos para display. Por ejemplo, inline-flex, que es como flex en el sentido de que se convierte en un contenedor flexible, pero se comporta como un elemento de nivel en línea en lugar de un elemento de nivel de bloque. Algo intuitivo, pero mucho mejor atendido por un sistema de dos valores que puede aplicar ese mismo concepto de manera más amplia e intuitiva.
Para una mirada profunda, debe leer la publicación de blog de Rachel Andrew La sintaxis de dos valores de la propiedad CSS Display. La especificación también es una lectura decente, al igual que este video de Miriam:
Así es como se mapea en mi cerebro
Escoger block o inline, entonces escoge flow, flow-root, flex, grid, o table. Si es un list-item eso es una tercera cosa.
Básicamente, elige uno de cada columna para describir el diseño que desea. Entonces, los valores existentes que usamos todo el tiempo se asignan a algo como esto:
Otra forma de pensar en esas dos columnas que tengo allí es “afuera y dentro” mostrar valores. Afuera, como adentro, cómo fluye con otros elementos a su alrededor. En el interior, como en, cómo ocurre el diseño dentro de esos elementos.
¿Realmente puedes usarlo?
Realmente no. Firefox 70 es el primero en salir con él, y no hay otras señales de soporte de Chrome-land o Safari-land que yo sepa. Es una gran evolución de CSS, pero en cuanto al uso diario, pasarán años. Algo tan vital como el diseño no es algo que quieras dejar fallar solo por este beneficio descriptivo algo menor. Probablemente tampoco valga la pena mejorar progresivamente con @supports y tal.
cositas
- Mira el bit de transformaciones automáticas. El hecho de que establezca un elemento en una pantalla en particular no significa que no pueda ser anulado por una determinada situación. Supongo que se trata principalmente de que un elemento se vea obligado a ser un elemento flexible o un elemento de cuadrícula.
- Hay taquigrafía implícita. Como si usted
inline list-item, eso es realmenteinline flow list-itemmientras quelist-itemesblock flow list-item. Parece todo bastante intuitivo. - Todavía usas cosas como
table-rowytable-header-group. Esas son ofertas de valor único, como lo escontentsynone. - La columna uno técnicamente incluye
run-intambién, pero que yo sepa, ningún navegador ha soportadorun-inmonitor. - La columna dos técnicamente incluye
ruby, pero nunca he entendido qué es eso.
Cómo hablamos de CSS
Me gusta cómo Rachel relaciona este cambio con un modelo mental y de enseñanza más racional:
… Explican adecuadamente la interacción de las cajas con otras cajas, en cuanto a si son de bloque o en línea, más el comportamiento de los niños. Para comprender qué es y qué hace la pantalla, creo que son una aclaración muy útil. Como resultado, comencé a enseñar la visualización usando estos dos valores para ayudar a explicar lo que sucede cuando cambia los contextos de formato.
Siempre es emocionante ver que se implementan nuevas funciones, espero que otros navegadores también implementen estas versiones de dos valores pronto. Y luego, en un futuro no muy lejano, podremos escribir CSS de la misma manera que ahora lo explicamos, demostrando claramente la relación entre las cajas y el comportamiento de sus hijos.