@property | Chris Coyier

Looks like CSS is getting extensibility built-in with a new @property element (works like @media – also looks like we're getting CSS.registerProperty() in JavaScript 🤔).

It'll work as below, and let you extend existing CSS functions with a similar syntax to CSS variables. Not 100% sure about how useful it will be, but it's always nice to see added flexibility and certainly the gradient animation use case provided in the example would have its purposes.

@property --my-property {
    syntax: '<color>';
    initial-value: green;
    inherits: false;
}

Explore Other Notes

Older ➡

Input attribute for one-time code

Just a neat tip: the autocomplete="one-time-code" attribute/value allows an HTML form to fetch a code used for two-factor authentication directly from the messaging app. Seems to only work for …

  • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>Looks like CSS is getting extensibility built-in with a new @property element (works like @media – also looks like we're getting CSS.registerProperty() in JavaScript …</p> </body> </html>
  • Murray Adcock.
Journal permalink