Ir directamente al contenido de esta página

Media Queries ya es Candidata a recomendación

Ayer el módulo de CSS3 Media Queries se convirtió en Candidata a recomendación del W3C, lo que significa que ya está a sólo un paso de convertirse en una Recomendación.

El módulo Media Queries define una sintaxis mediante la cual los desarrolladores web puedan emplear información precisa sobre las capacidades del dispositivo y las características del medio en el que se va a representar el contenido que ha creado, sin necesidad de recurrir a JavaScript. Su principal aplicación es poder ofrecer diversas hojas de estilo que se ajusten a esas características. Por ejemplo, se podría presentar un documento con diversos estilos en virtud del ancho disponible en la ventana del agente de usuario:


<link rel="stylesheet" media="screen and (max-width:800px)" href="estilo800.css" />  
<link rel="stylesheet" media="screen and (min-width:800px) and (max-width:1000px)" href="estilo1024.css" />  
<link rel="stylesheet" media="screen and (min-width:1000px)" href="estilo1280.css" />  
	

De hecho, éste es el código que hemos empleado en este ejemplo. Si la ventana del navegador tiene menos de 800 píxeles de ancho, se carga el primer estilo; si tiene entre 800 y 1000, se carga el segundo; por último, si excede los 1000 cargaría el tercero.

En definitiva, es una poderosa herramienta con la que personalizar las páginas web según las necesidades del usuario.

¿Cómo vamos de soporte en los navegadores?

De momento, presentamos en la tabla siguiente los resultados del ejemplo anterior, un poco para tener una idea aproximada, hasta que preparemos un conjunto de pruebas exhaustivo (o lo publique el W3C, aunque de momento no existe en la página oficial de pruebas de CSS).

Media Queries en los navegadores actuales más comunes
Navegador ¿Soporte? ¿Reajuste dinámico?
† Hay una diferencia entre el comportamiento entre las versiones 2.0 y 3.0 de Firefox y las 6, 7 y 8 de Explorer: mientras que estas últimas representan el texto del ejemplo —aunque sin estilo alguno—, ninguna de las dos versiones de Firefox muestra nada del documento.
Firefox 3.5
Firefox 3.0 No
Firefox 2.0 No
Safari 4 Beta
Safari 3.2.1 No
Safari 3.1.1 No
Safari (iPhone) Aún tenemos pendiente probarlo
Opera 10
Opera 9.63
Chrome 2.0
Chrome 1.0 No
Explorer 8 No
Explorer 7 No
Explorer 6 No

En la tabla, en la tercera columna indicamos si es necesario o no recargar la página para que el cambio de hoja de estilo se aplique.

Una última nota: en la medida de lo posible, intentaremos mantener actualizada esta tabla hasta que el soporte de Media Queries sea algo común.

Esta entrada se publicó el 24 de abril de 2009, se archivó en , y fue etiquetada como , , . Autor: Saúl González Fernández. Aún no hay comentarios ›.

Comentarios

Aún no hay comentarios

¿Algún comentario?

* Los campos con un asterisco son necesarios

Últimos proyectos

© Digital Icon, S.L., 2007 – 2018