IslaVisual
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]-->