Consultas multimedia

by 2 contributors:

CSS 3 mejora la compatibilidad para hojas de estilos dependientes de los medios permitiendo que las hojas de estilo sean etiquetadas de manera más precisa.  Una consulta multimedia consiste en un tipo de medios y por lo menos una expresión que limite el alcance de la hojas de estilo mediante el uso de características de medios o multimedia, como el ancho, altura y color.  Las consultas multimedia o  de medios permiten la presentación de los contenidos se adapten a un rango específico de dispositivos de salida sin tener que cambiar el contenido en sí.

Sintaxis

Las consultas multimedia consisten en un tipo de medios y una o más expresiones, que implican características multimedia, que se resuelven en verdadero o falso.  El resultado de la consulta es verdadera si el tipo de medios especificado en la consulta coincide con el tipo de dispositivo en que el documento se muestra y si todas las expresiones en la consulta multimedia son verdaderas.

Cuando una consulta multimedia es verdadera, la hoja de estilo correspondiente se aplica siguiendo las reglas normales de cascada.

Cuando ni not  ni only se utilizan dentro de una consulta multimedia, el tipo de medios es opcional y se interpretará como all.

Operadores lógicos

Puedes componer consultas multimedia complejas utilizando operadores lógicos, como not , and y only .

Además, puedes combinar las consultas multimedia múltiples en una lista separada por comas y si alguna de ellas es cierta, se aplica la hoja de estilos asociada.  Este es el equivalente de una operación "o" lógica.

La palabra clave not niega el resultado de la consulta, "all and (not color) "es verdadera para los dispositivos monocromos, independientemente del tipo de medios, por ejemplo.

La palabra clave only ocultará las hojas de estilo de los navegadores antiguos que no admiten las consultas multimedia:

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

PseudoBNF (para aquellos de vosotros que les gusta ese tipo de cosas)

media_query_list: <media_query> [, <media_query> ]*
media_query: [[only | not]? <media_type> [ and <expression> ]*]
  | <expression> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print |
  projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan | grid

Las consultas multimedia son sensibles a mayúsculas y aquellas que implican tipos de medios desconocidos son siempre falsas.

Nota : los paréntesis alrededor de expresiones son necesarios, no usarlos es un error.

Características multimedia

La mayoría de las características multimedia pueden tener los prefijos "min-" o "max-" para expresar restricciones "mayor o igual a" o "menor o igual a".  Esto evita el uso de los símbolos "<" and ">", que entraría en conflicto con HTML y XML.  Si utilizas una característica multimedia sin especificar un valor, la expresión se resuelve en true si el valor de la característica es distinta de cero.

Nota: si una característica multimedia no se aplica al dispositivo en el que el navegador se está ejecutando, las expresiones que implican dicha característica siempre serán falsas.  Por ejemplo, la consulta de la ratio de aspecto de un dispositivo auditivo siempre dará como resultado falso.

color

Valor: <color>
Multimedia: visual
Acepta prefijos min / max :

Indica el número de bits por componente de color del dispositivo de salida.  Si el dispositivo no es un dispositivo de color, este valor es cero.

Nota: si los componentes de color tienen diferente número de bits (por componente de color), se utiliza el número más pequeño.  Por ejemplo, si utiliza una pantalla de 5 bits para los bits de color azul y rojo y 6 para el verde, se considera que el dispositivo usa 5 bits por componente de color.  Si el dispositivo utiliza colores indexados, se utiliza el número mínimo de bits por componente de color de la tabla de colores.

Ejemplos

Para aplicar una hoja de estilos para todos los dispositivos de color:

@media all and (color) { ... }

Para aplicar una hoja de estilo a los dispositivos con un mínimo de 4 bits por componente de color:

@media all and (min-color: 4) { ... }

color-index

Valor: entero
Multimedia: visual
Acepta prefijos min / max : sí

Indica el número de entradas de la tabla de consulta de colores para el dispositivo de salida.

Ejemplos

Para indicar que una hoja de estilos debe aplicarse a todos los dispositivos que utilizan color indexado, puedes hacer lo siguiente:

@media all and (color-index) { ... }

