Las reglas arroba son unas declaraciones del lenguaje CSS que permiten indicar comportamientos especiales en varios contextos. Con estas reglas se puede cambiar el diseño web en función de determinadas condiciones.
Este tipo de reglas se llaman así porque empiezan con el símbolo @ (arroba), al que le sigue una palabra clave o identificador; por ejemplo: @charset, @media o @import. En inglés, la arroba se pronuncia como «at», y es por esta razón que también se conocen como «at-rules» o «reglas-at».
Su sintaxis es la siguiente:
@identificador (reglas);
Después del identificador se introduce un valor, una condición o una serie de palabras clave, dependiendo del identificador. Al final, se termina con un punto y coma (;). Además, algunas reglas arroba se pueden anidar.
La mayoría de las reglas arroba pueden estar ubicadas en cualquier lugar del archivo CSS, pero existen algunas excepciones. Por ejemplo, la regla @charset debe aparecer antes que cualquier otra declaración en la hoja de estilos, mientras que @import debe ir al principio, pero detrás de @charset.
Tipos de reglas arroba
Hay dos tipos de reglas arroba: las reglas regulares, que se ubican directamente en la hoja de estilos (sin estar anidadas), y las reglas anidadas, que se colocan como declaraciones de otra regla de estilos CSS.
Reglas regulares
| Regla | Descripción |
|---|---|
@charset | Especifica la codificación de caracteres. |
@import | Incluye una hoja de estilos externa. |
@namespace | Define un espacio de nombres XML. |
Reglas anidadas
| Regla | Descripción |
|---|---|
@media | Aplica estilos dependiendo de la pantalla. |
@supports | Aplica estilos si es compatible con el navegador. |
@page | Define el diseño de las páginas impresas. |
@font-face | Configura una fuente tipográfica externa. |
@keyframes | Define los pasos de una secuencia de animación. |
@counter-style | Define estilos específicos para contadores. |
@property | Crea propiedades CSS personalizadas. |
@layer | Declara una capa en cascada y el orden. |
@font-feature-values | Define nombres para la propiedad CSS font-variant-alternates. |
@container | Define estilos condicionales para contenedores. |
La regla ‘@charset’
La regla @charset permite definir la codificación de caracteres que debe usar el navegador web. Puede ser útil cuando la hoja de estilos contiene caracteres que no son ASCII, por ejemplo como valor de la propiedad content.
Esta regla debe ser la primera que aparece en la hoja de estilos CSS, de modo que no tenga ni un espacio precedido. El valor debe ser una cadena de texto, con comillas dobles o simples, y debe corresponder con una de las codificaciones de caracteres compatibles establecidas en el registro IANA.
Vamos a ver algunos ejemplos en código CSS:
@charset "UTF-8";
@charset "ISO-8859-16";
La regla ‘@import’
La regla @import permite incluir una hoja de estilos externa, indicando una URL válida, que puede ser relativa o absoluta. Esta regla debe ir situada en la parte superior del archivo, pero siempre después de @charset.
Por ejemplo:
@import "personalizado.css";
Además, la regla @import admite como parámetros un listado de tipos de medios (media types) para especificar el tipo de dispositivo u otras características como la resolución de pantalla o el ancho del viewport del navegador web.
Por ejemplo:
@import "personalizado.css" screen, print;
La regla ‘@namespace’
La regla @namespace permite definir espacios de nombres XML. Esta regla es particularmente útil para aplicar estilos CSS a archivos XHTML, de modo que los elementos XHTML se puedan usar como selectores.
Un espacio de nombres XML puede ser usado para restringir los selectores universales (*), los selectores de elementos y los selectores de atributos. Así se selecciona solo elementos dentro del espacio de nombres indicado.
Esta regla solo es útil cuando se trabaja con documentos que pueden tener múltiples espacios de nombres XML, como sería el caso del HTML5 en combinación con SVG o MathML, o simplemente XML, que mezcla múltiples vocabularios.
Por ejemplo:
@namespace url('http://www.w3.org/1999/xhtml');
@namespace svg url('http://www.w3.org/2000/svg');
La regla ‘@media’
La regla @media es seguramente una de las más utilizadas en diseño web, ya que por medio de una serie de condiciones, se puede establecer estilos CSS para unas determinadas características, como puede ser el tipo de dispositivo, la resolución de pantalla o el ancho del viewport del navegador web.
Las condiciones que se indican mediante esta regla son conocidas como consultas de medios (media queries), que son un componente clave para el diseño web responsive. Pueden ser muy útiles para cambiar la disposición de los elementos HTML entre dispositivos móviles y pantallas más grandes.
Por ejemplo:
@media only screen and (max-width: 480px) { }
En este ejemplo, solo se aplicarán los estilos que se indiquen dentro de las llaves { y } cuando se cumpla la condición indicada: pantallas con un ancho máximo del viewport de 480 píxeles.
Existen tres tipos de medios: all, para todos los dispositivos; print, para los medios impresos; y screen, para pantallas de dispositivos electrónicos.
La regla ‘@supports’
La regla @supports permite aplicar estilos CSS en función de la compatibilidad que tengan los navegadores web de determinadas características CSS. Esta regla es útil para añadir estilos alternativos dependiendo de si el navegador web o el agente de usuario es compatible con una característica concreta.
Un ejemplo sería aplicar el sistema de diseño de cuadrículas (grid) solo en caso de que el navegador web sea compatible. En caso contrario, el desarrollador web habrá contemplado otros estilos fuera de esta regla.
@supports (display: grid) {
.container {
display: grid;
}
}
La regla ‘@page’
La regla @page permite definir estilos que se aplicarán a las páginas individuales al momento de imprimir el documento. Por tanto, esta regla forma parte del diseño de medios paginados. Se puede modificar las dimensiones de la página, la orientación y los márgenes con los descriptores size y margin.
También existe una serie de pseudoclases que permiten modificar los estilos CSS de ciertas páginas, como la primera, las de la derecha, las de la izquierda o las páginas en blanco. Se trata de las siguientes:
:first:left:right:blank
Un ejemplo práctico podría ser el de aplicar un margen de 3 cm a la primera página. Este es el código CSS que usaríamos en este caso:
@page :first {
margin: 3cm;
}
La regla ‘@font-face’
La regla @font-face también es ampliamente utilizada, ya que permite cargar y configurar una fuente tipográfica externa para usar y visualizar en una página web. Esta regla elimina la necesidad de depender de que las fuentes que se quiere usar estén instaladas en el dispositivo del usuario final.
Por ejemplo, cargamos la fuente tipográfica «Oswald»:
@font-face {
font-display: swap;
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
src: url('/oswald.eot');
src: url('/oswald.woff2') format('woff2'),
url('/oswald.woff') format('woff'),
url('/oswald.ttf') format('truetype'),
url('/oswald.svg#Oswald') format('svg');
}
La regla ‘@keyframes’
La regla @keyframes permite definir los fotogramas clave de una secuencia de animación CSS. Con esta regla se obtiene un control más específico sobre los pasos de una animación, es decir, que se puede definir fotogramas de principio, intermedios y de final de lo que se está animando. Luego, el navegador web generará el resto de fotogramas de forma automática.
Por ejemplo:
@keyframes identificador {
0% {
background-color: teal;
}
35% {
background-color: blue;
}
100% {
background-color: salmon;
}
}
Las marcas de principio, intermedias y de final se establecen mediante porcentajes. De forma opcional se puede usar las palabras clave from y to para indicar un desplazamiento inicial o final, respectivamente.
La regla ‘@counter-style’
La regla @counter-style permite modificar los símbolos predefinidos de los contadores, por lo que se consigue un nuevo grado de personalización. Además, permite añadir prefijos y sufijos. También ofrece herramientas para controlar la distribución de los símbolos y se puede definir un rango de valores.
Por ejemplo, vamos a crear un contador en el que se vaya alternando los símbolos # y &, de forma cíclica, usando el sufijo - .
@counter-style alternar {
system: cyclic;
symbols: '#' '&';
suffix: " - ";
}
.contador {
list-style: alternar;
}
Resultado:
- HTML
- CSS
- JS
- Python
La regla ‘@property’
La regla @property permite declarar un tipo de propiedad CSS personalizada. Con ella se puede establecer valores predeterminados, definir si puede heredar valores o no e indicar al navegador web el tipo de dato que espera.
El uso de esta regla es como si se estuviera creando una propiedad CSS real, con la capacidad de definir su nombre, su sintaxis, la forma de interacción con la cascada y su valor inicial. Ofrece la capacidad de comprobar el tipo de dato.
Vamos a crear una propiedad que espera un valor de tipo «color»:
@property --main-color {
syntax: "<color>";
inherits: false;
initial-value: #ff7f2a;
}
Esto permite que el navegador web identifique de forma correcta el tipo de valor que está tratando, en vez de asumir que todo es una cadena de texto. Su uso puede ser especialmente útil cuando se trabaja con variables CSS, ya que identificar el tipo de dato facilita cierto tipo de cálculos en diseño y animación.
La regla ‘@layer’
La regla @layer permite crear capas de cascada, que se pueden usar para agrupar código CSS de forma independiente y así tener un mayor control de la especificidad. Puede ser muy útil en proyectos grandes, con el fin de evitar conflictos.
La gran ventaja de agrupar código CSS en diferentes capas independizando la especificidad es que luego se pueden reordenar. Su funcionamiento es similar a las capas de los programas de diseño gráfico, ya que se apilan verticalmente.
Vamos a crear una capa para añadir código que aplique un reinicio de estilos, así eliminamos inconsistencia entre navegadores web:
@layer reset {
html, body, div {
direction: ltr;
margin: 0;
padding: 0;
}
}
La regla ‘@font-feature-values’
La regla @font-feature-values permite que los desarrolladores web asignen nombres para un determinado tipo de glifos alternativos que luego se podrán se utilizados en la propiedad CSS font-variant-alternates. Es una regla útil para personalizar la presentación de glifos específicos en fuentes tipográficas. Debe ser usada en la parte superior de la hoja de estilos.
Existe una serie de reglas arroba que solo se utilizan dentro de la regla @font-feature-values. Se trata de las siguientes.
| Regla | Descripción |
|---|---|
@swash | Define decoraciones artísticas. |
@annotation | Define formas notacionales de glifos. |
@ornaments | Define glifos con adornos. |
@stylistic | Define características de estilo alternativas. |
@styleset | Define un grupo de características de estilo alternativas. |
@character-variant | Define variaciones de caracteres. |
Vamos a ver un ejemplo:
@font-feature-values Barko Script {
@swash {
swishy: 1;
flowing: 2;
}
}
La regla ‘@container’
La regla @container permite aplicar estilos condicionales a ciertos elementos, dependiendo del tamaño u otras características de su elemento contenedor (padre). Por lo tanto, esta arregla arroba permite trabajar con consultas de contenedor, también conocidas como container queries, en inglés.
Esta regla funciona de forma muy similar a las consultas de medios (media queries) de la regla @media, pero en vez de depender del tamaño de la ventana del navegador (viewport) depende del tamaño del contenedor.
Se utiliza conjuntamente con las siguientes propiedades:
container-name(indica el nombre del contenedor)container-type(indica el nombre del contenedor)container(abreviatura de las dos anteriores)
Por ejemplo:
.contenedor {
container-name: ejemplo;
container-type: inline-size;
}
@container ejemplo (min-width: 500px) {
.card {
color: blue;
font-size: 1.25em;
text-transform: uppercase;
}
}
