Lección 11: Display

Hay momentos, cuando maquetamos, que necesitamos cambiar la naturaleza de una etiqueta haciendo que un elemento en línea se vuelva de bloque o viceversa. Para ello disponemos del estilo display.

Pero antes debemos comprender, ¿por qué necesitaríamos alterar sus propiedades? Un caso muy habitual es cuando trabajamos con caso hipervínculos. Por temas de experiencia de usuario, el diseñador UX/UI nos va a pedir que disponga de un área pulsable mayor. De ese modo, nosotros, optaríamos por dar una anchura mayor.

a {
	background-color: yellow;
	width: 30rem;
	text-align: center;
}

Sin embargo no percibiremos ningún cambio. Se debe a que los elementos en línea, las propiedades de relleno o dimensiones, no le afectan. Por lo tanto modificaremos su display para convertirlo de bloque y así poder gestionarlo.

a {
	display: block;
	background-color: yellow;
	width: 30rem;
	text-align: center;
}

Ocultar

Si queremos hacer que una etiqueta desaparezca por completo en el diseño, podemos usar el valor none. Muy útil cuando no queremos mostrar elementos hasta que ocurra un evento o animación. Por ejemplo, cuando se pulsa un botón hacer que aparezca un menú de smartphone.

.elemento {
    display: none;
}

Sintaxis multipalabra

Los valores actuales, a pesar de encontrarse recogido en el estándar, ¡Solo son compatibles con Firefox! Por lo tanto debemos ignorarlos y pasar a la siguiente sección.

.elemento {

    /* Bloque */
    display: block flow;
    /* Línea */
    display: inline flow;
    display: inline flow-root;

    /* Capacidad de bloque pero posicionado en línea */
    display: block flow-root;

    /* Flex en bloque: Enfocado a maquetación */
    display: block flex;
    /* Flex en linea: Enfocado a maquetación */
    display: inline flex;

    /* Grid en bloque: Enfocado a maquetación */
    display: block grid;
    /* Grid en línea: Enfocado a maquetación */
    display: inline grid;
}

Valores precompuestos (heredados)

Son compatibles con todos los navegadores ya que formaron parte en el pasado del estándar. Además se mantienen por temas de retrocompatibilidad.

.elemento {

    /* Bloque */
    display: block;
    /* Línea */
    display: inline;

    /* Capacidad de bloque pero posicionado en línea */
    display: inline-block;

    /* Flex en bloque: Enfocado a maquetación */
    display: flex;
    /* Flex en linea: Enfocado a maquetación */
    display: inline-flex;

    /* Grid en bloque: Enfocado a maquetación */
    display: grid;
    /* Grid en línea: Enfocado a maquetación */
    display: inline-grid;
}

Visibilidad del contenido

En el 2024 se estandarizó la propiedad content-visibility. Permite controlar el renderizado de un elemento y su contenido. En la práctica logra lo mismo que display: none, en apariencia, pero con ciertas ventajas:

• No se renderiza el contenido. Por lo tanto no se calcula el tamaño de la caja ni sus elementos internos, logrando una carga más rápida.
• No penaliza el SEO. No es necesario jugar con las etiquetas de aria-hidden o hidden para evitar que los motores de búsqueda indexen contenido oculto.
• Puedes vigilar su estado con JavaScript. Puedes saber si está visible o no de forma sencilla, sin recurrir a leer sus propiedades CSS.

Para ocular un elemento y su contenido, simplemente añade la propiedad content-visibility: hidden.

.elemento {
    content-visibility: hidden;
}

Si quieres mostrarlo.

.elemento {
    content-visibility: visible;
}

La propiedad auto es la que se aplica por defecto. No se aplica ninguna optimización y el navegador renderiza el contenido de forma normal.

.elemento {
    content-visibility: auto;
}

Más información

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Publicar ¡Publicado! ¡Ups! Algo ha fallado, ¿Reintentamos? Enviando...

Escribe el primer comentario