Unidad 9. Avanzado: Reglas de arroba @. Media Queries

Reglas de arroba. Media Queries

Las reglas CSS llamadas reglas de arroba que empiezan por el carácter arroba @ y las más usadas son las siguientes:

1- Reglas @charset.

a continuación un identificador, sin un espacio en blanco entre ellos, una instrucción y punto y coma para cerrarla. Por ejemplo: @charset "utf-8"; que indica el tipo de codificación de la hoja de estilo cuando esta se encuentra en un archivo separado, debe ser la primera línea de la hoja de estilo.

2- Reglas @import.

Otra regla de este tipo es @import archivo.css; para importar una hoja de estilo en otra hoja de estilo, debe ir al principio de la hoja de estilo, detrás de @charset.

3- Reglas @media.

Hay otras reglas de arroba que pueden ir en cualquier parte de la hoja de estilo, como las conocidas como "Media Queries", @media, que vamos a ver a continuación con más detalle.

Las reglas-arroba empiezan por el símbolo de arroba (@) pegado a un identificador y terminan por un punto y coma (;):

Algunas reglas-arroba (@charset, @import o @namespace) deben aparecer al principio de la hoja de estilo, pero el resto (@font-face, @media, etc.) pueden escribirse en cualquier lugar de la hoja de estilo.

Media Queries

Las reglas de arroba Media Queries se introdujeron en CSS3 y son cada vez más utilizadas en el diseño web, sobre todo en los diseños adaptativos, ya que permiten adaptar los diseños a múltiples dispositivos y características.

Las Media Queries permiten conocer el medio (pantalla, impresora, ...) y sus características (anchura, orientación,...) para establecer condiciones que permiten ejecutar diferentes acciones según cada caso. Por ejemplo, si detectamos que estamos en una pantalla pequeña podemos cambiar el tamaño de la fuente en la hoja de estilo.

Una Media Query es una condición que se evalúa a verdadero o falso. Si es cierto se ejecuta la acción, si es falso no se ejecuta; no se puede codificar una condición "sino" (else), en su lugar se puede especificar otra Media Query con la condición complementaria.

Con una Media Query podemos detectar el medio utilizando las palabras reservadas siguientes:

- screen, pantalla de visualización de un dispositivo, usualmente pantallas de ordenadores, tablet, teléfonos móviles, smart TV, ...

- print, para impresoras

- speech, para sintetizadores de voz

- all, para todos los medios, es el valor por defecto.

Con una Media Query también podemos detectar características, las más usuales son las siguientes:

- width, anchura

- height, altura

- orientation, normalmente se refiere a la posición de la pantalla en dispositivos móviles, y puede tomar el valor portrait (vertical) o el valor landscape (horizontal)

- resolution, resolución de la pantalla, normalmente en dpi (puntos por pulgada), y en algunos navegadores en pixel ratio.

- aspect-ratio:

Podemos aplicar una condición de medio, una condición de característica o una combinación de ambos. Por ejemplo:

@media print { color:black } ; si se trata de una impresora aplicar el color negro.

@media (max-width: 640px) { font-size: 16px } ; si se trata de un dispositivo con un ancho menor o igual de 640px, aplicar un tamaño de fuente de 16 px.

@media screen and (max-width: 640px) { font-size: 16px } ; si se trata de una pantalla con un ancho menor o igual de 640px, aplicar un tamaño de fuente de 16 px.

Se pueden combinar características y medios mediante los operadores and, or y not; como en cualquier expresión lógica.

@media (min-width:640px) and (max-width: 1024px) { font-size: 16px } ; si se trata de un dispositivo con un ancho mayor o igual de 640px y menor o igual de 1024px con un ancho menor o igual de 640px, aplicar un tamaño de fuente de 16 px.

También se pueden combinar Media Queries separadas por comas, en ese caso todas deben evaluarse a cierto para que se aplique la acción.

Se pueden utilizar los prefijos min- y max- en las características width y height. min- equivale al operador “>=” y max- equivale al operador “<=”.

Por ejemplo, (min-width: 400px) es equivalente a ''(width >= 400px)'', es decir, "una anchura de, como mínimo, 400px". Los operadores <, >, >=, <= también se pueden usar, aunque a fecha de hoy (enero 2019) todavía no son reconocidos por la mayoría de los navegadores.

Las Media Queries se suelen aplicar a las hojas de estilo, pero también se pueden aplicar a otros elementos como enlaces. Por ejemplo:

<link rel="stylesheet" type="text/css" media="screen" href="estilo_pantalla.css"> 
<link rel="stylesheet" type="text/css" media="print" href="estilo_impresora.css">

Es decir, si se trata de una pantalla se aplicará la hoja de estilo "estilo_pantalla.css" y no se aplicará la hoja de estilo "estilo_impresora.css"; y si se trata de una impresora no se aplicará la hoja de estilo "estilo_pantalla.css" y se aplicará la hoja de estilo "estilo_impresora.css".