Using @property for CSS Custom Properties

Chrome now supports the declaration of CSS custom properties using @property and provides more detailed information than strings. This article explores this feature in depth.

In the past, the declaration of CSS custom properties was as follows:

 html {
  --stop: 50%;
}

Now we can use @property to provide more details:

 @property --stop {
  syntax: "<percentage> ";
  initial-value: 50%;
  inherits: false;
}</percentage>

The browser now knows that this custom property is a percentage, not a string. Other useful types include<integer></integer> and<color></color> . By conveying information to the browser this way, we gain new capabilities, such as transitioning between two values.

However, in practical applications, it is important to note that the properties that need to be transitioned must be clearly specified (simple transition cannot be implemented). The following demonstration reproduces the examples from the Una Kravetz article:

Note that I'm animating the position of the color stop point (percentage), but I 've also tried to animate the color itself, but this still doesn't work. I originally thought this new feature could achieve this. People have long been confused about the inability to animate gradients. (See Ana Tudor's article.)

For browsers that do not support custom properties, we can redeclare properties at a higher level to provide support. This sounds a bit funny. Safari shows interest in this Houdini-based technology, but has not yet been supported. Firefox? The situation is unclear, and they marked it as "worthy of prototyping" before layoffs.

@property can also solve the strange fallback problem of CSS custom properties:

Like any other custom properties, you can get (using var ) or set (write/rewrite) values, but for Houdini custom properties, if you set a false value when overwriting, the CSS rendering engine will send the initial value (its fallback value) instead of ignoring the line.

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