> Manuales > Tutorial de CSS básico

Qué es @media, una regla fundamental de CSS que te permite definir estilos CSS específicos para distintos medios en los que podría mostrarse la página web.

Regla @media de CSS

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;
   }
}
Nota: Aparte de la regla @media que estamos explicando existe una manera de especificar estilos definidos en archivos externos, que sólo se apliquen para determinados tipos de medios. Esto se hace con la directiva "media" que se aplica en la etiqueta LINK para enlazar con una hoja de estilos externa, en el atributo "media".
<link media="print" href="css_solo_para_impresion.css" rel="stylesheet" type="text/css">

Para más información, por favor, accede al artículo CSS para imprimir páginas web.

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.

Nota: Al escribir los tipos de medios es indiferente si lo hacemos con mayúsculas o minúsculas.

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.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual