(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