Media query

Las media queries se esbozaron por primera vez en la propuesta inicial de CSS de Håkon Wium Lie en 1994,[2] pero no se convirtió en parte de CSS1. La recomendación HTML4 de 1997 muestra un ejemplo de como podría agregarse en el futuro.[3] En el 2000, la W3C comenzó a trabajar en las media queries y también en otro esquema para el soporte de varios dispositivos: CC/PP. Las 2 acciones estaban orientadas al mismo problema, pero CC/PP es centrado en el servidor, mientras los Media Queries están centrados en el cliente.[4] El primer borrador público para Medias Queries fue publicado en 2001,[5] y la especificación se convirtió en una recomendación de la W3C en 2012 después que los navegadores le dieran soporte.

Una media query consiste de un media type y una o más expresiones, que implican media features, que se resuelve en true o false. El resultado de la consulta es verdadero si el media type especificado en el media query coincide con el tipo de dispositivo sobre el que el documento está siendo mostrado y todas las expresiones del media query son verdaderas. Cuando un media query es verdadero, se aplica la hoja de estilo correspondiente o las reglas de estilo, siguiendo las reglas normales en cascada.[6]

Esto es un simple ejemplo:

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

Un media type puede ser declarado en la cabecera de un documento HTML usando el atributo "media" dentro de un elemento <link>. El valor específico del atributo "media" indica en que dispositivo el documento vinculado será mostrado.[7] Media types también pueden ser declarados dentro de instrucciones de procesamiento XML, el @import at-rule, y el @media at-rule. CSS2 definen los siguientes media types:[8]

• braille
• embossed
• handheld
• print
• projection
• screen
• speech
• tty
• tv

El media type "all" también puede ser usado para indicar que las hojas de estilo apliquen todos los media types.[9]

La siguiente tabla contiene los atributos media recogidos de la última recomendación de la W3C para media queries, el 6 de junio de 2007.[10]

• W3C – Media Queries recommendation 19 June 2012
• W3C – CSS specs > Media Queries
• Examples of Media Queries usage
• Sitepoint – Media Queries