Web_Designer_UK__May_2018

Tutorials
Shrink your code with CSS4 variables
Is it safe to use
CSS variables?
As with any relatively new web
technologythequestionevery
web designer wants to know is:
“what’s the support like?”. The great
news if you visit www.caniuse.
com is that currently most of the
major browsers support this, the
exceptions being IE, Opera Mini and
UC Browser for Android.
So all in all this has very good
support from the main desktop and
mobile browsers at just under 79%
browser support globally. As always
whether you can use this depends
on who your audience is.
If you need to know more about
CSS variables then the Mozilla
Developer Network has good
documentation on this, and it’s easy
to understand (https://developer.
mozilla.org/en-US/docs/Web/
CSS/Using_CSS_variables). A more
in-depth look at CSS variables,
featuring a good description of why
you would want to use them can be
found on Medium (https://medium.
com/dev-channel/css-variablesno-really-76f8c91bd34e).
padding: 20px;
text-align: center;
background-color: var(--alt-bg);
color: var(--main-type);
}
15. Body building
The next part of the page to be targeted is the body
element, so find the appropriate CSS that controls the
look of this. The background will now be controlled by the
main background CSS variable to give global control to
the variables.
body {
margin: 0;
padding: 0;
font-family: “HelveticaNeue-Light”,
“Helvetica Neue Light”, “Helvetica Neue”,
Helvetica, Arial, “Lucida Grande”, sansserif;
font-weight: 300;
line-height: 1.4em;
background: var(--main-bg);
}
16. Box fresh
The ‘box’ CSS is going to be updated now, so find the
code for this and change both the background colour
and text colour to have control from CSS variables. Save
this CSS page and just check the page has updated in the
browser. Now move into the ‘index.html’ page.
.box {
float: left;
width: calc(var(--width) - 40px);
margin: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
background: var(--alt-bg);
color: var(--main-type); }
17. Adding buttons
In the ‘index.html’ page find the main header section and
just after the heading two tag, some content will be
added. Just to help you locate this in the code we’ve
shown where the code will go with the HTML comment
in this step. Once you’ve found it add the code in the
next step.
Make Me Hungry
18. Span and chips
The span is added to the page. This gives the instruction
to change the theme. Two buttons are placed after this,
and they will talk to the JavaScript to update the CSS
variables so that they switch between light and dark.
Choose Theme LIGHT
DARK
19. Stick to the script
The code here should be added right before the final
body tag of the page. The code in the remaining two
steps will be placed inside these script tags. This function
will be used to set a specific CSS variable with a value
dynamically. Change it at run time via user control.
function setDocumentVariable(propertyName,
value) {
document.documentElement.style.
setProperty(propertyName, value);
};
20. Going dark
When the user clicks the ‘dark’ button the function here
will be called. As you can see it sets three variables with
new values and these update the page immediately,
changing the theme. Save this and try the button in your
browser to see the theme change.
function dark() {
setDocumentVariable(‘--main-bg’,
‘#918d82’);
setDocumentVariable(‘--alt-bg’,
‘#57534c’);
setDocumentVariable(‘--main-type’,
‘#ddd’);
}
21. Seeing the light
The final step is to add the functionality for the ‘light’
button. This switches the colours back to the regular light
colours of the page. Save your work and refresh your
browser to see the update take effect. Now you can
switch between themes just by updating three CSS
variables that, in turn, control many other elements on
the page.
function light() {
setDocumentVariable(‘--main-bg’, ‘#fff’);
setDocumentVariable(‘--alt-bg’,
‘#f5f5f5’);
setDocumentVariable(‘--main-type’,
‘#333’);
}
tutorial _________________________________________________ 73