soy Kseso y esto EsCSS

Css3 @media Queries Un adivino de variables y hacedor de imposibles

Css3 @media Queries Un adivino de variables y hacedor de imposibles

·Por Kseso ✎ 1

Y en Css2 fueron los media para discriminar los diferentes medios que accedían a la página y servir una u otra hoja de estilos. Así podías ofrecer una una página optimizada para imprimir, para ver en monitores "normales", aural, handheld... pero con la variedad de características de algunos de ellos, como los screen (pantallas a color), evidenciaron sus carencias.

Para suplirlas y aumentar el control sobre qué Css aplicar según qué condiciones de visualización elija el usuario Css3 pone a mano las conocidas como @medias Queries (status: W3C Candidate Recommendation 27 July 2010)
Actualización: status: W3c Proposed Recommendation 26 Abril 2012
W3C Recommendation 19 June 2012

La diferencia estriba en que con las @media Queries no sólo se diferencia por tipo de medio, sino en las condiciones particulares y puntuales en un momento dado de ese medio.

Por ejemplo: si en un dispositivo cambia la orientación, si en una pantalla se redimensiona la ventana del navegador, aplicar en caliente una propiedad/valor u otra.

Cómo incluir las @media Queries en el documento

La llamada a ellas se realiza como con cualquier hoja de estilos en el head del documento. Hay varias formas.

Un solo css para dominar a todos los media:
<!-- css principal o genérico--> <link href="estilos_generales.css" rel="stylesheet" type="text/css"> <!-- media queries css --> <link href="media-queries.css" rel="stylesheet" type="text/css">

Toma nota del orden para evitar problemas con la ley de "lo último leído".
Como es lógico, en el archivo "media-queries.css" pondremos las declaraciones oportunas y que vemos un poco más adelante.

Un archivo css para cada media:

Pero si creas hojas de estilos diferentes también pueden ser llamadas individualmente con su "link href" propio:

<link rel="stylesheet" media="handheld and (max-device-width: 470px)" href="470px.css" /> <link rel="stylesheet" media="handheld and (min-width: 471px) and (max-width: 780px)" href="780px.css" />

En esta forma puedes añadir en el mismo link tantos supuestos como quieras. En el ejemplo de arriba sólo dos, aparatos de mano cuyas anchuras sean las indicadas. Pero puedes seguir contemplando supuestos añadiendo las condiciones a cumplir.

<link rel="stylesheet" media="handheld and (max-device-width: 470px) and (orientation:portrait) and (min-color-index: 256)" href="470px.css" />

Y aun puedes ser más preciso, pues no sólo tienes el operador AND. Ahí están por si los necesitas los operadores NOT y ONLY

Todo lo anterior también puede ser llamado utilizando el método @import en vez de link:

@import url(color.css) screen and (color);

Para cualquier aclaración sobre qué es lícito utilizar y qué no consulta la especificación que te enlazo al inicio

Hay navegadores de móviles que escalan la página para adaptarla a la pantalla del dispositivo. Puedes prevenirlo y evitarlo utilizando el meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Internet explorer 8 y anteriores no soportan las @media Queries pero puedes solventarlo utilizando respond.js o media-queries.js, entre otros, y llamarlos con el oportuno comentario condicional:

<!--[if lt IE 9]> <script type="text/javascript src="tu-ruta-a/css3-mediaqueries.js"></script> <![endif]-->

Las @Media Queries en el archivo Css

¿Aun sigues leyendo? Bien. Entonces ya tienes claro cómo enlazar los estilos en función de las condiciones. También te habrás dado cuenta que no necesitas de javascript, php u otras técnicas complejas para detectar estas variables, o cambios en la página ya cargada, para cambiar propiedades css. Las @media queries y el navegador lo harán por ti.

Declarando @media queries en el css:

Tan sencillo como escribir cualquier otra propiedad o regla de Css. Sólo debes tener presente dos cosas:
Comenzar los estilos con la palabra mágica @media seguida de los destinatarios de estos estilos (los que habías declarado en el link rel del head) y corchetes.

@media screen and (max-device-width: 470px) { /* aquí tus estilos para el medio */ }

Un ejemplo, para pantallas y un tamaño máximo de ella:

/********************* handheld y menor de 470px *********************/ @media screen and (max-device-width: 470px) { /* webkit en iPhone y su ajuste de texto */ html { -webkit-text-size-adjust: none; } /* declaramos lo necesario para estos dispositivos */ #content, nav { float: none; width: auto; } .video embed, .video object, .video iframe { min-height: 250px; max-width: 95%; } #sidebar { display: none; } }

Propiedades válidas en las @Media queries:

El último documento de la W3c recoge qué propiedades y valores están permitidos utilizar en las media. Las propiedades por las que podemos discriminar son:

width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid

Una @media para cada necesidad

Iphone 4 retina display

En base al "pixel ratio" de este aparato lo podemos detectar y cargar su css específico. Créditos: Thomas Maier.

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="tu_ruta/iphone4.css" />
Tabletas y otros giratorios

Por la orientación (vertical o apaisada) también. Créditos: Cloudfour.

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Un remate final por chicuelinas y un ejemplo

Una realización de AlistApart muy veterana.

Las @media Queries de Css3 hace tiempo que caminan entre nosotros. Su uso está totalmente implantado y a diario seguro que visitas muchas webs que las utilizan. Sólo tienes que prestar un poco de atención y si eres de quienes aun las ignoran al hacer sus páginas, dale otra vuelta, que ya es hora

Ahora junta las @media Queries y el modelo de caja flexible (flexbox) de Css3 e imagina.

Adenda 1

Con posterioridad a la publicación de este artículo, David Walsh publica un post sobre la detección de la orientación donde recoge junto a la técnica de las @Media Queries otras:
"Cambio de orientación".

Adenda 2

Quizás te interese el artículo sobre @media queries para smartphones, animaciones en el cambio y otras cosillas relativas al tema.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso