Are custom CSS properties global for linked CSS documents?

Question

Are custom CSS properties global for linked CSS documents?

I experiment with great success with custom CSS3 properties (also called CSS variables). I am talking about variables like --black: #000;and background: var(--black);. However, I was not lucky when the variables are declared in separate related documents.

With custom CSS properties that support over 72% of browsers (src: https://caniuse.com/#search=css%20variables ), I really want to use them in a very specific application where I know that my audience uses compatible browsers.

I am wondering if these CSS custom properties are global in all CSS related documents, or are they global (in element :root) for each document?

I can not find the answer (even in the specification)!

Some of the studies that I read:

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>

+4

css css3 css-variables

Jurgen 09 . '17 3:18

1

thatseeyou · Accepted Answer · 2017-08-09T04:09:45+0000

MDN:

: , , .

, CSS. . html root:.

, CSS CSS .

CSS. Firefox, Safari Chrome.

https://thatseeyou.imtqy.com/css3-examples/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>

Are custom CSS properties global for linked CSS documents?

More articles: