Funciones de contenido multimedia

El diseño responsivo no sería posible sin las consultas de medios. Antes de las media queries, no había forma de saber qué tipo de dispositivo usaban las personas para visitar tu sitio web. Los diseñadores debieron 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 de medios. Por primera vez, los diseñadores podían satisfacer las necesidades de las personas. Los diseñadores podían ajustar sus diseños para que se adaptaran a los dispositivos de las personas.

Recuerda que una consulta de medios incluye un tipo de medio opcional y una función de medios obligatoria. Los tipos de medios no han cambiado mucho con el paso de los años. Aún hay solo cuatro valores posibles:

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

Por otro lado, las funciones de medios se expandieron considerablemente. Ahora, los diseñadores pueden satisfacer las necesidades de los usuarios más allá de la mitad del camino, ya que adaptan los diseños para que se ajusten a mucho más que el tamaño de la pantalla.

Dimensiones del viewport

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

Este enfoque aditivo también funciona para la altura. Con min-height, puedes introducir más reglas a medida que haya más altura de la ventana gráfica disponible. 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 de medios max-height si lo prefieres. Aquí, el encabezado está anclado de forma predeterminada, pero se quita la fijación 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. El atributo 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 y 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 salirse de control rápidamente. Si no necesitas ese nivel de control detallado, la función de medios 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.
}

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 de medios 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 medios 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 frecuencias de actualización con la función de medios update. Esta función de medios informa uno de tres valores: none, slow y fast.

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

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 de hardware. En el módulo sobre temas, viste cómo definir propiedades en un archivo de manifiesto de la app web. Una de esas propiedades se llama display, y puedes asignarle un valor de fullscreen, standalone, minimum-ui o browser. La función de medios display-mode correspondiente te permite personalizar tus estilos para estas diferentes opciones.

Supongamos que proporcionaste un valor de display de standalone en el manifiesto de tu app web. Si alguien agrega tu sitio a su pantalla principal, se iniciará sin ninguna interfaz de navegador. Puedes decidir 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 de medios 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 la función de medios monochrome sin ningún valor.

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

Hay una función de medios color correspondiente.

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

En el caso de las pantallas a color, puedes escribir consultas con las funciones de medios 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 de medios 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 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 de medios 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.

Consultas de preferencias del usuario

Con CSS, puedes colaborar con tus usuarios para asegurarte de que puedan acceder a tu contenido de una manera que les resulte útil. En esta lección, aprendiste a aplicar diferentes CSS según las dimensiones y las funciones del dispositivo del usuario. Sin embargo, también puedes aplicar diferentes CSS según la configuración del usuario.

Modo oscuro y modo claro

Puedes responder a la preferencia del usuario por un tema oscuro o claro. Muchos usuarios establecen esta opción como preferencia del sistema.

Cómo establecer el esquema de color para los elementos de la IUx

El navegador proporciona colores predeterminados para elementos como las barras de desplazamiento y los elementos de formulario. Puedes especificar si deseas usar un tema claro para quienes tienen color-scheme: light o un tema oscuro con color-scheme: dark. También puedes especificar que la página admite ambos formatos con color-scheme: light dark. Puedes establecerlo en el elemento :root o html para establecer el esquema de toda la página, o bien puedes anularlo para elementos específicos.

También puedes establecer una etiqueta meta para color-scheme y establecer el esquema de una página antes de que se carguen tus estilos. Si estableces color-scheme: normal en un elemento de la página, se usará el valor de color-scheme que establezcas en esta metaetiqueta.

<meta name="color-scheme" content="dark light">

Función de prefers-color-scheme

También puedes definir estilos personalizados en respuesta al tema de color preferido del usuario con una consulta de medios para prefers-color-scheme.

light-dark

Si les brindas a los usuarios la opción de elegir entre un tema claro y uno oscuro, es posible que te resulte detallado establecer cada color dentro de una consulta de medios. light-dark() te permite especificar ambos en una sola propiedad.

Para habilitar esto, debes establecer color-scheme: light dark en el elemento o en uno de sus elementos superiores. Primero, debes establecer un color para usar en el modo claro y, luego, un color para usar en el modo oscuro.

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

Si un usuario tiene configurada la preferencia del sistema para solicitar el modo claro, el encabezado será negro. Si prefieren el modo oscuro, el encabezado será blanco.

Preferencias de contraste

Es posible que a tus usuarios les resulte más fácil leer contenido con contraste alto o bajo, y que configuren su sistema para anular tu tema con lo que les funcione mejor. Tu función es asegurarte de que tu sitio siga funcionando bien con sus preferencias.

Tal vez recuerdes del módulo de cascada que los estilos de usuario locales de !important pueden anular los estilos creados que proporciona una página web. Esto permite que los usuarios usen los estilos que mejor les funcionen.

Colores forzados

Windows proporciona "Temas de contraste" que los usuarios pueden seleccionar para anular los temas de un sitio web. A menudo, se trata de temas de alto contraste que pueden estar en modo claro o modo oscuro. En CSS, esto se denomina colores forzados y, en la mayoría de los casos, tu sitio se comportará como se espera en este modo. Los botones, los vínculos, las entradas y otros contenidos usarán los colores del tema.

En ocasiones, es posible que debas ajustar tus estilos, por ejemplo, si usas elementos de formas no estándares. Puedes usar la consulta de medios @media (forced-colors: active) para aplicar estilos cuando un usuario haya habilitado los colores forzados.

En algunos casos, los estilos de un sitio son fundamentales para comprender el contenido en sí, por ejemplo, con un selector de color o un gráfico con una leyenda de color. Puedes establecer forced-color-adjust: none; en un elemento para inhabilitar el modo de colores forzados. Asegúrate de rechazar la habilitación solo en elementos específicos y de verificar que el contenido siga siendo accesible en el modo de colores forzados.

Contraste alto

Algunos usuarios también pueden configurar su sistema para solicitar un mayor contraste. Puedes ajustar tus estilos en respuesta con la consulta de medios prefers-contrast: more.

Movimiento reducido

Puedes responder a la preferencia del usuario por el movimiento reducido con la consulta de medios prefers-reduced-motion. A menudo, se usa para proporcionar animaciones alternativas que evitan movimientos grandes que pueden ser desencadenantes para personas con epilepsia, trastornos vestibulares del movimiento o sensibilidad a la migraña. Obtén más información en Consideraciones para trabajar con animaciones.

Escritura de secuencias de comandos

Es posible que tus usuarios visiten tu sitio con JavaScript inhabilitado, y puedes ajustar tu CSS para que puedan acceder a tu contenido con la consulta de medios scripting.

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre las funciones multimedia