Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
CSS Cascade
<main id="room">
<h1>hi welcome to "the room" css values temperature demo</h1>
<div id="computer">
<div id="cpu">cpu</div>
<div id="fan">fan</div>
<div id="gpu">gpu</div>
name: "--temp",
inherits: true,
initialValue: "0",
syntax: "<number>"
console.log("dead", wtf)
// blue to red gradient
function color(n){
const ctx = document.createElement('canvas').getContext('2d');
const h= 210 * (1 - n)
const l= 40+ (20 * n)
const hsl= `hsl(${h}, 70%, ${l}%)`
ctx.strokeStyle = hsl;
return ctx.strokeStyle
cssBackgroundColor= "background-color",
cssTemp= "--temp"
function updateBackgroundColor(el){
const s= window.getComputedStyle(el)
// I'd forgot getPropertyValue was needed
const tempString= s.getPropertyValue( cssTemp)
const temp= Number.parseInt(tempString)
console.log(, "A1", temp, tempString)
const n= temp/100
const c= color(n)
console.log({id:, temp, tempString, n, c})[ cssBackgroundColor]= c
["room", "computer", "cpu", "gpu"]
.map(id => document.getElementById(id))
div {
padding: 30px;
#room {
--temp: 30;
#computer {
--temp: 40;
#cpu {
--temp: 50;
#gpu {
--temp: 60;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment