Day 84: the @property at-rule

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

The @property rule allows you to register custom properties.

You can already define custom properties, but the difference between defining and registering is that the at-rule allows you to specify the type and other attributes.

@property --hue {
  /* The type. */
  syntax: '<angle>';
  /* Is it an inhertiable property? */
  inherits: false;
  /* The initial value. */
  initial-value: 0deg;
}

syntax

The syntax descriptor specifies the syntax (or type) of the property. You can find a list of supported syntax component names in the spec.

@property --milliseconds {
  syntax: '<integer>';
  inherits: false;
}

inherits

The inherits descriptor specifies whether the property inherits from its parent or not.

@property --color-primary {
  syntax: '<color>';
  inherits: true;
}

initial-value

The initial-value descriptor specifies the initial value of the custom property.

@property --color-primary {
  syntax: '<color>';
  inherits: true;
  initial-value: rgb(0 0 0);
}

An example

Let's say we have a <button> and we want to transition the background color on :hover and :focus-visible.

button {
  --h: 176;
  --s: 74%;
  --l: 60%;
  
  --bg: hsl(var(--h) var(--s) var(--l));
  
  background-color: var(--bg);
  transition: background-color 1s;
}

button:is(:hover, :focus-visible) {
  --h: 20;
}

That works well, we get a nice transition from the first color to the second color, but if we want to animate just the hue to get a more interesting effect, we have bad luck, because the value of --h is a string, which you can't animate.

button {
  --h: 176;
  --s: 74%;
  --l: 60%;
  
  --bg: hsl(var(--h) var(--s) var(--l));
  
  background-color: var(--bg);
  transition: --h 1s;
}

With @property we can turn the string into number and animate it.

@property --h {
  initial-value: 0;
  inherits: true;
  syntax: '<number>';
}

button {
  --h: 176;
  --s: 74%;
  --l: 60%;
  
  --bg: hsl(var(--h) var(--s) var(--l));
  
  background-color: var(--bg);
  transition: --h 1.6s;
}

See on CodePen.