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

[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: #1962

Font metrics relative to parent

• [css-fonts-4] Percentages in font-weight for relative weights #2690
• [css-fonts] font-weight: bolder and lighter are counter-intuitive #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

#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

#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 😁 )
• [css-values-5] inherit() function: like var() for parent value, for any property #2864 (comment)
• [css-values-5] inherit() function: like var() for parent value, for any property #2864 (comment)
• [css-values-5] inherit() function: like var() for parent value, for any property #2864 (comment)
• [css-values-5] inherit() function: like var() for parent value, for any property #2864 (comment)