Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

Ultima revisión 17/04/2013

Responsive Design: Soporte y características de Media Queries

Como decíamos en el artículo de ayer, las Media Queries tienen soporte en Internet Explorer 9+, Firefox 3.5+, Safari 3+, Opera 7+, así como en los smartphones más modernos y otros dispositivos móviles. Aunque versiones viejas de IE no soporten los Media Queries, puedes -y deberías- empezar a usarlos ahora. Más adelante se discute como lidiar con versiones viejas de navegadores.

A continuación se muestra la lista de características de dispositivos que se pueden usar con Media Queries.

Propiedad Valor Min/Max Descripción
width Ancho (px) Si Ancho del área visible
height Alto (px) Si Altura del área visible
device-width Ancho (px) Si Ancho total del dispositivo
device-height Alto (px) Si Altura total del dispositivo
orientation “portrait” o “landscape” No Orientación del dispositivo
aspect-ratio Relación (w/h) Si Relación ancho/alto expresado con dos enteros separados por / (ejem: 16/9)
device-aspect-ratio Relación (w/h) Si Relación ancho/alto del dispositivo, expresado con dos enteros separados por /
color Número entero Si Número de bits por color (si no hay color valor 0)
color-index Número entero Si Número de entradas en la tabla de color del dispositivo
monochrome Número entero Si Número de bits por píxel en la memoria de vídeo monocromo (blanco y negro si no, el valor es 0)
resolution Resolución Si Densidad de píxeles del dispositivo, se expresa entero seguido de dpi (puntos por pulgada) o dpcm (puntos por centímetro)
scan Progressive o interlace No Progresivo o entrelazado, Proceso de digitalización utilizada por los dispositivos de TV
grid 0 o 1 No Si se establece en 1, el dispositivo está basado en red, tal como un terminal de teletipo o pantalla del teléfono con una sola fuente fija (todos los otros dispositivos son 0)

Las primeras cinco características de la Tabla (width, height, device-width, device-height y orientation) son las más útiles y frecuentemente utilizadas. Se puede agregar un prefijo a la mayoría de las características con min- y max- para indicar un valor mínimo y máximo, como min-with y max-width. La columna Min/Max indica qué características se pueden modificar de esta forma.

Para agregar un Media Querie al atributo media, se tiene que ajustar una o más condiciones con las características. Cada condición esta envuelta en paréntesis y se agrega a la declaración con la palabra AND

"media="screen and (min-width: 401px) and (max-width: 600px)"

Las Media Queries pueden adquirir valores true o false: Si la condición es true, se aplica el estilo; si es false, será ignorada.

Algunos atributos media, como color, monochrome y grid, se pueden usar como condiciones sin especificar un valor.

media="screen and (color)"

Especificaciones alternativas

Para especificar características media alternativas. En cambio, se separan por coma, de esta forma: En el ejemplo siguiente se aplica cuando las pantallas tienen un acho superior a 769 pixeles o cuando los dispositivos de impresión tienen un acho de papel menor a 6 pulgadas.

media="screen and (min-width: 769px), print and (min-width: 6in)"

Especificar condiciones negativas

Para especificar condiciones negativas lo realizaremos con not. Por ejemplo:

media="not screen and (monochrome)"

Se puede utilizar not para negar una declaración por completo. El ejemplo anterior se aplica a todos los dispositivos excepto de pantallas monocromáticas.

Esconder Media Queries de navegadores viejos

La especificación de Media Queries también nos provee de only, que pretende esconder los Media Queries de navegadores viejos. También debe ir al inicio de la declaración. Por ejemplo:

media="only screen and (min-width: 401px) and (max-width: 600px)"

Los navegadores que no reconocen las Media Queries, esperan una lista separada por comas de media types y, según la especificación W3C dice que se debería truncar cada valor, inmediatamente antes del primer caracter no alfanumérico que no sea un guión. Así que un navegador viejo debería interpretar el ejemplo precedente de esta forma:

media="only"

Como no existe ningún media type only, el estilo es ignorado. De igual manera, un navegador viejo, deberá interpretar lo siguiente como media screen:

media="screen and (min-width: 401px) and (max-width: 600px)"

En otras palabras, deberá aplicar las reglas del estilo a todos los dispositivos, incluso aunque no entienda las Media Queries. IE 6, 7 y 8 fallan al implementar la especificación correctamente ya que ignora por completo la hoja de estilos.

A pesar de este comportamiento, aún se recomienda agregar el prefijo only a los Media Queries, si deseas esconder todos los estilos de otros navegadores menos comunes.

Versiones menos modernas de Internet Explorer

La falta de soporte para Media Queries en IE 6 hasta IE 8 no es un problema. Simplemente crea un set básico de estilos para todos los navegadores que no usen Media Queries, y utiliza Media Queries para ofrecer una mejor experiencia para visitantes con navegadores más modernos.

Alternativamente, puedes usar una condicional de comentario para Internet Explorer y una serie de reglas para versiones viejas de IE, como estas:

<!--[if lt IE 9 & !IEMobile]>
    <link href="iestyles.css" rel="stylesheet" type="text/css">
<![endif]-->

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.