css - CSS 自定义属性在链接的 CSS 文档中是全局的吗？

Question

我正在尝试使用 CSS3 自定义属性（又名 CSS 变量）取得很大成功。我说的是--black: #000;和background: var(--black);类型变量。但是，当变量在单独的链接文档中声明时，我没有运气。

由于 CSS 自定义属性的浏览器兼容性超过 72%（来源：https ://caniuse.com/#search=css%20variables ），我很想在我知道我的受众正在使用的非常具体的应用程序中开始使用它们兼容的浏览器。

我想知道这些 CSS 自定义属性是否在所有链接的 CSS 文档的范围内都是全局的，或者它们是否只是:root每个文档的全局（在元素处）？

我无法找到答案（即使在规范中）！

我读到的一些研究：

我的具体问题发生在 Ruby on Rails 应用程序中，我将 CSS 自定义属性包含在<style>SCSS 样式表之前的块中，包括在部署时将被预编译。如果我在 SCSS 的顶部包含变量，一切正常。然而，该<style>块包含主题变量，需要在运行时由 ERB 编译。

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      :root {
        --primary-color: #000;
      }
    </style>
    <%= stylesheet_link_tag 'application', media: 'all' %>
  </head>
</html>

score 40 · Accepted Answer

在MDN中：

自定义属性参与级联：每个都可以出现多次，变量的值将与级联算法决定的自定义属性中定义的值相匹配。

它就像任何其他 CSS 属性一样工作。它应该在目标元素的祖先中声明。所以通常它会被声明为顶级元素html或root:.

CSS 自定义属性是在外部 CSS 文件中还是在同一个文件中声明都没有关系。

以下是使用两个外部 CSS 文件的示例。它适用于 Firefox、Safari 和 Chrome。

https://thatseeyou.github.io/css3-examples/basics/customproperty.html

variables.css :

:root {
    --red: #f00;
    --green: #0f0;
    --blue: #00f;
}

style.css :

.red {
    background-color: var(--red);
}
.green {
    background-color: var(--green);
}
.blue {
    background-color: var(--blue);
}

HTML :

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="customproperty/variables.css" rel="stylesheet">
        <link href="customproperty/style.css" rel="stylesheet">
        <style>
            .module {
                --red: #800;
                --green: #080;
                --blue: #008;
            }
        </style>
    </head>
    <body>
        <div class="red">red</div>
        <div class="green">green</div>
        <div class="blue">blue</div>
        <div class="module">
            <div class="red">red in module</div>
            <div class="green">green in module</div>
            <div class="blue">blue in module</div>
        <div>
    </body>
</html>

css - CSS 自定义属性在链接的 CSS 文档中是全局的吗？

1 回答 1

Related

Reference