Las consultas de medios son útiles cuando desea modificar su sitio o aplicación dependiendo del tipo general de un dispositivo (como impresión frente a pantalla) o características y parámetros específicos (como resolución de pantalla o ancho de ventana del navegador ).
Las consultas de medios se utilizan para lo siguiente:
Para hacer referencia a los medios de comunicación específicos para los <style>, <link>, <source>y otros HTML elementos con el media=atributo.
-
Para probar y monitorear estados de medios usando los métodos Window.matchMedia()y JavaScript .MediaQueryList.addListener()
Nota: Los ejemplos en esta página usan CSS @mediapara fines ilustrativos, pero la sintaxis básica sigue siendo la misma para todos los tipos de consultas de medios.
Sintaxis
Una consulta de medios se compone de un tipo de medio opcional y cualquier cantidad de expresiones de características de medios . Se pueden combinar varias consultas de varias maneras mediante operadores lógicos . Las consultas de medios no distinguen entre mayúsculas y minúsculas.
Una consulta de medios se calcula como verdadera cuando el tipo de medio (si se especifica) coincide con el dispositivo en el que se muestra un documento y todas las expresiones de características de medios se calculan como verdaderas. Las consultas que involucran tipos de medios desconocidos son siempre falsas.
Nota: Una hoja de estilo con una consulta de medios adjunta a su <link>etiqueta aún se descargará incluso si la consulta devuelve falso. Sin embargo, su contenido no se aplicará a menos y hasta que el resultado de la consulta cambie a verdadero.
Tipos de medios
Los tipos de medios describen la categoría general de un dispositivo. Excepto cuando se utilizan los operadores lógicos noto only, el tipo de medio es opcional y el alltipo estará implícito.
all
Apto para todos los dispositivos.
print
Destinado a material paginado y documentos vistos en una pantalla en modo de vista previa de impresión. (Consulte los medios paginados para obtener información sobre problemas de formato específicos de estos formatos).
screen
Destinado principalmente para pantallas.
speech
Destinado a sintetizadores de voz.
Tipos obsoletas medios: CSS2.1 y Medios Consultas 3 definido varios tipos de medios adicionales ( tty, tv, projection, handheld, braille, embossed, y aural), pero eran en desuso en los medios de comunicación Consultas 4 y no debe ser utilizado. El auraltipo ha sido reemplazado por speech, que es similar.
Funciones de medios
Las funciones multimedia describen características específicas del agente de usuario , dispositivo de salida o entorno. Las expresiones de características multimedia prueban su presencia o valor, y son completamente opcionales. Cada expresión de característica de medios debe estar entre paréntesis.
Nombre Resumen Notas any-hover ¿Algún mecanismo de entrada disponible permite al usuario desplazarse sobre los elementos? Agregado en Media Consultas Nivel 4. any-pointer ¿Existe algún mecanismo de entrada disponible como dispositivo señalador? De ser así, ¿qué tan preciso es? Agregado en Media Consultas Nivel 4. aspect-ratio Relación de aspecto ancho a alto de la ventana gráfica color Número de bits por componente de color del dispositivo de salida, o cero si el dispositivo no tiene color color-gamut Gama aproximada de colores admitidos por el agente de usuario y el dispositivo de salida. Agregado en Media Consultas Nivel 4. color-index Número de entradas en la tabla de búsqueda de color del dispositivo de salida, o cero si el dispositivo no utiliza dicha tabla device-aspect-ratio Relación de aspecto ancho a alto del dispositivo de salida Desaprobado en las consultas de medios Nivel 4. device-height Altura de la superficie de representación del dispositivo de salida. Desaprobado en las consultas de medios Nivel 4. device-width Ancho de la superficie de renderizado del dispositivo de salida Desaprobado en las consultas de medios Nivel 4. display-mode El modo de visualización de la aplicación, como se especifica en el displaymiembro del manifiesto de la aplicación web Definido en la especificación del Manifiesto de la Aplicación Web . forced-colors Detecta si el agente de usuario restringe la paleta de colores Agregado en Media Consultas Nivel 5. grid ¿El dispositivo utiliza una pantalla de cuadrícula o mapa de bits? height Altura de la vista hover ¿El mecanismo de entrada principal permite al usuario desplazarse sobre los elementos? Agregado en Media Consultas Nivel 4. inverted-colors ¿El agente de usuario o el SO subyacente invierte los colores? Agregado en Media Consultas Nivel 5. light-level Nivel de luz del medio ambiente Agregado en Media Consultas Nivel 5. monochrome Bits por píxel en el búfer de marco monocromo del dispositivo de salida, o cero si el dispositivo no es monocromo orientation Orientación de la vista overflow-block ¿Cómo maneja el dispositivo de salida el contenido que desborda la ventana gráfica a lo largo del eje del bloque? Agregado en Media Consultas Nivel 4. overflow-inline ¿Se puede desplazar el contenido que desborda la ventana gráfica a lo largo del eje en línea? Agregado en Media Consultas Nivel 4. pointer ¿Es el mecanismo de entrada principal un dispositivo señalador y, de ser así, qué tan preciso es? Agregado en Media Consultas Nivel 4. prefers-color-scheme Detecta si el usuario prefiere un esquema de color claro u oscuro Agregado en Media Consultas Nivel 5. prefers-contrast Detecta si el usuario ha solicitado que el sistema aumente o disminuya la cantidad de contraste entre colores adyacentes Agregado en Media Consultas Nivel 5. prefers-reduced-motion El usuario prefiere menos movimiento en la página. Agregado en Media Consultas Nivel 5. prefers-reduced-transparency El usuario prefiere una transparencia reducida. Agregado en Media Consultas Nivel 5. resolution Densidad de píxeles del dispositivo de salida scan Proceso de escaneo del dispositivo de salida scripting Detecta si las secuencias de comandos (es decir, JavaScript) están disponibles Agregado en Media Consultas Nivel 5. update Con qué frecuencia el dispositivo de salida puede modificar la apariencia del contenido Agregado en Media Consultas Nivel 4. width Ancho de la ventana gráfica, incluido el ancho de la barra de desplazamiento Operadores logicos
Los operadores lógicos not , andy onlyse pueden utilizar para componer una consulta de medios complejos. También puede combinar múltiples consultas de medios en una sola regla separándolas con comas.
and
El andoperador se utiliza para combinar varias funciones de medios en una sola consulta de medios, lo que requiere que cada característica encadenada devuelva verdadero para que la consulta sea verdadera. También se usa para unir características de medios con tipos de medios.
not
El notoperador se utiliza para negar una consulta de medios, devolviendo verdadero si la consulta de lo contrario devolvería falso. Si está presente en una lista de consultas separadas por comas, solo negará la consulta específica a la que se aplica. Si utiliza el notoperador, también debe especificar un tipo de medio.
Nota: En el Nivel 3, la notpalabra clave no se puede usar para negar una expresión de característica de medios individual, solo una consulta de medios completa.
only
El onlyoperador se usa para aplicar un estilo solo si una consulta completa coincide, y es útil para evitar que los navegadores más antiguos apliquen estilos seleccionados. Cuando no se usa only, los navegadores más antiguos interpretarían la consulta screen and (max-width: 500px)simplemente como screen, ignorando el resto de la consulta y aplicando sus estilos en todas las pantallas. Si utiliza el onlyoperador, también debe especificar un tipo de medio.
, (coma)
Las comas se utilizan para combinar múltiples consultas de medios en una sola regla. Cada consulta en una lista separada por comas se trata por separado de las demás. Por lo tanto, si alguna de las consultas en una lista es verdadera, toda la declaración de medios devuelve verdadero. En otras palabras, las listas se comportan como un oroperador lógico .
Orientación de tipos de medios
Los tipos de medios describen la categoría general de un dispositivo dado. Aunque los sitios web se diseñan habitualmente teniendo en cuenta las pantallas, es posible que desee crear estilos destinados a dispositivos especiales como impresoras o lectores de pantalla basados en audio. Por ejemplo, este CSS está dirigido a impresoras:
@media print
{
…
}
También puede apuntar a múltiples dispositivos. Por ejemplo, esta @mediaregla usa dos consultas de medios para apuntar a dispositivos de pantalla e impresión:
@media screen, print
{
…
}
Consulte Tipos de medios para obtener una lista de todos los tipos de medios. Debido a que describen dispositivos en términos muy amplios, solo unos pocos están disponibles; para apuntar a atributos más específicos, use características de medios en su lugar.
Orientación de funciones multimedia
Las características de los medios describen las características específicas de un agente de usuario , dispositivo de salida o entorno determinado. Por ejemplo, puede aplicar estilos específicos a monitores de pantalla ancha, computadoras que usan ratones o dispositivos que se usan en condiciones de poca luz. Este ejemplo aplica estilos cuando el mecanismo de entrada principal del usuario (como un mouse) puede pasar sobre elementos:
@media (hover: hover)
{
…
}
Muchas funciones multimedia son funciones de rango , lo que significa que pueden tener como prefijo «min-» o «max-» para expresar restricciones de «condición mínima» o «condición máxima». Por ejemplo, este CSS aplicará estilos solo si el ancho de la ventana de visualización de su navegador es igual o menor que 12450 px:
@media (max-width:
12450px)
{
…
}
Si crea una consulta de características de medios sin especificar un valor, los estilos anidados se utilizarán siempre que el valor de la característica no sea cero (o none, en el Nivel 4). Por ejemplo, este CSS se aplicará a cualquier dispositivo con una pantalla a color:
@media (color)
{
…
}
Si una función no se aplica al dispositivo en el que se ejecuta el navegador, las expresiones que involucran esa función multimedia siempre son falsas. Por ejemplo, los estilos anidados dentro de la siguiente consulta nunca se usarán, porque ningún dispositivo de solo voz tiene una relación de aspecto de pantalla:
@media speech and (aspect-ratio:
11/5)
{
…
}
Para obtener más ejemplos de funciones multimedia , consulte la página de referencia de cada función específica.
Crear consultas de medios complejas
A veces es posible que desee crear una consulta de medios que dependa de múltiples condiciones. Aquí es donde los operadores lógicos vienen en: not, and, y only. Además, puede combinar múltiples consultas de medios en una lista separada por comas ; Esto le permite aplicar los mismos estilos en diferentes situaciones.
En el ejemplo anterior, ya hemos visto que el andoperador solía agrupar un tipo de medio con una función de medios . El andoperador también puede combinar múltiples funciones multimedia en una sola consulta multimedia. El notoperador, mientras tanto, niega una consulta de medios, básicamente invirtiendo su significado normal. El onlyoperador evita que los navegadores más antiguos apliquen los estilos.
Nota: En la mayoría de los casos, el alltipo de medio se usa de manera predeterminada cuando no se especifica ningún otro tipo. Sin embargo, si utiliza los operadores noto only, debe especificar explícitamente un tipo de medio.
Combinando múltiples tipos o características
La andpalabra clave combina una función de medios con un tipo de medios u otras características de medios. Este ejemplo combina dos funciones multimedia para restringir los estilos a dispositivos orientados al paisaje con un ancho de al menos 30 ems:
@media (min-width:
30em) and (orientation: landscape)
{
…
}
Para limitar los estilos a los dispositivos con una pantalla, puede encadenar las funciones screenmultimedia al tipo de medios:
@media screen and (min-width:
30em) and (orientation: landscape)
{
…
}
Prueba para múltiples consultas
Puede usar una lista separada por comas para aplicar estilos cuando el dispositivo del usuario coincida con cualquiera de los diversos tipos, características o estados de medios. Por ejemplo, la siguiente regla aplicará sus estilos si el dispositivo del usuario tiene una altura mínima de 680 px o es un dispositivo de pantalla en modo vertical:
@media (min-height:
680px), screen and (orientation: portrait)
{
…
}
Tomando el ejemplo anterior, si el usuario tuviera una impresora con una altura de página de 800px, la declaración de medios devolvería verdadero porque se aplicaría la primera consulta. Del mismo modo, si el usuario estuviera en un teléfono inteligente en modo vertical con una altura de vista de 480px, se aplicaría la segunda consulta y la declaración de los medios seguiría siendo verdadera.
Invertir el significado de una consulta
La notpalabra clave invierte el significado de una consulta de medios completa. Solo negará la consulta de medios específica a la que se aplica. (Por lo tanto, no se aplicará a todas las consultas de medios en una lista de consultas de medios separadas por comas). La notpalabra clave no se puede usar para negar una consulta de función individual, solo una consulta de medios completa. El notúltimo se evalúa en la siguiente consulta:
@media not all and (monochrome)
{
…
}
… para que la consulta anterior se evalúe así:
@media not (all and (monochrome))
{
…
}
… más que así:
@media (not all) and (monochrome)
{
…
}
Como otro ejemplo, la siguiente consulta de medios:
@media not screen and (color), print and (color)
{
…
}
… se evalúa así:
@media (not (screen and (color))), print and (color)
{
…
}
Mejora de la compatibilidad con navegadores antiguos
La onlypalabra clave evita que los navegadores más antiguos que no admiten consultas de medios con características de medios apliquen los estilos dados. No tiene ningún efecto en los navegadores modernos.
@media only screen and (color)
{
…
}
Mejoras de sintaxis en el nivel 4
La especificación de Media Queries Level 4 incluye algunas mejoras de sintaxis para realizar consultas de medios utilizando características que tienen un tipo de «rango», por ejemplo ancho o alto, menos detallado. El nivel 4 agrega un contexto de rango para escribir tales consultas. Por ejemplo, usando la max-funcionalidad para ancho podemos escribir lo siguiente:
Nota: La especificación Nivel 4 de Consultas de medios tiene un soporte razonable en los navegadores modernos, pero algunas características de los medios no son compatibles. Consulte la @mediatabla de compatibilidad del navegador para obtener más detalles.
@media (max-width:
30em)
{
…
}
En Media Consultas Nivel 4 esto se puede escribir como:
@media (width <= 30em)
{
…
}
Usando min-y max-podríamos probar un ancho entre dos valores así:
@media (min-width:
30em) and (max-width:
50em)
{
…
}
Esto convertiría a la sintaxis de Nivel 4 como:
@media (30em <= width <= 50em )
{
…
}
Consultas de medios El nivel 4 también agrega formas de combinar consultas de medios usando álgebra booleana completa con y , no , y o .
Negar una característica con not
Usar not()alrededor de una característica de medios niega esa característica en la consulta. Por ejemplo, not(hover)coincidiría si el dispositivo no tuviera capacidad de desplazamiento:
@media (not(hover))
{
…
}
Prueba de múltiples funciones con or
Puede usar orpara probar una coincidencia entre más de una característica, resolviendo truesi alguna de las características es verdadera. Por ejemplo, la siguiente consulta prueba los dispositivos que tienen una pantalla monocromática o capacidad de desplazamiento:
@media (not (color)) or (hover)
{
…
}
Ver también
