Are CSS Custom Properties global across linked CSS documents?

Question

I'm experimenting with a lot of success with CSS3 Custom Properties (aka CSS Variables). I'm talking about the --black: #000; and background: var(--black); type variables. However, I'm having no luck when variables are declared in separate linked documents.

With CSS Custom Properties being at over 72% browser compatibility (src: https://caniuse.com/#search=css%20variables), I'm keen to start using them in a very specific app where I know my audience are using compatible browsers.

I'm wondering whether these CSS Custom Properties are global in scope across all linked CSS documents or whether they are only global (at the :root element) per document?

I'm not able to find an answer (even in the spec)!

Some of the research I read:

My specific problem is occurring in a Ruby on Rails application, where I'm including the CSS Custom Properties in a <style> block ahead of an SCSS stylesheet include which when deployed is to be pre-compiled. If I include the variables at the top of the SCSS, everything works just fine. However the <style> block is to contain theme variables and needs to be compiled by ERB at runtime.

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

Please clarify what you mean by "separate linked documents". Do you mean separate HTML files? Your title says "linked CSS documents"; what does that mean? — user663031
– user663031, Commented Aug 9, 2017 at 4:54
Linked CSS documents, as in <link rel="stylesheet" href="theme.css"> and <link rel="stylesheet" href="application.css"> together in the same HTML document. — Dom
– Dom, Commented Aug 9, 2017 at 5:08
Thanks for the edit @vadim-ovchinnikov. Not sure what went wrong with the formatting there. — Dom
– Dom, Commented Aug 9, 2017 at 5:09
All linked CSS style sheets are in the same global CSS space. Please give us a specific example of "having no luck". — user663031
– user663031, Commented Aug 9, 2017 at 5:17
Thank you everyone for you input, especially @torazaburo. Confirming what I suspected about CSS variables being global to the CSS space was what I needed. I was able to then go looking for the problem in other places, which I eventually detected and fixed. Everything is working as it should now. — Dom
– Dom, Commented Aug 9, 2017 at 14:20

thatseeyou · Accepted Answer · 2018-05-31 06:55:26Z

67

In MDN:

Custom properties participate in the cascade: each of them can appear several times, and the value of the variable will match the value defined in the custom property decided by the cascading algorithm.

It works just like any other CSS properties. It should be declared in the ancestor of the target element. So usually it would be declared to the top-level element html or root:.

It does not matter whether CSS custom properties are declared in an external CSS file or the same file.

The following is a sample using two external CSS files. It works on Firefox, Safari and 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>

edited May 31, 2018 at 6:55

answered Aug 9, 2017 at 4:09

thatseeyou

2,04215 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

vals Over a year ago

And also, as a side note, works across the shadow dom boundaries

Dom Over a year ago

Thank you for your answer. Although the MDN reference doesn't really definitively answer my question (it kind of assumes your knowledge of cascade is sufficient), your code certainly does. @torazaburo 's comment to my question above was more direct. I have resolved my problem, it was a weird caching issue where I wasn't seeing changes I was making, and my style block wasn't rendering correctly as a result. Thanks again for your answer and pointing me at your code, it confirmed what I thought was right and led me down a different path of investigation in my code.

Dom Over a year ago

Thanks for adding the info about shadow DOM @vals. It's good to know.

Collectives™ on Stack Overflow

Are CSS Custom Properties global across linked CSS documents?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related