24

En CSS podemos definir estilos para id's con la almohadilla (#) y para clases con el punto (.), pero hay algunas reglas que van precedidas por la arroba (@) como por ejemplo:

@font-face {
    /* definición de fuente propia */
}

@media print {
    /* estilos a la hora de imprimir */
}

@keyframes miAnimacion {
    /* definición de pasos para una animación */
}

¿Qué significa la @ antes de la regla? ¿Cuántas hay y para qué se usan? ¿Qué tienen de especial?

Alvaro Montoro
  • 48,157
  • 26
  • 100
  • 179

1 Answers1

34

Reglas de @

(Reglas-At o at-rules)

Son declaraciones CSS que encapsulan un grupo de reglas, pero no están directamente relacionadas a elementos HTML/XML. Controlan la forma en que se aplican los estilos extendiendo la capacidad de CSS y cada una tiene su propia sintaxis.

Reglas generales

Se aplican a todo el CSS

  • @charset Define el conjunto de caracteres usado en el CSS.
  • @import Permite incluir otro CSS.
  • @namespace Establece el XML a ser usado.

Reglas anidadas

Pueden estar como declaración de estilo o como condicionales.

  • @media Establece reglas condicionales de acuerdo a las características del dispositivos de salida (tamaño de pantalla, tipo de impresora, dispositivos braille, etc.)
  • @supports Establece reglas condicionales según el navegador utilizado.
  • @document Restringe las reglas contenidas según la URL.
  • @page Restringe las reglas contenidas para cuando se quiere imprimir (en impresora) el documento.
  • @font-face Incluye fuentes (tipográficas) externas.
  • @keyframes Controla los pasos intermedios en una secuencia de animación.
  • @viewport Restringe las reglas según el tamaño y orientación de la ventana, especialmente útiles en celulares.
  • @counter-style Define estilos de contador específicos.
  • @font-feature-values, @swash, @ornaments, @annotation, @stylistic, @styleset y @character-variant Define nombres comunes para la propiedad font-variant-alternates.

Ejemplos

1. Definir el conjunto de caracteres UTF-8

Debe ser el primer elemento en el CSS, y no puede estar precedido por ningún otro caracter.

@charset "UTF-8";

2. Definir reglas diferentes según el documento que lo cargue

Con @document podemos definir, dentro del mismo CSS, una imagen de fondo para la página principal y otra para las que comienzan con "foro".

@document url(http://dominio.com/index.html) {
    body {
        background-image: url("ppal.jpeg");
    }
}

@document url-prefix(http://dominio.com/foro) {
    body {
        background-image: url("msj.jpeg");
    }
}

3. Usar una fuente de Google Fonts

En este ejemplo se referencia a la fuente Source Sans Pro.

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlNV_2ngZ8dMf8fLgjYEouxg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

y luego se puede usar en el CSS como:

div, p {
  font-family: 'Source Sans Pro', 'Otra Fuente', 'etc';
}

4. Incluir otro CSS cuando el dispositivo está en modo apaisado

En el siguiente, se incluye el CSS externo ruta_de_otro.css.

@import url('ruta_de_otro.css') screen and (orientation:landscape);

5. Definir 2 conjuntos de propiedades según compatibilidad

De esta forma se definen 2 grupos, de acuerdo a si el navegador soporta propiedades flex o no.

@supports (display: flex) {
    div { display: flex; }
}

@supports not (display: flex) {
    div { display: none; }
}

6. Usar un @media query para diferenciar entre dispositivos

Comunidad
  • 1
Mariano
  • 23,777
  • 20
  • 70
  • 102