CSS: Consultas de medios

En la actualidad, los usuarios navegan por Internet a través de una gran variedad de dispositivos: desde teléfonos móviles hasta ordenadores de escritorio. En esta continua proliferación de dispositivos y diferentes resoluciones surgió la necesidad de que los sitios web se visualicen bien en cualquier dispositivo.

Hace algunos años, los sitios web tenían un único diseño que se ajustaba a un tamaño estándar; y no había nada más. Si accedías desde un teléfono móvil, se veía el texto muy pequeño. Era muy habitual que el contenido solo se visualizase correctamente en ordenadores de escritorio.

Con la aparición de los primeros teléfonos móviles apareció una solución que ya quedó en desuso: el «diseño web adaptativo». Lo que hacía era disponer de varios diseños que se cargan en función del tipo de dispositivo del usuario.

Afortunadamente, pronto llegaron técnicas innovadoras que se centran en crear un único diseño que se adapta según las características del dispositivo. Se trata del diseño web responsive o «diseño web responsivo».

Aquí es donde entran en juego las consultas de medios (en inglés: media queries), ya que permiten tener un enfoque más flexible en el diseño web. Constituyen una herramienta esencial para que los diseñadores web puedan crear sitios que se ajusten a cualquier pantalla, sin importar su tamaño o resolución.

Usos de las consultas de medios

Las consultas de medios se usan para aplicar estilos de forma condicional a través de varios métodos que se describen a continuación:

• Usando la regla arroba @import
• Mediante la regla arroba @media
• Atributo media en el elemento HTML <link>.
• Atributo media en el elemento HTML <style>.

En todos estos casos se especifica el tipo de medio en el que se deben aplicar los estilos CSS determinados. Pueden ir incluidos en un archivo CSS externo, incluidos dentro de la regla arroba @media, enlazados con el elemento HTML <link> o insertados dentro del elemento HTML <style>.

Tipos de medios

Un medio es el dispositivo en el que se presenta la información. En CSS puede definirse tres tipos de medios (media types): los dispositivos digitales o pantallas (screen), la salida de impresión (print) y todos (all).

Cuando no se especifica un tipo de medio, la opción por defecto es all, por lo que los estilos CSS indicados se aplicarán a todos los dispositivos.

Los tipos de medio aural y speech han quedado obsoletos.

La regla arroba ‘@media’

La regla arroba @media proporciona una forma de verificar si los dispositivos que usan los usuarios cumplen con una serie de condiciones (media queries). De esta forma, es posible aplicar estilos CSS específicos a una página web a partir de ciertas características del dispositivo en el que se está visualizando.

Por ejemplo, es posible adaptar el diseño según el ancho del viewport del navegador web o según la resolución. Imaginemos que tenemos un texto en dos columnas. Con esta regla arroba podremos crear esta condición: cuando el ancho sea inferior a 768 píxeles, el texto pase de varias columnas a una. Por tanto, esta regla arroba es parte fundamental del diseño web responsive.

Operadores lógicos

Las consultas de medios se usan combinando varios operadores lógicos. De esta forma, se puede realizar condiciones más complejas para cubrir necesidades específicas. Así también es posible tener un mayor control sobre cuándo se aplican los etilos CSS. A continuación se describen los operadores.

También puede usarse la coma para combinar múltiples consultas de medios en una sola regla. Esto permite aplicar los mismos estilos en diferentes situaciones.

Características de los dispositivos

A través de las consultas de medios y la regla arroba @media, se puede evaluar diversas características del dispositivo. Las condiciones más comunes tienen que ver con la anchura (width) y la altura (height) de la pantalla, pero también con la orientación (orientation) o la resolución (resolution).

El tamaño del dispositivo

Para aplicar estilos CSS dependiendo del tamaño del viewport del navegador web existen varias características involucradas, tanto para la anchura como para la altura. Se describen en la tabla siguiente.

Por ejemplo, vamos a crear un ejemplo en el que aplicamos estilos CSS cuando el viewport tenga un ancho inferior a los 768 píxeles:

@media only screen and (max-width: 768px) {
  /* ... */
}

En los últimos niveles de CSS, puede usarse únicamente width y height junto con una serie de operadores matemáticos:

• Menor que: <
• Mayor que: >
• Menor o igual que: <=
• Mayor o igual que: >=

Podemos recrear el ejemplo anterior con la nueva sintaxis:

@media only screen and (width <= 768px) {
  /* ... */
}

Lo más habitual es trabajar con la anchura y dejar que el contenido siga el flujo normal a través del eje vertical (altura). Hay varias anchuras del viewport del navegador recomendables con las que trabajar. Por ejemplo:

• Menor que 320 píxeles
• Menor que 480 píxeles
• Menor que 768 píxeles
• Menor que 1024 píxeles
• Mayor que 1024 píxeles

De esta manera se cubre un amplio espectro de anchos habituales, y el contenido se ajustará a cualquier tamaño a través de las media queries.

La proporción de aspecto

Si queremos trabajar con la proporción de aspecto podemos usar la característica aspect-ratio, que acepta como valor un número entero o una fracción numérica. Por ejemplo, 6/2 es equivalente a usar 3/1, que es como usar 3. Esto significa que el ancho será tres veces mayor que el alto.

Por ejemplo:

@media (max-aspect-ratio: 5/3) {
  /* ... */
}

En este caso, también podemos usar de forma exclusiva la característica aspect-ratio junto con los operadores <, >, <= y >=. Así:

@media (aspect-ratio <= 5/3) {
  /* ... */
}

Orientación de la región visible

