-
More cascading "gotcha's" with CSS variables: html { color: var(--text-color, red); } p { --text-color: blue; } p color is still red, because we inherit the *computed* valuePermalink On twitter.com
redfrom html, not the specified valuevar(--text-color, red).♻️ 2 Retweets ❤️ 18 Favorites Mood 0
-
Changing the variable does not cause the inherited value to re-calculate. We can do that by using e.g.: * { color: var(--text-color); } /* re-calculate everywhere */ html { --text-color: red; } p { --text-color: blue; }Permalink On twitter.com
-
Doesn’t need to be the universal selector, as long as it matches the places you need to re-calc. Which also doesn’t have to be the same place you define the variable… But the re-calc location has to have access to the updated variable - directly or by inheriting.On twitter.com