Uso avanzado de CSS con reglas “arroba”

Más allá de las funciones que uno generalmente usa en las hojas de estilo CSS (como los selectores) existen reglas menos comunes, como las “reglas @” (at-rules, en inglés). Este tipo de reglas tienen usos muy diversos y algunas son específicas de ciertos navegadores.

Las reglas @ comienzan siempre con el símbolo de la arroba y luego su nombre clave. Dependiendo de cual se trate podrá necesitar un único argumento (la regla “import“ por ejemplo) o un bloque de código (la regla “media“). Veamos bien cuáles son.

Regla @import

Agrega los estilos CSS de otra hoja en la que lo usa.

Ejemplo:
@import url(addonstyles.css);

Regla @media

Aplica las reglas que contiene al tipo de medio específico que indica (para impresiones, uso normal por pantalla, para proyectores, etc.).

Por ejemplo:

@media print {
body {
font-size: 10pt;
font-family: times new roman, times, serif;
}

#navigation {
display: none;
}
}

Los tipos de media que se pueden utilizar son:

• all - Se aplica a todos los tipos.
• aural - Para sintetizadores de voz.
• handheld - Para dispositivos de mano (Palm, iPhone, etc).
• print - Para impresoras.
• projection - Para proyectores.
• screen - Para pantallas de computadora.

Nota: Internet Explorer sólo soporta los tres primeros.

Regla @charset

Ajusta el tipo de codificación de caracteres basándose en los que utiliza otra hoja de estilo.

Por ejemplo:

@charset "ISO-8859-1";

Regla @font-face

Se utiliza para realizar una descripción detallada de una fuente y puede utilizarse también para embeber una tipografía en tu sitio. Sin embargo este último uso sólo es soportado por IE y hay mucha controversia con el tema de los derechos de propiedad al distribuir las fuentes. No es recomendable experimentar con esto si no sabemos bien lo que estamos haciendo.

@font-face {
font-family: somerandomfontname;
src: url(somefont.eot);
font-weight: bold;
}

p {
font-family: somerandomfontname;
font-weight: bold;
}

Regla @page

Es utilizada para configuraciones avanzadas a la hora de imprimir un sitio, permite por ejemplo determinar el tamaño con el que se imprimirá o con qué margen.

Por ejemplo:

@page {
size: 15cm 20cm;
margin: 3cm;
marks: cross;
}

Espero haberlos podido acercar un poco más al conocimiento de estas, muchas veces desconocidas, reglas “arroba” de CSS.

Fuente: HtmlDog