03 - CSS Variables

Exercise 3: CSS Variables

Nitish Dayal, Software & Applications Developer - Contact
Last Commit Date: May 12, 2017

The web page provided in this exercise displays an image, and has 3 form inputs from which the user can manipulate the padding, blur amount, and background color of the image. Update the CSS and write the JavaScript code necessary to bring functionality to the inputs.

Guide

The purpose of this exercise is to gain experience using CSS3 variables. These are different from Sass-style variables; Sass variables are defined in the Sass file, but once compiled to CSS the values cannot be updated. CSS3 variables can have their values updated through the use of JavaScript. The input HTML elements have a name property that corresponds with the CSS properties we want to update. We can create CSS3 variable references and attach them to the root element, provide them with some default values, and utilize JavaScript to attach event listeners to the input HTML elements that will call upon an event handler function whenever the input values have been changed by the user. We will define the function to target the entire document and update the values of the CSS variables from there.

Steps:

• CSS:

  1. Declare a new style for the :root element and declare three variables inside the style definition for :root with the same names as the input HTML elements. CSS3 variables are declared in the following syntax format:

     /* Two hyphens (--) followed by the variable name */
     
     :root {
       --base: #ffc600;
       --blur: 10px;
       --padding: 10px;
     }

  2. Declare a new style for the img element and set the background, filter, and padding properties to the variables we defined at the root element:

     /* 'var(--variableName)' to use previously defined CSS properties */
     
     img {
       background: var(--base);
       filter: blur(var(--blur));
       padding: var(--padding);
     }

  3. Declare a new style for the .hl class and set the color to the base variable.

• JavaScript:

  1. Declare & define a variable as a reference to all of the inputs on the page.

  2. Iterate through the HTML Node Elements that the variable is referencing and attach event listeners to each one that will call on an event handler whenever the input value has been changed (the change event).

  3. Repeat step 2, listening for mouse movements on the inputs instead of value changes (the mousemove event).

  4. Define a function that will be used as the event handler. It will update the value of the CSS3 variable at the root document level corresponding with the name property of the input element which called this function.

     • Minor 'gotcha': Properties like padding and blur won't update because the value from the input does not include the type of measurement we are using ('px', 'em', etc.). The input HTML elements also have a data-sizing property if they require a suffix. We can use this to attach the correct suffix to the value if necessary.

Wooooooo! Finished yaaaaay!