CSS: Reglas arroba

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.

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 consultas de medios (media queries) 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 adaptativo (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 propiedades CSS. Por tanto, 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, la orientación y los márgenes de cada página, utilizando una serie de pseudoclases

Pseudoclases que se usan con @page:

  • :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 necesitaríamos:

@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 los ordenadores de los visitantes.

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 pasos intermedios de una secuencia de animación CSS. Con esta regla se obtiene un control más específico sobre los pasos intermedios de animación, en vez de dejar que el navegador web los gestione de forma automática: es decir, que se puede establecer marcas de principio, intermedias y de final de lo que se está animando.

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 crear contadores con estilos personalizados, evitando usar los estilos predefinidos. Por lo tanto, esta regla arroba pretende añadir un nuevo grado de personalización de contadores. Simplemente, permite indicar los símbolos que se quiere utilizar al momento de crearlos.

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 una capa de cascada, que se puede usar para definir el orden de precedencia de los selectores en situaciones donde hay múltiples capas en cascada. Esto ofrece un mayor control de la especificidad.

Las capas funcionan de una forma muy similar a la que se puede encontrar en cualquier herramienta de diseño gráfico, que se apilan verticalmente. Con esta regla se puede agrupar código CSS dentro de una capa en concreto.

Todos los estilos que no están en una capa se colocan en una única capa anónima que viene después de todas las capas declaradas mediante la regla @layer. Por tanto, si se declara un estilo fuera de una capa anulará los estilos declarados en una capa, independientemente de su especificidad.

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;
  }
}

En este caso, nos interesa que la capa reset sea la primera de evaluarse. A la larga, puede darse la situación de tener varias capas y que tengamos la necesidad de modificar su orden para evitar problemas de especificidad.

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;
  }
}
← Artículo anterior
Artículo siguiente →