LeaVerou · GitHub

[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

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
Screen Shot 2022-09-07 at 9 15 06 AM Screen Shot 2022-09-07 at 9 15 11 AM 
.child {
	padding: 1em;
	border-radius: calc(inherit(border-radius) - 1em);
}

Swapping foreground and background colors

.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)

.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

Read the original on github.com ↗