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>
First of all: CSS variables can have a global or local scope. Global variables can be accessed/used through the entire document, while local variables can be used only inside the selector where it is declared.
The @property “at-rule” in CSS allows you to declare the type of a custom property, as well its as initial value and whether it inherits or not.
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document.
CSS properties are similar in that they do not differ from one another. External CSS files with CSS custom properties have no effect on their parent files. Instead of using regular stylesheets, we can import variables by using the:root method. Using the:root selector, you can match the document's root element.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With