Profundizando en la propiedad de visualización: los dos valores de visualización

Un diseño flexible o de cuadrícula comienza cuando usted declara display: flex o display: grid . Estos métodos de diseño son valores de la propiedad de display CSS. Tendemos a no hablar mucho sobre esta propiedad en sí misma, sino que nos concentramos en los valores de flex o grid , sin embargo, hay algunas cosas interesantes para entender sobre display y cómo se define que harán su vida mucho más fácil a medida que usa CSS para el diseño.

En este artículo, el primero de una serie corta, voy a echar un vistazo a la forma en que los valores de display se definen en la especificación de nivel 3. Este es un cambio en la forma en que definimos la display en versiones anteriores de CSS. Si bien puede parecer inusual al principio para aquellos de nosotros que hemos estado haciendo CSS durante muchos años, creo que estos cambios realmente ayudan a explicar lo que sucede cuando cambiamos el valor de display en un elemento.

Elementos en bloque y en línea

Una de las primeras cosas que enseñamos a las personas que son nuevas en CSS son los conceptos de bloque y elementos en línea. Explicaremos que algunos elementos en la página son display: block y tienen ciertas características debido a esto. Se estiran en la dirección en línea, ocupando todo el espacio que tienen disponible. Se rompen en una nueva línea; podemos darles ancho, alto, margen y relleno, y estas propiedades empujarán otros elementos en la página lejos de ellos.

También sabemos que algunos elementos se display: inline . Los elementos en línea son como palabras en una oración; no se rompen en una nueva línea, sino que reservan un carácter de espacio en blanco entre ellos. Si agrega márgenes y relleno, esto se mostrará pero no eliminará otros elementos.

El comportamiento de los elementos en bloque y en línea es fundamental para CSS y el hecho de que un documento HTML debidamente marcado será legible de forma predeterminada. Este diseño se conoce como "Diseño de bloque y en línea" o "Flujo normal" porque esta es la forma en que los elementos se disponen si no les hacemos nada más.

Valores internos y externos de display

Entendemos los elementos de bloque y en línea, pero ¿qué sucede si hacemos una display: grid ? ¿Es esto algo completamente diferente? Si observamos un componente en el que hemos especificado display: grid , en términos del elemento principal en el diseño, se comporta como un elemento block level . El elemento se estirará y ocupará tanto espacio en la dimensión en línea como esté disponible, comenzará en una nueva línea. Se comporta como un elemento de block en términos de cómo se comporta junto con el resto del diseño. Sin embargo, no hemos dicho display: block , ¿o sí?

Resulta que tenemos. En el Nivel 3 de la especificación Display, el valor de display se define como dos palabras clave. Estas palabras clave definen el valor externo de visualización, que estará en inline o en block y, por lo tanto, definen cómo se comporta el elemento en el diseño junto con otros elementos. También definen el valor interno del elemento, o cómo se comportan los hijos directos de ese elemento.

Esto significa que cuando dices display: grid , lo que realmente estás diciendo es display: block grid . Está solicitando un contenedor de cuadrícula a nivel de bloque. Un elemento que tendrá todos los atributos de bloque: puede darle alto y ancho, margen y relleno, y se estirará para llenar el contenedor. Sin embargo, a los hijos de ese contenedor se les ha dado el valor interno de grid para que se conviertan en elementos de cuadrícula. El comportamiento de esos elementos de la cuadrícula se define en la Especificación de cuadrícula CSS: la especificación de display nos brinda una forma de decirle al navegador que este es el método de diseño que queremos usar.

Creo que esta forma de pensar sobre display es increíblemente útil; explica directamente lo que estamos haciendo con varios métodos de diseño. Si tuviera que especificar display: inline flex , ¿qué esperaría? Con suerte, una caja que se comporte como un elemento en línea, con elementos secundarios que sean elementos flexibles.

Hay algunas otras cosas claramente explicadas al pensar en display de esta nueva forma, y ​​echaré un vistazo a algunas de ellas en el resto de este artículo.

Siempre estamos volviendo al flujo normal

Al pensar en estas propiedades de visualización internas y externas, puede ser útil considerar qué sucede si no jugamos con el valor de visualización en absoluto. Si escribe algo de HTML y lo ve en un navegador, lo que obtiene es un diseño en bloque y en línea, o flujo normal. Los elementos se muestran como block o elementos inline .

El siguiente ejemplo contiene algunas marcas que he convertido en un objeto de medios, al hacer que la pantalla div display: flex (los dos elementos secundarios directos) ahora se conviertan en elementos flexibles, por lo que la imagen ahora está en una fila con el contenido. Sin embargo, si ve en el contenido, hay un encabezado y un párrafo que se muestran en el flujo normal nuevamente. Los hijos directos del objeto multimedia se convirtieron en elementos flexibles; sus hijos vuelven al flujo normal a menos que cambiemos el valor de visualización en el elemento flexible. El contenedor flexible en sí mismo es una caja de bloques, como puede ver por el hecho de que el borde se extiende hasta el borde de su padre.

Si trabaja con este proceso, el hecho de que los elementos de su página se muestren con este agradable diseño de flujo normal legible, en lugar de luchar contra él y tratar de colocar todo, CSS es mucho más fácil. También es menos probable que tenga problemas de accesibilidad, ya que está trabajando con el orden del documento, que es exactamente lo que hace un lector de pantalla o una persona que se desplaza por el documento.

