CSS Cascade

css-cascade.markdown

CSS Cascade

A Pen by rektide de la fey on CodePen.

License.

index.html

<main id="room">
<h1>hi welcome to "the room" css values temperature demo</h1>
  
<div id="computer">
  computer
  <div id="cpu">cpu</div>
  <div id="fan">fan</div>
  <div id="gpu">gpu</div>
</div>
</main>

script.js

try{
CSS.registerProperty({
  name: "--temp",
  inherits: true,
  initialValue: "0",
  syntax: "<number>"
})
}catch(wtf){
  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
}


const
  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(el.id, "A1", temp, tempString)
  const n= temp/100
  const c= color(n)
  console.log({id: el.id, temp, tempString, n, c})
  el.style[ cssBackgroundColor]= c
}

["room", "computer", "cpu", "gpu"]
.map(id => document.getElementById(id))
.forEach(updateBackgroundColor)

style.css

div {
  padding: 30px;
}
#room {
  --temp: 30;
}
#computer {
  --temp: 40;
}
#cpu {
  --temp: 50;
}
#gpu {
  --temp: 60;
}