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.

color

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

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.

@media all and (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.

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

<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.

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

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.

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 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).

<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.

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

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).

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.

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

@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).

@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).

@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.

@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).

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

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

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

-moz-images-in-menus

-moz-mac-graphite-theme

-moz-maemo-classic

-moz-device-pixel-ratio

-moz-scrollbar-end-backward

-moz-scrollbar-end-forward

-moz-scrollbar-start-backward

-moz-scrollbar-start-forward

-moz-scrollbar-thumb-proportional

-moz-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.

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).

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)

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).

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.