@property
La regla @property te permite definir explícitamente tus variables CSS (Propiedades Personalizadas).
Por defecto, cuando creas una variable CSS como --mi-color: blue;, el navegador la trata como una simple cadena de texto. No sabe que es un color, un número o una medida.
@property te permite "registrar" esa variable y decirle al navegador:
- De qué tipo es (un color, un número, una longitud, etc.).
- Si debe heredarse o no.
- Cuál es su valor inicial (un fallback).
Antes de @property, no podías animar un gradiente de fondo, porque el navegador no sabía cómo "interpolar" (hacer una transición suave) de linear-gradient(red, blue) a linear-gradient(green, yellow).
Ahora, puedes animar las variables de color dentro de ese gradiente, y el navegador sí sabe cómo hacer una transición de un color a otro.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale-1.0">
<title>Ejemplo de @property</title>
<link rel="stylesheet" href="1.property.css">
</head>
<body>
<h1>Ejemplo <code>@property</code></h1>
<p>Pasa el ratón sobre el botón para ver la transición del gradiente.</p>
<button class="mi-boton">
Pasa el ratón
</button>
</body>
</html>Sin @property: El gradiente cambiaría de golpe, porque el navegador no puede animar la propiedad background.