[css-values-5] inherit() function: like var() for parent value, for any property

[Edit: We've now defined 'inherit()', but only for custom properties. The issue is left open to track the fuller feature.]

---

We've declined numerous author requests to extend var() to arbitrary properties, due to the potential for cycles and how expensive cycle detection would be in the general case. However, providing a way to get the parent or inherited value of any property does not cause cycles and still helps with a ton of use cases.

Use cases

Custom property value that depends on parent value

Generic --depth (1, 2)

* {
	--depth: calc(inherit(--depth, 0) + 1);
}

See also: https://github.com/w3c/csswg-drafts/issues/1962

Font metrics relative to parent

• #2690
• #2764

strong {
	font-weight: clamp(600, 1.2 * inherit(font-weight), 999);
}

And any other numerical typographic metric that can be specified in CSS, e.g. font-stretch, font-style (for variable fonts) etc

Many of the currentBackgroundColor use cases

https://github.com/w3c/csswg-drafts/issues/5292

While this does not address all use cases (since it would only provide an ancestor background color), it does address quite a few, and offers a workaround for others.

Matching nested radii

https://github.com/w3c/csswg-drafts/issues/7707

inherit	inherit() + calc

.child {
	padding: 1em;
	border-radius: calc(inherit(border-radius) - 1em);
}

Swapping foreground and background colors

• https://twitter.com/Paceaux/status/1350518907539513346
• https://twitter.com/FremyCompany/status/1350499409168117761
• https://twitter.com/snapeuh/status/1350492392550526979
• https://twitter.com/teacherbuknoy/status/1377094545498775555

.button {
	color: inherit(background-color);
	background: inherit(color);
}

Decorations visually extending the background

https://twitter.com/HugoGiraudel/status/1350496044681990147

blockquote::before {
	content: "❝";
	color: inherit(background-color);
	font-size: 300%;
}

Override parent margins (bleed)

• https://twitter.com/stephband/status/135054701479108198
• https://twitter.com/MartijnSaly/status/1350496008594202625
• https://twitter.com/stephband/status/1377068306553782274

.card > header {
	margin-top: calc(-1 * inherit(padding-top));
	margin-left: calc(-1 * inherit(padding-left));
	margin-right: calc(-1 * inherit(padding-right));
}

Inherit grandparent value

https://twitter.com/cjw0/status/1350499207648583683

.foo {
	--font-size: inherit(font-size);
	font-size: 0; /* for animation */
}

.foo > * {
	font-size: var(--font-size);
}

@property does provide a workaround for this particular case (just register a <length> custom property and set it on .foo’s parent), but not in the general case where no suitable registration synstax exists.

More use cases

• A few more as answers to my tweet (I've come across many, many use cases over the years, but my memory deals poorly with random access, so I shamelessly resorted to lazyweb 😁 )
• https://github.com/w3c/csswg-drafts/issues/2864#issuecomment-810428789
• https://github.com/w3c/csswg-drafts/issues/2864#issuecomment-810759857
• https://github.com/w3c/csswg-drafts/issues/2864#issuecomment-810713002
• https://github.com/w3c/csswg-drafts/issues/2864#issuecomment-810718322

Start with the issue text, its linked use cases, and the referenced comment thread; no implementation files or tests are named. The issue records that inherit() is defined only for custom properties, so done would require an agreed specification for the broader arbitrary-property feature rather than a localized code change.