La característica orientation permite aplicar estilos CSS dependiendo de la orientación de la región visible (viewport) del navegador web. Es muy útil para usar en dispositivos móviles o en pantallas que pueden rotar 90 grados, pasando de estar vertical (portrait) a apaisado (landscape).

Esta característica puede tener dos valores:

Por ejemplo:

@media (orientation: landscape) {
  /* ... */
}

Desbordamiento

Con las consultas de medios es posible aplicar estilos CSS dependiendo de la forma que tiene el dispositivo de gestionar el desbordamiento de contenido. Algunos dispositivos permiten el desbordamiento de contenido: te desplazas hacia abajo para ver la continuación. En cambio, otros dispositivos como los lectores digitales (ebook readers) dividen el contenido en páginas.

Hay dos características para detectarlo el desbordamiento.

Cuando hablamos del «eje principal» nos referimos al eje vertical (el eje Y), mientras que el «eje secundario» es el eje horizontal (eje X).

Estos son los valores que se puede usar:

Por ejemplo, aplica estilos si se trata de un lector electrónico:

@media (overflow-block: paged) {
  /* ... */
}

Modo de visualización

En ocasiones puede ser interesante aplicar estilos dependiendo del modo de visualización del navegador web. Por ejemplo, podríamos detectar si la página web se muestra en una pestaña normal del navegador, si está en modo de pantalla completa —como resultado de presionar la tecla F11— o si se encuentra en una página flotante. Para ello se usa la característica display-mode.

Esta característica admite los siguientes valores:

Por ejemplo, aplica estilos si la página está en pantalla completa:

@media screen and (display-mode: fullscreen) {
  /* ... */
}

Ejecución de JavaScript

Para detectar si es el navegador web tiene la capacidad de ejecutar secuencias de comandos (scripting) del lenguaje JavaScript se usa la característica scripting. De este modo, es posible aplicar estilos CSS dependiendo de si existe o no esta funcionalidad. Valores posibles:

Por ejemplo:

@media (scripting: enabled) {
  /* ... */
}

Resolución

La característica resolution permite aplicar estilos CSS dependiendo de la resolución del dispositivo de salida. Como valor admite un número entero referente a la densidad de píxeles. Al ser una característica de rango, también se puede usar las variantes con los prefijos min-* (mínimo) y max-* (máximo)

Por ejemplo:

@media (min-resolution: 72dpi) {
  /* ... */
}

También podemos usar la característica resolution junto con los operadores <, >, <= y >=. Así:

@media (resolution >= 72dpi) {
  /* ... */
}

Proceso de escaneo

La mayoría de las pantallas modernas representan la imagen de forma progresiva, mientras que los antiguos monitores de CRT y algunos televisores de plasma lo hacen de forma entrelazada. En estos casos puede ser interesante aplicar estilos CSS diferentes. Para ello se usa la característica scan.

Lista de valores posibles para scan:

Para aplicar estilos CSS a pantallas con entrelazado, se recomienda evitar animaciones con movimientos rápidos, y que los elementos animados midan más de 1 pixel con el fin de reducir el parpadeo.

Salida cuadricular

La característica grid permite aplicar estilos CSS dependiendo de si el dispositivo de salida es cuadricular, como una terminal o un teléfono móvil antiguo, o si tiene la pantalla basada en mapas de bits, como las pantallas normales.

Lista de valores para grid:

Actualización

La característica update permite aplicar estilos CSS según la velocidad de actualización del dispositivo de salida. Los valores que admite son las siguientes palabras clave referentes a distintas velocidades.

Lista de valores para update:

Control del color

Existe una serie de características relacionadas con la detección del color. Por ejemplo, es posible aplicar estilos CSS dependiendo de la cantidad de colores que admite, si está en monocromo o si tiene los colores invertidos.

Características relacionadas con el color:

Por ejemplo, podemos aplicar estilos CSS cuando el dispositivo de salida tenga soporte para un máximo de 256 colores:

@media (max-color-index: 256) {
  /* ... */
}

Es equivalente al siguiente código CSS:

@media (color-index <= 256) {
  /* ... */
}

Otras características del color

La característica color-gamut permite aplicar estilos dependiendo de la gama de colores admitida. Los valores posibles pueden ser: srgb, referente al espacio de color RGB; p3, el espacio de color P3 definido por Apple; y rec2020, referente a la recomendación ITU-R 2020.

Otra característica interesante es dynamic-range, que permite detectar si el dispositivo tiene soporte para mostrar imágenes o vídeos HDR. Los valores posibles pueden ser los siguientes: standard y high.

Finalmente, inverted-colors es de utilidad si queremos aplicar estilos cuando los colores del dispositivo de salida estén invertidos. Los valores pueden ser inverted cuando los colores están invertidos y none cuando no lo están.

Interactividad

La característica hover es muy interesante ya que permite aplicar estilos CSS dependiendo de si el dispositivo permite flotar el cursor sobre un elemento sin presionarlo. Es el caso de los ordenadores; quedan excluidos los móviles y tabletas, ya que en ellos se usan los dedos de las manos, presionando.

Valores de hover:

Por su parte, la característica pointer permite aplicar estilos CSS dependiendo de si el dispositivo tiene puntero del ratón. En caso de ser afirmativo, se puede filtrar según el nivel de precisión del dispositivo.

Valores de pointer:

Por ejemplo, podemos crear un cambio de color de fondo sobre un elemento cuando el dispositivo permita flotar el cursor sobre un elemento, y cuando dicho mecanismo sea de alta precisión, como el puntero del ratón.

Código CSS:

@media (hover: hover) and (pointer: fine) {
  background: blue;
}