La regla @media está disponible en CSS desde especificaciones tempranas del lenguaje. Al principio servía básicamente para definr estilos CSS distintos para medios como la TV, la impresión o dispositivos que podrías sujetar con la mano. Más adelante en CSS 3 ampliaron su uso para una de las técnicas básicas del Responsive Web Design como las mediaqueries. En este artículo nos vamos a centrar en los primeros usos para los que nació @media.

Qué son los medios que nos permite alcanzar @media

Una página web se puede mostrar en diferentes dispositivos. Esto es algo que ya conocemos y que, a medida que pasan los años y avanzan las tecnologías, se hace cada vez más patente. Por tanto, podemos dejar de pensar que nuestra web se va a acceder simplemente desde un ordenador y para ayudarnos a que se vea bien en cualquier dispositivo, podemos definir estilos distintos para cada tipo de medio con la regla @media.

Incluso en el hipotético caso que descartéis que vuestra web pueda tener usuarios venidos de teléfonos móviles o televisiones (por poner un par de ejemplos), puede que necesitéis especificar estilos específicos para cuando la página web se está imprimiendo en papel. Todo ello son tipos de medios distintos, que podemos gestionar desde la llegada de CSS 2.

Sintaxis y usos de la regla @media de CSS 2

La regla @media permite especificar estilos para distintos tipos de medios en la misma hoja de estilos. En ella podemos informar sobre los tipos de medio sobre los que queremos definir estilos CSS. Por ejemplo, podríamos escribir estilos para tipos de medios como la impresión o estilos para el medio pantalla del ordenador.

Para definir un estilo para un tipo de medio, o medios, específicos podemos escribir la regla @media seguida de los tipos de medios sobre los que queremos aplicar los estilos, separados por comas.

Así definiríamos estilos que funcionarían sólo en la impresión en papel:

@media print {
   table{
      width: 90%;
      border: 2px solid #ff000;
   }
   .miclase{
      display: none;
   }
}

Como decíamos, podemos indicar estilos CSS para varios medios a la vez:

@media tv, handheld {
   body{
      font-size: 0.5 em;
   }
}

Además, si lo deseamos, podemos especificar estilos para todos los medios, con el tipo de medio "all".

@media all {
   div.imprimir {
      display: hidden;
   }
}

<link media="print" href="css_solo_para_impresion.css" rel="stylesheet" type="text/css">

Tipos de medios en CSS 2

Ahora podemos ver un listado de los tipos de medios que se definen en las especificaciones del lenguaje CSS 2.

• All: Cualquier tipo de medio.
• Braille: medio relacionado con dispositivos táctiles braile.
• Embossed: Para impresoras braile.
• Handheld: para dispositivos de bolsillo o de mano que normalmente tienen una pantalla pequeña.
• Print: medio específico para cuando se imprimen documentos en la impresora. Desde la vista previa para imprimir que tienen los navegadores, generalmente en el menú de Archivo, también podemos ver el resultado de la página para impresión que utiliza los estilos CSS del tipo de media "print".
• Projection: tipo de medio que se aplica para las presentaciones que se muestran con proyector.
• Screen: medio que se utiliza para pantallas grandes, generalmente las pantallas de los ordenadores personales.
• Speech: medio para sintetizadores de voz.
• Tty: tipo de medio que se utiliza en dispositivos que tienen un tamaño fijo de carácter, como un teletipo, terminal, consola de comandos etc. En este tipo de media no se puede usar la unidad de medida de píxeles (px) porque todo lo que se puede mostrar es a nivel de carácter.
• Tv: para cuando se accede a una web desde un dispositivo de televisión.

Estos tipos de medios son los que eran válidos con las especificaciones de CSS 2. Es obvio que con el paso del tiempo se crearán otros tipos de medios que se irán incorporando al lenguaje. Si se utiliza un tipo de medio que no existe o que no es reconocido, el sistema simplemente lo ignora. Por ejemplo:

@media tv, nevera{
   p{
      background-color: #ccc;
   }
}

Esta declaración de estilos sólo se aplica en las televisiones y en los monitores acoplados en las neveras de la cocina. Como en estos momentos no existe el tipo de medio "nevera", pues simplemente se ignora y en la práctica ese estilo sólo servirá para cuando se muestre la página en un televisor.

Por dónde continuar con @media

Lo que hemos explicado sobre @media es lo más básico, que te permitirá entender la regla. Sin embargo, a partir de ahora te toca explorar otros usos más prácticos de esta utilidad de las CSS.

Para continuar tu aprendizaje te recomendamos ahora aprender sobre las mediaqueries y otros asuntos muy útiles como la posibilidad de definir estilos distintos para la impresión de las páginas con la impresora.