Consultas de los medios

Las consultas de medios son una característica de CSS 3 que permite que la representación del contenido se adapte a diferentes condiciones, como la resolución de la pantalla (por ejemplo, el tamaño de la pantalla de un dispositivo móvil o de un ordenador). Se convirtieron en un estándar recomendado por el W3C en junio de 2012 ^{[ 1 ]} y son una tecnología fundamental del diseño web responsivo (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 se incluyeron en CSS  1 . La Recomendación HTML4 de 1997 muestra un ejemplo de cómo se podrían agregar consultas de medios en el futuro. ^{[ 3 ]} En 2000, el W3C comenzó a trabajar en consultas de medios y también en otro esquema para admitir varios dispositivos: CC/PP . Ambos 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 ]} Media Queries Nivel 3, publicado como Recomendación Candidata el 27 de julio de 2010, se convirtió en una 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, eran un Borrador de Recomendación Candidata del W3C a fecha de 25 de diciembre de 2021. ^{[ 7 ]}

Una consulta de medios consta de un tipo de medio y una o más expresiones, que involucran características de medios , que se resuelven como verdadero o falso. El resultado de la consulta es verdadero si el tipo de medio especificado en la consulta 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 la hoja de estilo o las reglas de estilo correspondientes, siguiendo las reglas de cascada normales. ^{[ 8 ] [ 9 ]} Las consultas de medios utilizan la regla CSS "@".@media

Los siguientes son ejemplos de consultas de medios CSS:

@media screen and ( display-mode : fullscreen ) { /* El código aquí solo se aplica a pantallas en modo de pantalla completa * / }

@media all and ( orientation : landscape ) { /* El código aquí solo se aplica en orientación horizontal * / }

@media screen and ( min-width : 500px ) { /* El código aquí solo se aplica cuando el ancho de la pantalla es de 500 píxeles o más * / }

Un tipo de medio se puede declarar en la cabecera de un documento HTML usando 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 medio también se pueden declarar dentro de las instrucciones de procesamiento XML , la regla @ y la regla @. CSS 2 define los siguientes como tipos de medio: ^{[ 11 ]}<link>@import@media 

• Todos (apto para todos los dispositivos)
• braille
• repujado
• portátil
• imprimir
• proyección
• pantalla
• discurso
• tty
• TELEVISOR

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 medios enumeradas en la última recomendación del W3C para consultas de medios, con fecha del 6 de junio de 2007. ^{[ 13 ]}

• W3C – Recomendación sobre consultas a los medios, 19 de junio de 2012
• W3C – Especificaciones CSS > Consultas de medios
• CodeSpot: consultas de medios CSS