Para aplicar una hoja de estilo a los dispositivos de color indexado con al menos 256 colores:

<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />

aspect-ratio

Valor: entero / entero
Multimedia: visual, tactile
Acepta prefijos min / max : sí

Describe la ratio de aspecto del área de visualización específica del dispositivo de salida.  Este valor se compone de dos números enteros positivos separados por una barra ("/").  Esto representa el número de píxeles horizontales respecto al número de píxeles verticales.

Ejemplo

Lo que se muestra a continuación selecciona una hoja de estilo especial para usar para cuando el área de la pantalla es al menos igual de ancha que de alta.

@media screen and (min-aspect-ratio: 1/1) { ... }

Selecciona el estilo cuando la ratio de aspecto es 1:1 o mayor.

device-aspect-ratio

Valor: entero / entero
Media: visual, tactile
Acepta prefijos min / max : sí

Describe la ratio de aspecto del dispositivo de salida.  Este valor se compone de dos números enteros positivos separados por una barra ("/").  Esto representa el número de píxeles horizontales respecto al número de píxeles verticales.

Ejemplo

El ejemplo de abajo selecciona una hoja de estilo especial para usar con pantallas panorámicas.

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }

Selecciona el estilo cuando la ratio de aspecto es 16:9 o 16:10.

device-height

Valor: <length>
Multimedia: visual, tactile
Acepta prefijos min / max : sí

Describe la altura del dispositivo de salida (es decir, toda la pantalla o la página, y no sólo el área de representación, como la ventana de documento).

Ejemplo

Para aplicar una hoja de estilos a un documento cuando se muestra en una pantalla que es inferior a 800 píxeles de ancho, puedes utilizar lo siguiente:

<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

device-width

Valor: <length>
Multimedia: visual, tactile
Acepta prefijos min / max : sí

Describe la anchura del dispositivo de salida (es decir, toda la pantalla o la página, y no sólo el área de representación, como la ventana de documento).

grid

Valor: entero
Multimedia: todos los dispositivos
Acepta prefijos min / max : sí

Determina si el dispositivo de salida es un dispositivo de red o un dispositivo de mapa de bits.  Si el dispositivo está basado en una red (como una terminal tty (teléfonos de texto para personas con discapacidad auditiva o de habla) o una pantalla de teléfono con un solo tipo de letra), el valor es 1.  De lo contrario, es cero.

Nota: Gecko (y Firefox, por lo tanto) no es compatible con los dispositivos de red, por lo que esta característica multimedia no es compatible.

Ejemplo

Para aplicar un estilo a los dispositivos manuales con una visualización de 15 caracteres o menor:

@media handheld and (grid) and (max-width: 15em) { ... }

Nota: la unidad "em" (eme) tiene un significado especial para los dispositivos de red. Puesto que el ancho exacto de una "em" no se puede determinar, 1em se supone que es el ancho de una celda de la cuadrícula en horizontal y el alto de una celda en vertical.

height

Valor: <length>
Multimedia: visual, tactile
Acepta prefijos min / max : sí

La característica multimedia height describe la superficie de representación del dispositivo de salida (por ejemplo, la altura de la ventanilla o del cuadro de página en una impresora).

Nota: cuando el usuario cambie el tamaño de la ventana, Firefox cambiará las hojas de estilo en función de las consultas multimedia usando las características multimedia width y height.

monochrome

Valor: entero
Multimedia: visual
Acepta prefijos min / max : sí

Indica el número de bits por píxel en un dispositivo monocromático (escala en un grises).  Si el dispositivo no es blanco y negro, el valor del dispositivo es 0.

Ejemplos

Para aplicar una hoja de estilos para todos los dispositivos monocromáticos:

@media all and (monochrome) { ... }

Para aplicar una hoja de estilo para dispositivos monocromáticos con al menos 8 bits por píxel:

@media all and (min-monochrome: 8) { ... }

orientation

Valor: landscape | portrait
Multimedia: visual
Acepta prefijos min / max : no

Indica si el dispositivo está en modo horizontal ("landscape", la pantalla es más ancha que alta) o vertical ("portrait", la pantalla es más alta que ancha).

