Un resumen de todas las formas en que las funciones multimedia te permiten responder a los dispositivos y las preferencias.
Un diseño adaptable 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 su sitio web. Los diseñadores tenían 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 gente 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 medios comprende un tipo de medio opcional y una función obligatoria obligatoria. No hubo muchos 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 llegar a 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, por mucho, las que se relacionan con el ancho de la viewport. Pero incluso aquí, se te presenta una opción. Puedes usar la función multimedia max-width para aplicar estilos por debajo de un ancho determinado o puedes usar la función multimedia min-width para aplicar estilos superiores a 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;
}
}
En lo personal, me gusta usar min-width. Aplico estilos de diseño de manera aditiva. Introduzco nuevas reglas de diseño en cada punto de interrupción en lugar de deshacer las reglas anteriores.
Este enfoque adicional también funciona para la altura. Con min-height, puedes agregar más reglas a medida que haya una mayor altura de viewport disponible. Por ejemplo, es posible que tengas un elemento de encabezado que quieras anclar 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 multimedia max-height si lo prefieres. Aquí, el encabezado está anclado de forma predeterminada, pero el interés se quita si no hay suficiente espacio vertical.
header {
position: fixed;
}
@media (max-height: 30em) {
header {
position: static;
}
}
La elección de los prefijos min- y max- no solo se aplica a width y height. La función multimedia de aspect-ratio ofrece la misma opción. También ofrece una versión sin prefijo si deseas aplicar estilos en una proporción exacta de ancho y 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 distintas relaciones de aspecto podría resultar difícil de controlar rápidamente. Si no necesitas ese nivel de control detallado, es posible que la función de contenido 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.
}
Si bien 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 multimedia orientation no es específica del dispositivo. Una ventana del navegador de pantalla completa en una laptop típica tiene un valor orientation de landscape.
Pantallas
Las diferentes pantallas tienen distintas densidades de píxeles, medidas en dpi (puntos por pulgada). Puedes ajustar los estilos para las diferentes densidades de píxeles con la función multimedia resolution. Al igual que aspect-ratio, resolution tiene 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. Por lo general, la densidad de píxeles es solo un problema con las imágenes y las imágenes responsivas son una forma de trabajar con ella directamente en HTML.
Por otro lado, CSS es donde defines tus animaciones y transiciones. Puedes ajustar esas animaciones y transiciones para responder 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 frecuencia de actualización. Una página impresa, por ejemplo, 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 diferentes opciones.
Supongamos que proporcionaste un valor display de standalone en el manifiesto de la app web. Si alguien agrega tu sitio a su pantalla principal, este se iniciará sin ninguna interfaz del navegador. Puedes optar por mostrar un botón 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 tus estilos para 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;
}
}
Existe una función multimedia de color correspondiente.
@media (color) {
body {
color: maroon;
background-color: linen;
}
}
En el caso de las pantallas a color, puedes escribir consultas con las funciones multimedia color-gamut, color-index o dynamic-range. Todos 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 mediante 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. Para obtener más detalles, consulta el módulo sobre interacción.
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. Consulta los módulos sobre temas y accesibilidad para obtener más detalles.
Puedes combinar las funciones multimedia en una sola consulta de medios. Puedes definir el alcance de los estilos de animación para que solo se apliquen si el dispositivo tiene una frecuencia de actualización rápida y el usuario no ha expresado su preferencia por los movimientos reducidos.
@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 un dispositivo usa una paleta de colores restringida o invertida.
Una función multimedia de scripting te permitirá ajustar tu CSS en función de la disponibilidad de JavaScript.
La función multimedia llamada prefers-reduced-data permitirá a los usuarios especificar que su conexión es de uso medido para que puedas enviar recursos más pequeños o menos.
Todavía se están formulando otras propuestas. En el módulo siguiente y final, aprenderás sobre una propuesta para una función de medios que maneja diferentes configuraciones de pantalla.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre las funciones multimedia
¿Una consulta de medios puede verificar un dispositivo con un ancho específico, como @media (width: 1024px)?
1023px e inferior a 1025px.min-width y max-width son los recursos disponibles.¿Una consulta de medios puede buscar un dispositivo en un aspect-ratio específico, como @media (aspect-ratio: 4/3)?
aspect-ratio.¿Cuáles son las consultas de medios de color válidas?
@media (color)@media (monochrome)@media (color-gamut: srgb)@media (min-color-index: 15000)@media (dynamic-range: high)¿Cuáles de las siguientes consultas de medios sobre preferencias de los usuarios son válidas?
@media (prefers-color-scheme: dark)@media (prefers-colors: high-definition)@media (prefers-reduced-motion: reduce)@media (prefers-contrast: more)@media (prefers-site-speed: fast)