API de propiedades y valores CSS (@property)
Registre propiedades personalizadas con tipos y herencia mediante @property para crear variables CSS animables.
API de propiedades y valores CSS (@property) es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué es <code>@property</code>?
@property es la forma de CSS de registrar una propiedad personalizada con un tipo, un comportamiento de herencia y un valor inicial. Es la forma declarativa de CSS Properties and Values API (CSS.registerProperty).
Sintaxis de <code>@property</code>
Registre una propiedad personalizada con tres descriptores obligatorios:
<div class="box"></div>
Descriptor de syntax
El descriptor syntax define el tipo de la propiedad mediante nombres de tipos de CSS:
"<number>","<integer>","<percentage>""<angle>","<color>","<length>""<image>","<transform-list>""*": acepta cualquier valor (como una propiedad no registrada)
Descriptor de inherits
Controla si la propiedad se hereda a través del DOM. Establezca false para las propiedades que deban estar aisladas en cada elemento.
Descriptor de initial-value
Proporciona un valor inicial garantizado cuando no se establece la propiedad. Esto hace que la propiedad sea animable.
Animar propiedades personalizadas
La principal ventaja de @property: las propiedades personalizadas registradas se pueden interpolar y animar porque el navegador conoce su tipo y puede interpolar entre sus valores:
<div class="element is-hovered"></div>
Sin <code>@property</code>
Sin registro, CSS no conoce los tipos de las propiedades personalizadas. Las transiciones entre dos valores de variable saltan de uno a otro en lugar de interpolarse, ya que el navegador no puede calcular el punto medio de un tipo desconocido.
<code>@property</code> para animar degradados
Animación de los puntos de un degradado (antes imposible sin @property):
<div class="loader loading"></div>
Equivalente en JavaScript
También puede registrar propiedades mediante la API de JavaScript:
<div id="box"></div>
<script>
// JavaScript equivalent of @property
CSS.registerProperty({
name: '--rotation',
syntax: '<angle>',
inherits: false,
initialValue: '0deg'
});
document.getElementById('box').style.setProperty('--rotation', '45deg');
</script>
Compatibilidad de los navegadores
@property es compatible con Chrome 85+, Edge 85+, Safari 16.4+ y Firefox 128+. Está ampliamente disponible en los navegadores modernos.
Usos prácticos de <code>@property</code>
Casos de uso habituales:
- Animar las posiciones y los colores de los degradados
- Animar el tono y la saturación en colores HSL
- Animar el relleno de barras de progreso
- Animar contadores para revelar números
- Crear transiciones suaves entre los modos oscuro y claro mediante la animación de tokens de color
Comprobación rápida
¿Por qué es necesario @property para animar propiedades personalizadas de CSS?
Resumen
@property registra propiedades personalizadas con un tipo syntax, un indicador inherits y un initial-value. Las propiedades registradas se pueden animar y aplicar en transiciones porque el navegador puede interpolar sus valores tipados. Esto permite crear animaciones de degradados, transiciones de tono y animaciones de contadores que son imposibles con propiedades personalizadas no registradas.
Preguntas frecuentes
¿La lección «API de propiedades y valores CSS (@property)» es gratis?
Sí — el texto completo de «API de propiedades y valores CSS (@property)» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «API de propiedades y valores CSS (@property)»?
Registre propiedades personalizadas con tipos y herencia mediante @property para crear variables CSS animables. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «API de propiedades y valores CSS (@property)»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El modelo de objetos tipado de CSS (OM)
- API de propiedades y valores CSS (@property)
- API CSS Paint: worklets
- API CSS Layout y su alcance