@property

The @property at-rule, a new addition coming to Chrome (and potentially Safari and Firefox), allows for the declaration of CSS custom properties with enhanced control and capabilities. Currently, CSS lacks the ability to directly transition certain properties within gradients, a limitation @property aims to address.

A draft specification and an "intent to ship" document outline its functionality. The @property rule, declared outside selector blocks (similar to @media queries), registers a custom property's characteristics before its use. This registration specifies the property's syntax (e.g., <color></color>), initial-value, and inherits flag.

The JavaScript equivalent, CSS.registerProperty(), achieves the same registration under the Houdini initiative. The key advantage is enabling transitions on properties previously impossible to animate directly. For instance, smoothly transitioning the starting color of a linear gradient, previously requiring workarounds like pseudo-elements, becomes straightforward:

@property --gradient-start {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}

.el {
  --gradient-start: white;
  background: linear-gradient(var(--gradient-start), black);
  transition: --gradient-start 1s;
}

.el:hover {
  --gradient-start: red;
}</color>

This works because @property defines --gradient-start as a <color></color>, allowing CSS to handle its animation correctly. This contrasts with the current limitation of the attr() function, which returns string values instead of directly usable CSS types like <length></length>. While the exact release date remains unknown, Chrome's planned implementation and positive signals from other browsers suggest widespread adoption is likely.

The above is the detailed content of @property. For more information, please follow other related articles on the PHP Chinese website!