La semana pasada vimos las nuevas pseudo clases de CSS nivel 3 o más comúnmente conocido como CSS3 y como utilizarlas. Hoy, vamos a hacer una introducción a las reglas @media de CSS3 y a la nueva forma de utilizarlas para mejorar la experiencia de usuario de las personas que entran a nuestros sitios web independientemente del dispositivo que estén utilizando para acceder a los mismos.
La regla @media nos permite especificar que cierto conjunto de reglas CSS solo deben aplicarse a cierto tipo de dispositivo. Así las definiciones dentro del bloque de la regla @media screen { ... } solo serían interpretadas por dispositivos conectados a monitores de ordenador y los de la regla @media projection { ... } solo se aplicaría a proyectores.
CSS3 añade importantes y nuevas capacidades que nos permiten definir conjuntos de estilos dependiendo de propiedades comunes de los dispositivos que acceden a nuestros sitios. Propiedades como el alto y el ancho o la relación de aspecto o el número de colores disponible. Las reglas @media pueden ser utilizadas para adaptar nuestras páginas, no solo para dispositivos comunes, sino para todo tipo de dispositivos que nuestros lectores usen para visitar nuestras páginas.
Media queries
Hasta ahora, si necesitábamos conocer el tamaño actual de la ventana del navegador, debíamos usar JavaScript para recolectar datos de ese tipo desde el navegador y después darle un uso a esos datos a través de la modificación del DOM a través de métodos programados en JavaScript. Aunque dicho método es válido, no es realmente óptimo ni intuitivo.
CSS3 nos aporta las media queries que nos proveen de una forma de conocer bastantes propiedades comunes de los dispositivos que nos visitan que podemos utilizar en nuestros archivos de estilo para construir entornos dependiendo de los mismos sin ayuda de JavaScript.
Aunque media queries dispone de muchas propiedades diferentes, básicamente viene con cinco sabores:
-
Aspect-ratio: Mira las dimensiones relativas del dispositivo expresadas como una relación de aspecto: 16:9 por ejemplo.
-
Width y height: Mira las dimensiones del área de visualización. Además pueden ser expresadas en valores mínimos y máximos.
-
Orientation: Mira si el layout es panorámico ( el ancho es mayor que el alto ) o vertical ( el alto es mayor que el ancho ). Esto nos permite ajustar los diseños para dispositivos con propiedades de giro de la pantalla como el iPhone, y otros smartphones y los tablets.
-
Resolution: Mira la densidad de los pixeles en el dispositivo de salida. Esto es especialmente útil cuando queremos aprovecharnos de las ventajas de los dispositivos que tiene una resolución mayor a 72 dpi.
-
Color, Color-index y monochrome: Encuentran el número de color o bits por color. Esto nos permite crear diseños específicos para dispositivos monocromáticos.
| Propiedad | Valor | Compatibilidad |
|---|---|---|
aspect-ratio | <relación de aspecto> | FF3.5, S1, C1, O9.5, CSS3 |
max-aspect-ratio | <relación de aspecto> | FF3.5, S1, C1, O9.5, CSS3 |
min-aspect-ratio | <relación de aspecto> | FF3.5, S1, C1, O9.5, CSS3 |
device-aspect-ratio | <relación de aspecto> | FF3.5, S1, C1, O9.5, CSS3 |
max-device-aspect-ratio | <relación de aspecto> | FF3.5, S1, C1, O9.5, CSS3 |
min-device-aspect-ratio | <relación de aspecto> | FF3.5, S1, C1, O9.5, CSS3 |
color | <entero> | FF3.5, S1, C1, O10, CSS3 |
max-color | <entero> | FF3.5, S1, C1, O10, CSS3 |
min-color | <entero> | FF3.5, S1, C1, O10, CSS3 |
color-index | <entero> | FF3.5, S1, C1, O10, CSS3 |
max-color-index | <entero> | FF3.5, S1, C1, O10, CSS3 |
min-color-index | <entero> | FF3.5, S1, C1, O10, CSS3 |
device-height | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
max-device-height | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
min-device-height | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
device-height | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
max-device-height | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
min-device-height | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
device-width | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
max-device-width | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
min-device-width | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
height | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
max-height | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
min-height | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
monochrome | <entero> | FF3.5, S1, C1, O10, CSS3 |
max-monochrome | <entero> | FF3.5, S1, C1, O10, CSS3 |
min-monochrome | <entero> | FF3.5, S1, C1, O10, CSS3 |
orientation | <portrait, landscape> | FF3.5, S1, C1, CSS3 |
resolution | <resolución> | FF3.5, S1, C1, O10, CSS3 |
max-resolution | <resolución> | FF3.5, S1, C1, O10, CSS3 |
min-resolution | <resolución> | FF3.5, S1, C1, O10, CSS3 |
scan | <progressive, interlaced> | FF3.5, S1, C1, O10, CSS3 |
width | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
max-width | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
min-width | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
| ** Supongo que IE9 también soporta estos media queries pero no he podido encontrar información | ||
Los media queries actúan por defecto sobre la vista del navegador con la excepción de aquellos que especifican en su nombre la palabra device que actúan sobre toda la ventana del navegador o área de salida completa.
Usando media queries para especificar estilos
Antes de nada debemos crear nuestra hoja de estilos. Creamos un estilo por defecto que incorporará todas las necesidades universales para nuestro diseño y lo guardamos. Si nos sentimos especialmente originales, podemos llamar al archivo default.css:
Creamos archivos de estilo para cada tipo de dispositivo o media para el que queramos diseñar un estilo específico. Por ejemplo, podemos incluir un estilo específico para impresoras, si nos seguimos sintiendo igual de originales a este podemos llamarle, no se, print.css por ejemplo:
Ya tenemos un estilo por defecto y otro para cuando la página va a ser impresa. Vamos a añadir otro para el iPhone, y para no perder la originalidad que nos caracteriza, vamos a llamarle iphone.css:
Ahora vamos a añadir el meta tag de la vista en el head del documento HTML:
Eso previene de que dispositivos con una pantalla más pequeña —como el iPhone— redimensionen la página impidiendo que tus estilos se interpreten. Enlazamos nuestro estilo por defecto en el documento HTML a través de la etiqueta link y utilizando como regla media all.
Hacemos lo propio con la hoja de estilo print.css pero en esta ocasión utilizamos la regla print. Lo mismo con la hoja de estilo para el iPhone, pero esta vez utilizaremos la regla screen y añadimos nuestros primer media queries en paréntesis conectando múltiples consultas con la palabra and.
El código completo del documento HTML sería como el que sigue:
La regla @media
La regla @media permite que empotremos media queries directamente en nuestras hojas de estilo. De esta manera mejoramos el rendimiento de la página al no tener que cargar archivos CSS adicionales para los diferentes dispositivos.
Para utilizar las reglas @media lo único que tenemos que hacer es crear nuestra hoja de estilos y cuando queramos definir un conjunto de reglas de estilo específicas para un dispositivo determinado utilizar la sintaxis:
@media screen and ( blablabla ) and ( bla bla bla ) { ... }
El efecto es el mismo pero minimizamos la carga de archivos a un único archivo que incluya todas nuestras reglas CSS.
Conclusión
Las posibilidades con las media queries son ilimitadas. Por ejemplo podríamos definir un conjunto de reglas para un dispositivo tablet como Galaxy o iPad tanto para cuando el dispositivo esté en posición horizontal como en vertical, ocultando y mostrando diferentes elementos de nuestro esquema DOM dependiendo de la orientación del dispositivo. Esto abre además un poco más la puerta a la accesibilidad y mejora notablemente la experiencia de todo tipo de usuarios.
En Genbeta Dev | Introducción a CSS3
Más Información Media Queries en la página de la W3C