Explicando flow-root e inline-block

El valor de inline-block probablemente también sea familiar para muchos de nosotros que hemos estado haciendo CSS por un tiempo. Este valor es una forma de obtener parte del comportamiento del bloque en un elemento en inline . Por ejemplo, un elemento inline-block puede tener un ancho y un alto. Un elemento con display: inline-block también se comporta de una manera interesante en el sentido de que crea un contenido de formato de bloque ( BFC ).

Un BFC hace algunas cosas útiles en términos de diseño, por ejemplo, contiene flotadores. Para obtener más información sobre los contextos de formato de bloque, consulte mi artículo anterior "Comprender el diseño CSS y el contexto de formato de bloque". Por lo tanto, decir display: inline-block le da un cuadro en línea que también establece un BFC.

Como descubrirá (si lee el artículo mencionado anteriormente sobre el contexto de formato de bloque), hay un valor más nuevo de visualización que también crea explícitamente un BFC. Este es el valor de flow-root . Este valor crea un BFC en un bloque, en lugar de un elemento en línea.

• display: inline-block le da un BFC en un cuadro en línea.
• display: flow-root le da un BFC en un cuadro de bloque.

Probablemente ahora esté pensando que todo es un poco confuso: ¿por qué tenemos dos palabras clave completamente diferentes aquí y qué sucedió con la sintaxis de dos valores de la que hablábamos antes? Esto lleva claramente a lo siguiente que necesito explicar sobre display , es decir, el hecho de que CSS tiene un historial con el que tenemos que lidiar en términos de la propiedad de display .

Valores heredados de visualización

La especificación CSS2 detalló los siguientes valores para la propiedad de display :

• inline
• block
• inline-block
• list-item
• none
• table
• inline-table

También se definieron las diversas propiedades internas de la tabla, como table-cell , que no trataremos en este artículo.

Luego agregamos a estos algunos valores para la visualización, para admitir el diseño flexible y de cuadrícula:

• grid
• inline-grid
• flex
• inline-flex

Nota : la especificación también define ruby ​​e inline-ruby para admitir el texto de Ruby, sobre el que puede leer en la especificación de Ruby.

Todos estos son valores únicos para la propiedad de display , definidos antes de que se actualizara la especificación para explicar el diseño CSS de esta manera. Algo muy importante de CSS es el hecho de que no andamos rompiendo la web; no podemos simplemente cambiar las cosas . No podemos decidir repentinamente que todos deberían usar esta nueva sintaxis de dos valores y, por lo tanto, todos los sitios web creados que usaron la sintaxis de un solo valor se romperán a menos que un desarrollador regrese y lo arregle.

Mientras piensa en este problema, puede disfrutar de esta lista de errores en el diseño de CSS, que en muchos casos son menos errores que cosas que se diseñaron sin una bola de cristal para ver el futuro. Sin embargo, el hecho es que no podemos romper la web, por lo que tenemos esta situación en la que ahora los navegadores admiten un conjunto de valores únicos para mostrar, y la especificación se está moviendo a dos valores para mostrar.

La forma de evitar esto es especificar valores heredados y cortos para mostrar, lo que incluye todos estos valores únicos. Esto significa que se puede definir una asignación entre valores únicos y nuevos valores de dos palabras clave. Lo que nos da la siguiente tabla de valores:

Para explicar cómo funciona esto, podemos pensar en un contenedor de cuadrícula. En el mundo de dos valores, crearíamos un contenedor de cuadrícula a nivel de bloque con:

 .container { display: block grid; }

Sin embargo, la palabra clave heredada significa que lo siguiente hace lo mismo:

 .container { display: grid; }

Si, en cambio, quisiéramos un contenedor de cuadrícula en línea, en el mundo de dos valores usaríamos:

 .container { display: inline grid; }

Y si usa los valores heredados:

 .container { display: inline-grid; }

Ahora podemos volver a donde comenzó esta conversación y ver display: inline-block . Mirando la tabla, puede ver que esto se define en el mundo de dos valores como display: inline flow-root . Ahora coincide con display: flow-root que en un mundo de dos valores sería display: block flow-root . Un poco de orden y aclaración de cómo se definen estas cosas. Una refactorización de CSS, si lo desea.

Compatibilidad del navegador con la sintaxis de dos valores

Hasta el momento, los navegadores no admiten la sintaxis de dos valores para la propiedad de display . El error de implementación para Firefox se puede encontrar aquí. La implementación, cuando suceda, implicaría esencialmente crear un alias de los valores heredados para las versiones de dos valores. Por lo tanto, es probable que pase un buen rato antes de que pueda usar estas versiones de dos valores en su código. Sin embargo, ese no es realmente el objetivo de este artículo. En cambio, creo que mirar los valores de visualización a la luz del modelo de dos valores ayuda a explicar gran parte de lo que está sucediendo.

Cuando define el diseño en un cuadro en CSS, está definiendo lo que le sucede a este cuadro en términos de cómo se comporta en relación con todos los demás cuadros en el diseño . También estás definiendo cómo se comportan los hijos de esa caja. Puede pensar de esta manera mucho antes de que pueda declarar explícitamente los valores como dos cosas separadas, ya que las palabras clave heredadas se asignan a esos valores, y lo ayudará a comprender qué sucede cuando cambia el valor de display .