This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
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;
}My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2023-01-19T09:38:54+00:00) Day 84: the @property at-rule. Retrieved from https://www.scien.cx/2023/01/19/day-84-the-property-at-rule/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.