27

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?

1 respuesta 1

36

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

1
  • 3
    creo que te ganaste la camiseta.. jaja Commented el 31 jul. 2016 a las 14:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.