css属性下的自定义值 - CSS

Question

我只是在youtube中播放一些视频，突然间我对检查YouTube的HTML结构感到好奇。我注意到一些很酷的事情。

大多数使用的HTML标签都不是标准标签，我对Angular有一些了解我们自己的HTML标签的知识。但我无法理解的是在CSS属性中传递一些自定义值。

喜欢这个：

background: var(--yt-dialog-background);

有没有人知道这些东西是如何工作的？我只是很想知道它，而且不只是背景。对于多个属性，我看到它下面有自定义值。我甚至试图更深入一些，比如在检查器中找到元素下的var(--yt-dialog-background)，但我找不到与var(--yt-dialog-background)对应的任何值

Answer 1

那些是CSS variables：

:root {
  --main-bg-color: green;
}

div {
  color: var(--main-bg-color);
}

<div>
  Some text
</div>

Answer 2

您所看到的是原生css variables. Browser support is actually pretty good，这就是为什么您会看到像YouTube这样的网站在制作中使用它们的原因。

基本用法如下所示：

:root {
    --main-color: red;
}

h1 {
    color: var(--main-color);
}

Answer 3

您所看到的不是自定义值，而是本机css变量。

• https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
• https://developer.mozilla.org/en-US/docs/Web/CSS/var

对现代浏览器的支持非常好：

https://caniuse.com/#search=css%20variable