Funciones de contenido multimedia

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

El diseño responsivo no sería posible sin las consultas de medios. Antes de las consultas de medios, no había forma de saber qué tipo de dispositivo usaban 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 cambió con la introducción de las consultas multimedia. Por primera vez, los diseñadores podían encontrarse con las personas a mitad de camino. Los diseñadores podrían ajustar sus diseños para que respondan a los dispositivos de las personas.

Recuerda que una consulta de contenido multimedia incluye un tipo de contenido multimedia opcional y una función de contenido multimedia obligatoria. No ha habido muchos cambios en los tipos de contenido multimedia a lo largo de los años. Aún solo hay cuatro valores posibles:

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

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

Browser Support

• 1
• 12
• 1
• 3

Source

Dimensiones del viewport

Las consultas de medios más populares en la Web son, por mucho, las que se relacionan con el ancho del viewport. Pero incluso aquí, tienes una opción. Puedes usar la función de contenido multimedia max-width para aplicar estilos por debajo de un ancho determinado o la función de contenido multimedia 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 forma aditiva. Introduzco nuevas reglas de diseño en cada punto de inflexión en lugar de deshacer las reglas anteriores.

Este enfoque aditivo también funciona para la altura. Con min-height, puedes agregar más reglas a medida que haya más altura de viewport disponible. Por ejemplo, puedes tener un elemento de encabezado que deseas fijar en 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 de contenido multimedia max-height si lo prefieres. Aquí, el encabezado se ancla de forma predeterminada, pero la fijación se quita si no hay suficiente espacio vertical.

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

La elección entre los prefijos min- y max- no solo se aplica a width y height. La función de medios aspect-ratio ofrece la misma opción. También ofrece una versión sin prefijo si deseas aplicar estilos con una proporción exacta de ancho a altura.

@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, la función de contenido multimedia de orientation podría ser más adecuada para 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 "vertical" y "horizontal" se usan con mayor frecuencia para referirse a la orientación de los dispositivos móviles, la función de contenido multimedia orientation no es específica del dispositivo. Una ventana del navegador en pantalla completa en una laptop típica tendrá un valor de orientation de landscape.

Pantallas

Las diferentes pantallas tienen diferentes densidades de píxeles, que se miden en dpi, puntos por pulgada. Puedes ajustar tus estilos para diferentes densidades de píxeles con la función de contenido multimedia resolution. Al igual que aspect-ratio, resolution se presenta 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 resolution. La densidad de píxeles suele ser un problema solo para las imágenes, y las imágenes responsivas son una forma de abordar la densidad de píxeles directamente en HTML.

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

Un valor de update de none significa que no hay 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 de 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, aprendiste a definir propiedades en un archivo manifiesto de app 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 diferentes 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, este se iniciará sin ninguna interfaz de navegador. Puedes mostrar un botón Atrás para esos usuarios.

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

Color

Existen varias funciones multimedia para consultar las capacidades de color de un dispositivo. Si deseas ajustar tus diseños para cualquier pantalla que solo muestre tonos de gris, puedes usar el componente multimedia monochrome sin ningún valor.

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

Hay una función de contenido multimedia color correspondiente.

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

En el caso de 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 de brillo máximo, profundidad de color y relació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 tiene 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 la interacción para obtener más detalles.

Preferencias

Hay una variedad de consultas de contenido multimedia que te permiten responder a las preferencias del usuario: prefers-color-scheme, prefers-contrast y prefers-reduced-motion. Consulta los módulos sobre temas y accesibilidad para obtener más detalles.

Puedes combinar atributos multimedia en una sola consulta multimedia. 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 expresó una preferencia por reducir el movimiento.

@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 agregaremos más funciones multimedia.

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

Una función de medios scripting te permitirá ajustar tu CSS en función de la disponibilidad de JavaScript.

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

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

Verifica tu comprensión

Pon a prueba tus conocimientos sobre las funciones multimedia

¿Una consulta multimedia puede buscar un dispositivo con un ancho específico, como @media (width: 1024px)?

Verdadero

Solo se puede lograr un ancho específico si se verifica simultáneamente si el ancho es superior a 1023px y menor que 1025px.

Falso

min-width y max-width son lo que está disponible.

¿Una consulta de contenido multimedia puede buscar un dispositivo en un aspect-ratio específico, como @media (aspect-ratio: 4/3)?

Verdadero

Es exclusivo de la relación de aspecto, y se puede hacer coincidir una sola relación.

Falso

Esta opción existe para aspect-ratio.

¿Cuáles son las consultas de medios de color válidas?

@media (color)

Combina con cualquier dispositivo de color.

@media (monochrome)

Coincide con cualquier dispositivo sin capacidad de color.

@media (color-gamut: srgb)

Coincide con dispositivos con capacidad de color sRGB.

@media (min-color-index: 15000)

Coincide con dispositivos que tienen al menos 15,000 colores disponibles.

@media (dynamic-range: high)

Coincide con los dispositivos compatibles con rangos de colores HD.

¿Cuáles de las siguientes consultas de medios de preferencias del usuario son válidas?

@media (prefers-color-scheme: dark)

Coincide cuando un usuario tiene su sistema operativo configurado en modo oscuro.

@media (prefers-colors: high-definition)

No es real.

@media (prefers-reduced-motion: reduce)

Coincide cuando un usuario tiene configurado su sistema operativo para reducir el movimiento.

@media (prefers-contrast: more)

Coincide cuando un usuario tiene su sistema operativo configurado con contrastes más altos.

@media (prefers-site-speed: fast)

No es real.