Are CSS Custom Properties global across linked CSS documents?
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:
- https://drafts.csswg.org/css-variables/#defining-variables
- http://www.javascriptkit.com/dhtmltutors/css-variables-tutorial.shtml
- https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties
- https://css-tricks.com/css-custom-properties-theming
- https://www.sitepoint.com/practical-guide-css-variables-custom-properties
- https://www.toptal.com/front-end/dynamic-css-with-custom-properties
- https://googlechrome.github.io/samples/css-custom-properties/
- https://tympanus.net/codrops/css_reference/custom-properties/
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>
Answer
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>