Tipos de datos en CSS

¿Cómo definir tipos de datos en CSS?


Aunque no es algo que se conozca en general, CSS tiene sus propios tipos de datos, como un lenguaje de programación. Tenemos valores que pueden ser unidades de longitud (px, rem...), valores que pueden ser colores (hexadecimal, rgb, oklch, ...), valores que pueden ser unidades de tiempo (seg, ms...), etc.

Normalmente, no hacemos referencia a estos tipos de datos en nuestro código CSS, sino que simplemente dejamos que el navegador asuma el tipo que tienen. Sin embargo, en algunas situaciones puede ser interesante definirlos explícitamente.

¿Qué tipos hay en CSS?

Los tipos de datos en CSS se suelen denominar syntax (sintaxis) y deben colocarse entre signos angulares < y > (como si fuera una etiqueta HTML). Aquí tienes una tabla con los tipos de datos que existen:

SintaxisDescripciónEjemplos
<angle>Permite indicar ángulos: unidades como deg o turn, entre otras.45deg, 0.5turn
<color>Indica colores CSS en formato hexadecimal, rgb() u otros.#485432, #888
<custom-ident>Identificadores personalizados (similar a un string, pero más limitado)"nombre"
<image>Incluye el tipo <url> o valores de gradientes CSS.linear-gradient(...)...
<integer>Indica valores numéricos enteros, ya sean positivos o negativos.42, 10
<length>Distancia/tamaño en una unidad CSS absoluta, relativa o de viewport.10px, 2rem, 90vw...
<length-percentage>Permite tanto valores <length> como <percentage>.10px, 3rem, 60%
<number>Permite tanto valores <integer>, como valores decimales.4, 4.6
<percentage>Única y exclusivamente valores de porcentajes.70%
<resolution>Indica valores de resolución, útiles en MQ, como dpi, dppx u otros.96dpi, 300dpi
<string>Secuencia de carácteres delimitado por comillas simples o dobles."«nombre»"
<time>Valores de tiempo, como por ejemplo, s o ms.5s, 500ms
<url>Indica una URL mediante la función url() de CSS.url(image.png)
<transform-function>Funciones de transformación.scale(1.2) o rotate(5deg)...
<transform-list>Lista de varias funciones de transformación de las anteriores.scale(2) translate(50px)...

Por defecto, las propiedades CSS conocen los tipos de datos que soportan y no suele ser necesario indicarlas. Sin embargo, en determinadas situaciones como cuando utilizamos variables CSS, el navegador no sabe para que quieres utilizar dicha variable de CSS y podría ser interesante tiparla con la regla @property, para que sea más predecible y active ciertas funcionalidades que de no tiparlas no estarían disponibles.

El valor any

Por defecto, las variables CSS que definimos en nuestro código funcionan como lo hace Typescript cuando indicamos el valor any. Dicho de otra forma: aceptan cualquier tipo de dato. Si queremos definir explícitamente este comportamiento podemos utilizar el asterisco:

@property --size {
  syntax: "*";
  inherits: false;
  initial-value: small;
}

Sin embargo, la idea de @property es justamente restringir el tipo de dato, no dejarlo abierto a cualquiera, que ya es el comportamiento por defecto.

Múltiples tipos

También podemos hacer cosas un poco más avanzadas. En lugar de establecer un tipo de dato en la propiedad syntax, podemos establecer un tipo de dato múltiple separándolo por el signo pipe |.

Esto nos permitirá establecer más de un tipo de dato en la misma variable CSS:

@property --size {
  syntax: "small | large";
  inherits: false;
  initial-value: small;
}

En este caso, hemos indicado que la sintaxis de la variable CSS --size puede ser tanto el valor de texto small como large. Además, observa que no hemos indicado un tipo de dato genérico, sino un dato muy concreto. También podríamos utilizar cosas como <integer> | <length> si quisieramos permitir tanto números enteros como tamaños o longitudes con unidades.

Valores múltiples

Añadiendo ciertos carácteres al final del tipo de dato podemos permitir múltiples valores, como ocurre por ejemplo en propiedades como background-image cuando queremos añadir varias imágenes o gradientes. Para ello, al final de nuestra sintaxis utilizamos un caracter especial:

  • Si añadimos el carácter #, nos permite valores separados por coma.
  • Si añadimos el carácter +, nos permite valores separados por espacio.
@property --gradient {
  syntax: "<image>#";
  inherits: false;
  initial-value:
    linear-gradient(to right, black, transparent),
    linear-gradient(to bottom, transparent, indigo);
}

@property --size-list {
  syntax: "<length>+";
  inherits: false;
  initial-value: 10px 0px 10px 0;
}

Si quieres más información sobre definir tipos de datos personalizados, echa un vistazo al artículo donde hablamos de la regla @property.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev