text reglas @ CSS

Posted 2021-05-02

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

Según dimensiones: descripto en CSS: ¿Qué son los media queries, para qué sirven, cómo se agrupan y cómo implementarlos?.
Según navegador: descripto en browser strangeness.