Funciones de contenido multimedia

Un resumen de todas las formas en que las funciones multimedia te permiten responder a los dispositivos y preferencias.

El diseño responsivo no sería posible sin consultas de medios. Antes de las consultas de medios, no había forma de saber qué tipo de dispositivo utilizaban las personas para visitar tu sitio web. Los diseñadores tuvieron que hacer suposiciones. Esas suposiciones se codificaron en diseños de ancho fijo o diseños líquidos.

Todo eso cambió con la introducción de las consultas de medios. Por primera vez, los diseñadores podían conocer a las personas a mitad de camino. Los diseñadores podrían ajustar sus diseños para responder a los dispositivos de las personas.

Recuerda que una consulta de medios consta de un tipo de medio opcional y una función de medios obligatoria. No hubo tantos cambios en los tipos de medios a lo largo de los años. Aún hay solo cuatro valores posibles:

@media all
@media screen
@media print
@media speech

Por otro lado, las funciones multimedia se expandieron considerablemente. Los diseñadores ahora pueden encontrarse con los usuarios más allá de la mitad y adaptar los diseños para que se ajusten a mucho más que solo el tamaño de la pantalla.

Dimensiones de viewport

Las consultas de medios más populares en la Web son, sin duda, las que tienen que ver con el ancho de las vistas del puerto. Pero incluso aquí, se te ofrece la opción. Puedes usar la función de medios max-width para aplicar estilos por debajo de un ancho determinado o puedes usar la función de medios min-width para aplicar estilos por encima de un ancho determinado.

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
  main {
    display: block;
  }
}

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Personalmente, me gusta usar min-width. Aplico estilos de diseño de manera aditiva. Presento nuevas reglas de diseño en cada punto de interrupción en lugar de deshacer las reglas anteriores.

Este enfoque aditivo también funciona para la altura. Con min-height, puedes ingresar más reglas a medida que haya más altura disponible del viewport. Por ejemplo, es posible que tengas un elemento de encabezado que quieras anclar a la parte superior de la ventana del navegador si hay suficiente espacio vertical.

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

Sin embargo, puedes usar la función multimedia max-height si lo prefieres. Aquí, el encabezado se fija de forma predeterminada, pero se quita el atractivo si no hay suficiente espacio vertical.

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

Elegir entre los prefijos min- y max- no solo se aplica a width y height. La función multimedia aspect-ratio ofrece la misma opción. También ofrece una versión sin prefijo si quieres aplicar diseños en una proporción exacta de ancho a alto.

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

Proporcionar diferentes estilos para diferentes relaciones de aspecto podría descontrolarse rápidamente. Si no necesitas ese nivel de control detallado, es posible que la función multimedia orientation se adapte mejor a tus necesidades. Tiene dos valores posibles: portrait o landscape.

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

Aunque los términos "retrato" y "horizontal" se usan con mayor frecuencia para referirse a la orientación de los dispositivos móviles, la función multimedia orientation no es específica del dispositivo. Una ventana del navegador de pantalla completa en una laptop típica tendrá un valor de orientation de landscape.

Pantallas

Las diferentes pantallas tienen diferentes densidades de píxeles, medidas en dpi, puntos por pulgada. Puedes ajustar los estilos para diferentes densidades de píxeles con la función multimedia resolution. Al igual que aspect-ratio, resolution viene en tres variedades: mínimo, máximo y exacto.

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

Es posible que nunca necesites usar ninguna consulta de medios de resolution. En general, la densidad de píxeles es solo un problema para las imágenes, y las imágenes responsivas permiten abordar la densidad de píxeles directamente en HTML.

Por otro lado, CSS es donde defines tus animaciones y transiciones. Puedes ajustar esas animaciones y transiciones para que respondan a diferentes frecuencias de actualización con la función multimedia update. Esta función multimedia informa uno de tres valores: none, slow y fast.

Un valor update de none significa que no hay una frecuencia de actualización. Por ejemplo, una página impresa no se puede actualizar.

Un valor update de slow significa que la pantalla no se puede actualizar rápidamente. Una pantalla de tinta electrónica es un ejemplo de una pantalla con una frecuencia de actualización lenta.

Un valor update de fast significa que la pantalla se actualiza lo suficientemente rápido como para controlar animaciones y transiciones.

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

No todos los aspectos de la pantalla están relacionados con las capacidades del hardware. En el módulo sobre temas, viste cómo definir propiedades en un archivo de manifiesto de aplicación web. Una de esas propiedades se llama display, y puedes asignarle un valor de fullscreen, standalone, minimum-ui o browser. La función multimedia display-mode correspondiente te permite adaptar tus estilos para estas opciones.

Supongamos que proporcionaste un valor display de standalone en el manifiesto de tu app web. Si alguien agrega tu sitio a su pantalla principal, el sitio se iniciará sin ninguna interfaz del navegador. Puedes decidir mostrar un botón para ir hacia atrás para esos usuarios.

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

Color

Existen numerosas funciones multimedia para consultar las capacidades de color de un dispositivo. Si deseas ajustar los estilos de cualquier pantalla que solo muestre tonos de gris, puedes usar la función multimedia monochrome sin ningún valor.

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

Hay una función multimedia color correspondiente.

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

Para las pantallas en color, puedes escribir consultas con las funciones multimedia color-gamut, color-index o dynamic-range. Todos ellos informan detalles específicos sobre las capacidades de color de la pantalla.

En este ejemplo, los valores de color se actualizan en respuesta a la función multimedia dynamic-range, que informa la combinación del brillo máximo, la profundidad de color y la proporción de contraste de la pantalla. Los valores posibles son standard o high. Una pantalla de alta definición que informa un valor dynamic-range de high recibe un espacio de color diferente con la nueva función color() de CSS.

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

Interacción

Las funciones multimedia también pueden informar el tipo de mecanismo de entrada que se usa para interactuar con tu sitio: hover, any-hover, pointer y any-pointer. Consulta el módulo sobre interacción para obtener más detalles.

Preferencias

Hay una variedad de consultas de medios que te permiten responder a las preferencias de los usuarios: prefers-color-scheme, prefers-contrast y prefers-reduced-motion. Para obtener más detalles, consulta los módulos sobre temas y accesibilidad.

Puedes combinar las funciones multimedia en una sola consulta de medios. Puedes definir el alcance de tus estilos de animación para que solo se apliquen si el dispositivo tiene una frecuencia de actualización rápida y el usuario no indicó una preferencia por un movimiento reducido.

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

Más funciones multimedia

Pronto habrá más funciones multimedia.

Las funciones multimedia forced-colors y inverted-colors informarán si el dispositivo usa una paleta de colores restringida o invertida.

Una función multimedia scripting te permitirá ajustar el CSS según la disponibilidad de JavaScript.

Una función multimedia llamada prefers-reduced-data permitirá a los usuarios especificar que están en una conexión de uso medido para que puedas enviar elementos más pequeños o menos.

Aún se están formulando otras propuestas. En el próximo y último módulo, aprenderás sobre una propuesta de una función multimedia que maneja diferentes configuraciones de pantalla.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre las funciones multimedia