Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Are CSS Custom Properties global across linked CSS documents?

Tags:

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> 
like image 562
Dom Avatar asked Aug 09 '17 03:08

Dom


People also ask

Are CSS variables global?

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.

How will declare a custom property in CSS?

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.

What do CSS custom properties variables mean?

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.

How do I use a variable from another CSS file?

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.


1 Answers

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> 
like image 129
thatseeyou Avatar answered Dec 24 '22 06:12

thatseeyou