커스텀 속성 뇌 트위스터-CSS 튜토리얼-php.cn

커스텀 속성 뇌 트위스터

尊渡假赌尊渡假赌尊渡假赌

풀어 주다： 2025-03-22 09:33:25

원래의

212명이 탐색했습니다.

Custom Property Brain Twisters

I am part of that 82% that got it wrong in Lea’s quiz (tweet version).

Here’s the code:

:root {
  --accent-color: skyblue;
}

div {
  --accent-color: revert; 
  background: var(--accent-color, orange);
}

로그인 후 복사

So what background do I expect

to have?

My brain goes like this:

Well, --accent-color is declared, so it’s definitely not orange (the fallback).
The value for the background is revert, so it’s essentially background: revert;
The background property doesn’t inherit though, and even if you force it to, it would inherit from the , not the root.
So… transparent.

Nope.

Lea:

[Because the value is revert it] cancels out any author styles, and resets back to whatever value the property would have from the user stylesheet and UA stylesheet. Assuming there is no--accent-colordeclaration in the user stylesheet, and of course UA stylesheets don’t set custom properties, then that means the property doesn’t have a value.

Since custom properties are inherited properties (unless they areregisteredwithinherits:false, but this one is not), this means the inherited value trickles in, which is — you guessed it —skyblue.

Stephen posted a similar quiz the other day:

Again, my brain does it totally wrong. It goes:

OK, well, --color is declared, so it’s not blue (the fallback).
It’s not red because the second declaration will override that one.
So, it’s essentially like p { color: inherit; }.
The
will inherit yellow from the , which it would have done naturally anyway, but whatever, it’s still yellow.

Nope.

Apparently inherit there is actually inheriting from the next place up the tree that sets it, which html does, so green. That actually is how normal inheriting works. It’s just a brain twister because it’s easy to conflate color the property with --color the custom property.

It also might be useful to know that when you actually declare a custom property with @property you can say whether you want it to inherit or not. So that would change the game with these brain twisters!

@property --property-name {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

로그인 후 복사

위 내용은 커스텀 속성 뇌 트위스터의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!