a preview of a simple Javascript hue-matching game I created

It had to be Hue

A Primer on Dynamic User-Manipulated CSS Variables

As a (very) recent graduate of The Flatiron School’s Web Development Immersive Program, I expected to be job seeking for a good three months before finding a job. To my amazement, within two weeks of graduating, I received, not one, but three job offers for web developer positions at some pretty incredible organizations. I settled on an internship at New York Magazine, where the majority of what I’ll be doing there is front-end development — mostly in vanilla javascript.

So to prepare, I’ve been brushing up on my trusty friends, vanilla js, and I’ve really been enjoying how versatile and useful this language is! I remember first being introduced to libraries like jQuery rejoicing at the simplified syntax. But as I’ve been exploring more of the new features of ES6 and ES7, I’ve found myself wondering more and more… what was the big deal with those libraries again? With native tools like fetch, async functions, and querySelector, Jquery seems all but obsolete to me.

But enough about my pontificating on Jquery… you came here for CSS Variables!

CSS Variables

I won’t pretend to know the history of CSS, SASS, and CSS variables… but from my limited understanding, SASS (aka syntatically awesome stylesheets) were created to expand on CSS’s functionality by adding variables to CSS. This made creating stylesheets with repeated colors, sizes, etc. much easier and DRY-er by enabling you to just drop in a $variable in a CSS document in lieu of a hexcode, or something, and you’d know that every place that you want that color to appear in your stylesheet, it will be the same color. It also made creating stylesheets more dynamic by enabling templates to swap out colors, fonts, font-sizes, etc. easily.

However, one of the weaknesses of SASS is that since it’s a preprocessor, the SASS code is evaluated on the server side before being compiled into a CSS stylesheet that is then served to the client, meaning that it made it very difficult to control SASS variables from the front end.

CSS variables have been around for a few years (since 2012), but widespread browser support didn’t come about until 2016, so this syntax is still relatively new. For a good intro to the syntax and how to use them take a gander at this post:

CSS Variables — No, really!

The quick and dirty intro is this:

Declare your variables on a selector like the :root pseudo-class:

:root {
  --background-color: cyan;
  --title-font-size: 3em;
}

You can than use those variables later in your stylesheet by using the var(--variable) syntax:

body {
  background-color: var(--background-color);
}
h1 {
  font-size: var(--title-font-size);
}

Manipulating CSS Variables from the DOM

One of the great things that you can do with CSS variables is change them based off of user behavior on the website. Do you want the background color to change as the user scrolls down the page? Totally possible. Do you want an element’s border to appear and disappear on a click? Consider it done.

To edit a CSS variable that has been defined on the :root class, all you have to do is:

document.documentElement.style.setProperty('--variable-name', `variable-value`)

You can use .style.setProperty() on any DOM element that has a CSS variable being applied to it. To demonstrate how this opens up a lot of possibilities, I spent an afternoon and made a simple javascript game using two CSS variables and some vanilla javascript code that maps HSL values to the mouse’s xy coordinates on the Window object.

You can check out the game here:

Color Match!

and you can see the repo here:

tsengsational/colormatch

A quick and dirty run down of the logic for the code:

I get the width and height of the window, as well as the x-y coordinates of the cursor:

var width = window.innerWidth
var height = window.innerHeight
function getMousePos(e) {
    return { x: e.clientX, y: e.clientY };
}

I also set two CSS variables on the :root class for the color for the target and the body background:

:root {
    --base: grey;
    --target: white;
}
body {
  background: var(--base);
  font-family: 'Montserrat', sans-serif;
}
.target {
  position: fixed;
  width: 10vw;
  height: 10vh;
  top: 45vh;
  left: 45vw;
  color: var(--target);
  text-align: center;
}

Then, I use a setRandomColor function to randomly generate an HSL value (I only adjust for the hue and light, not the saturation since the mouse coordinates will only be able to effect two attributes), and then set the CSS variable --target to that HSL value:

function setRandomColor() {
  let randomH = (parseInt(Math.random() * 360))
  let randomL = (parseInt(Math.random() * (50 - 20) + 20))
  let randomColor = `hsl(${randomH}, 50%, ${randomL}%)`
  document.documentElement.style.setProperty('--target',   randomColor)
}

Then, I set an event listener on the document object for the onmousemove event, so that the function will fire whenever the mouse is moved on the screen. Getting the mouse coordinates, I set a variable to a corresponding HSL value. The hue is based off of 360 degree spectrum, so I take the x coordinate and divide it by the screen width and multiply that by 360 to get the corresponding hue value. I do the same for the Light value and the y coordinate (I narrowed the range for the light value since anything above 50 was too white to tell the difference, and anything below 20 was too dark). Then I set the --base CSS variable to that new HSL value.

Finally, if the --base and the --target values are the same, I trigger an alert informing the winner they have achieved a match and serve a new random color to the target to start the game over:

document.onmousemove = function(e) {
  var mouseCoords = getMousePos(e);
  let h = parseInt((mouseCoords["x"] / width) * 360)
  let l = parseInt((mouseCoords["y"] / height) * (50 - 20) + 20)
document.documentElement.style.setProperty('--base', `hsl(${h}, 50%, ${l}%)`)
let base = document.documentElement.style.getPropertyValue('--base')
  let target = document.documentElement.style.getPropertyValue('--target')
  if ( base === target) {
    alert("You matched!")
    setRandomColor()
  }
 };