Ejemplo

Para aplicar una hoja de estilo sólo en orientación vertical:

@media all and (orientation: portrait) { ... }

resolution

Valor: <resolution>
Multimedia: bitmap
Acepta prefijos min / max : sí

Indica la resolución (densidad de píxeles) del dispositivo de salida.  La resolución puede especificarse en puntos por pulgada ("dots per inch", dpi) o en puntos por centímetro ("dots per centimeter", dpcm).

Ejemplo

Para aplicar una hoja de estilo a los dispositivos con al menos 300 puntos por pulgada (dpi) de resolución:

@media print and (min-resolution: 300dpi) { ... }

scan

Valor: progressive | interlace
Multimedia: tv
Acepta prefijos min / max : no

Describe el proceso de escaneo de dispositivos de salida de televisión.

Nota: Gecko (y por lo tanto Firefox ) no es compatible el tipo de elemento multimedia tv, por lo que esta característica es igualmente incompatible.

Ejemplo

Para aplicar una hoja de estilo sólo para televisores de escaneo progresivo:

@media tv and (scan: progressive) { ... }

width

Valor: <length>
Multimedia: visual, tactile
Acepta prefijos min / max : sí

La característica multimedia width describe el ancho de la superficie de representación del dispositivo de salida (por ejemplo, el ancho de la ventana del documento o el del cuadro de página en una impresora).

Nota: cuando el usuario cambie el tamaño de la ventana, Firefox cambiará las hojas de estilo en función de las consultas multimedia usando las características multimedia width y height.

Ejemplos

Si deseas especificar una hoja de estilo para dispositivos portátiles, o dispositivos de pantalla con una anchura superior a 20em, puedes utilizar esta hoja de estilos:

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

Esta consulta multimedia especifica una hoja de estilo que debe aplicarse a los medios impresos más anchos de 8,5 pulgadas:

<link rel="stylesheet" media="print and (min-width: 8.5in)"
    href="http://foo.com/mystyle.css" />

Esta consulta especifica una hoja de estilo que se puede utilizar cuando la vista se sitúa entre 500 y 800 píxeles de ancho:

@media screen and (min-width: 500px) and (max-width: 800px) { ... }

Características multimedia específicas de Mozilla

Mozilla ofrece varias funciones multimedia específicas para Gecko. Algunos de ellas pueden ser propuestas como características multimedia oficiales.

