Las consultas de medios son una característica de CSS 3 que permite que la representación de contenido se adapte a diferentes condiciones, como la resolución de pantalla (por ejemplo, el tamaño de la pantalla de dispositivos móviles y de escritorio). Se convirtió en un estándar recomendado por el W3C en junio de 2012 [1] y es una tecnología fundamental del diseño web adaptable (RWD).
Las consultas de medios se esbozaron por primera vez en la propuesta inicial de CSS de Håkon Wium Lie en 1994, [2] pero no pasaron a formar parte de CSS 1. La Recomendación HTML4 de 1997 muestra un ejemplo de cómo se podrían añadir consultas de medios en el futuro. [3] En 2000, el W3C empezó a trabajar en consultas de medios y también en otro esquema para dar soporte a varios dispositivos: CC/PP . Los dos abordan el mismo problema, pero CC/PP está centrado en el servidor, mientras que las consultas de medios están centradas en el navegador. [4] El primer borrador de trabajo público para consultas de medios se publicó en 2001. [5] Las consultas de medios de nivel 3, publicadas como recomendación candidata el 27 de julio de 2010, se convirtieron en recomendación del W3C el 19 de junio de 2012. Las correcciones propuestas se publicaron el 5 de abril de 2022. [6]
Las consultas de medios de nivel 4, publicadas como borrador de trabajo el 9 de mayo de 2017, fueron un borrador de recomendación candidato del W3C al 25 de diciembre de 2021. [7]
Una consulta de medios consta de un tipo de medio y una o más expresiones, que incluyen características de medios , que se resuelven como verdaderas o falsas. El resultado de la consulta es verdadero si el tipo de medio especificado en la consulta de medios coincide con el tipo de dispositivo en el que se muestra el documento y todas las expresiones en la consulta de medios son verdaderas. Cuando una consulta de medios es verdadera, se aplican las reglas de estilo o la hoja de estilo correspondiente, siguiendo las reglas en cascada normales. [8] [9]
Las consultas de medios utilizan la regla "at" de CSS.@media
Los siguientes son ejemplos de consultas de medios CSS:
@ media screen and ( display-mode : fullscreen ) { /* El código aquí sólo se aplica a pantallas en pantalla completa */ } @ media all and ( orientation : landscape ) { /* El código aquí solo se aplica en orientación horizontal */ } @ media screen and ( min-device-width : 500px ) { /* El código aquí solo se aplica a pantallas con un ancho igual o mayor a 500 píxeles */ } Un tipo de medio se puede declarar en el encabezado de un documento HTML utilizando el atributo "media" dentro de un elemento. El valor del atributo "media" especifica en qué dispositivo se mostrará el documento vinculado. [10] Los tipos de medios también se pueden declarar dentro de las instrucciones de procesamiento XML , la regla at y la regla at. CSS 2 define los siguientes como tipos de medios: [11]<link>@import@media
El tipo de medio "all" también se puede utilizar para indicar que una hoja de estilo se aplica a todos los tipos de medios. [12]
La siguiente tabla contiene las características de los medios enumeradas en la última recomendación del W3C para consultas de medios, con fecha del 6 de junio de 2007. [13]