It would be useful to be able to reference another property’s value similar to how currentColor
works for the color property.
While the following examples would be possible with custom properties (variables), authors of utility classes and third party libraries don’t always know what custom properties are available.
Example 1
Refer to the current background color to set a text color that has good contrast
.a11y-text {
color: color-contrast(
prop(background-color) vs white, black
);
}
Example 2
Refer to inherited margin values in order to swap them
.card-layout {
margin-inline-start: 1em;
margin-inline-end: auto;
}
.card-layout.reverse {
--prev-start: prop(margin-inline-start);
--prev-end: prop(margin-inline-end);
margin-inline-start: var(--prev-end);
margin-inline-end: var(--prev-start);
}