(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

-moz-images-in-menus

Valor: entero
Multimedia: visual
Acepta prefijos min / max : no

Si el dispositivo permite que las imágenes aparecen en los menús, el valor es 1, de lo contrario, el valor es 0. Esto corresponde a la CSS seudoclase :-moz-system-metric(images-in-menus).

(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

-moz-mac-graphite-theme

Valor: entero
Multimedia: visual
Acepta prefijos min / max : no

Si el usuario ha configurado su dispositivo para que utilice la apariencia "Grafito" en Mac OS X, el valor es 1. Si el usuario está utilizando la apariencia estándar de color azul, o no está en Mac OS X, el valor es 0.

Esto corresponde a la seudoclase CSS :-moz-system-metric(mac-graphite-theme).

(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

-moz-maemo-classic

Valor: entero
Multimedia: visual
Acepta prefijos min / max : no

Si el usuario está utilizando Maemo con el tema original, el valor es 1, y si está con los nuevos temas de Fremantle, es 0.

Esto corresponde a la seudoclase CSS :-moz-system-metric(maemo-classic).

(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

-moz-device-pixel-ratio

Valor: float
Multimedia: visual
Acepta prefijos min / max : sí

Indica el número de píxeles del dispositivo por píxel CSS.

Nota: esta característica multimedia también es aplicada por Webkit como -webkit-device-pixel-ratio. Los prefijos min y max aplicados por Gecko se denominan min - moz-device-pixel-ratio y max--moz-device-pixel-ratio, pero los mismos prefijos aplicados por Webkit se denominan -webkit-min-device-pixel-ratio y -webkit-max-device-pixel-ratio.

(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

-moz-scrollbar-end-backward

Valor: número entero
Media: visual
Acepta min / max prefijos: no

Si el dispositivo de interfaz de usuario muestra un botón con la flecha hacia atrás al final de las barras de desplazamiento, el valor es 1. De lo contrario es 0.

Esto corresponde a la seudoclase  CSS :-moz-system-metric(scrollbar-end-backward).

(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

-moz-scrollbar-end-forward

Valor: número entero
Media: visual
Acepta min / max prefijos: no

Si el dispositivo de interfaz de usuario muestra un botón con la flecha hacia adelante al final de las barras de desplazamiento, el valor es 1. De lo contrario es 0.

Esto corresponde a la seudoclase CSS :-moz-system-metric(scrollbar-end-forward).

(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

-moz-scrollbar-start-backward

Valor: entero
Multimedia: visual
Acepta prefijos min / max : no

Si el dispositivo de interfaz de usuario muestra un botón con la flecha hacia atrás al comienzo de las barras de desplazamiento, el valor es 1. De lo contrario es 0.

Esto corresponde a la seudoclase CSS :-moz-system-metric(scrollbar-start-backward).

(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

-moz-scrollbar-start-forward

Valor: entero
Multimedia: visual
Acepta prefijos min / max : no

Si el dispositivo de interfaz de usuario muestra un botón con la flecha hacia adelante al principio de las barras de desplazamiento, el valor es 1. De lo contrario es 0.

Esto corresponde a la seudoclase CSS :-moz-system-metric(scrollbar-start-forward).

(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

-moz-scrollbar-thumb-proportional

Valor: entero
Multimedia: visual
Acepta prefijos min / max : no

Si el dispositivo de interfaz de usuario muestra la miniatura de las barras de desplazamiento de manera proporcional (es decir, con un tamaño en función del porcentaje del documento que es visible), el valor es 1. De lo contrario es 0.

Esto corresponde a la seudoclase CSS :-moz-system-metric(scrollbar-thumb-proportional).

(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

-moz-touch-enabled

Valor: entero
Multimedia: visual
Acepta prefijos min / max : no

Si el dispositivo es compatible con los eventos táctiles (para una pantalla táctil), el valor es 1. De lo contrario es 0.

Esto corresponde a la seudoclase CSS :-moz-system-metric(touch-enabled).

Ejemplo

Puedes usar esto para hacer los botones un poco más grandes, por ejemplo, si el usuario está en un dispositivo de pantalla táctil, para que se adapten mejor a la ergonomía de los dedos.

(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

-moz-windows-classic

Valor: entero
Multimedia: visual
Acepta prefijos min / max : no

Si el usuario está utilizando Windows unthemed (en el modo clásico en lugar de utilizar Uxtheme), el valor es 1: De lo contrario es 0.

Esto corresponde a la seudoclase CSS :-moz-system-metric(windows-classic).

(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

-moz-windows-compositor

Valor: entero
Multimedia: visual
Acepta prefijos min / max : no

Si el usuario está utilizando Windows con el compositor DWM, el valor es 1. En caso contrario es 0.

Esto corresponde a la seudoclase CSS :-moz-system-metric(windows-compositor)

(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

-moz-windows-default-theme

Valor: entero
Multimedia: visual
Acepta prefijos min / max : no

Si el usuario no está utilizando uno de los temas por defecto de Windows (Luna, Royale, Zune, o Aero (incluido Vista Basic, Advanced Vista y Aero Glass), el valor es 1. De lo contrario es 0.

Esto corresponde a la seudoclase CSS :-moz-system-metric(windows-default-theme).

(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

-moz-windows-theme

Valor: string
Multimedia: visual
Acepta prefijos min / max : no

Indica qué tema de Windows se está utilizando actualmente. Sólo disponible en Windows. Los valores posibles son:

  • aero
  • luna-blue
  • luna-olive
  • luna-silver
  • royale
  • generic
  • zune

Esto está previsto para que las skins de aplicaciones y otro código chrome puedan adaptarse y funcionen bien con el actual tema de Windows.

Consulta también

Etiquetas y colaboradores del documento

Contributors to this page: teoli, inma_610
Última actualización por: teoli,