Web_Designer_Issue_262_2017

UPDATE CSS CUSTOM PROPERTIES WITH JAVASCRIPT
USING CUSTOM PROPERTIES AND CALC() WE CAN ENSURE HIERARCHY AND VERTICAL RHYTHM
In this short tutorial we’ll be creating a simple page
with input controls. The CSS will contain a number
of CSS Custom Properties, which we can update
with input from the user using JavaScript.
We’ll be using the calc() function to set the
font-sizes and spacing, allowing everything to be
updated by changing a single Custom Property.
01. HTML SETUP
We’ll start by building a simple page with a
headline, paragraph and some basic form elements
to control our Custom Properties with input from
the user, using the ‘onchange’ property on the form
elements to fire our JavaScript function.
...
...
02. OUR FIRST CUSTOM PROPERTY
In our CSS we’ll create a :root selector and create
our first Custom Property. Using the double dash
(‘--’) prefix we can then add any name we want, so
we’ll start by creating a base font size.
:root {
--base-font-size: 1rem;
}
03. CALC() MAGIC
Once we’ve created a Custom Property for the
font-size, we can create our spacing unit Custom
Property and base that on a calculation of the
font-size Custom Property using the CSS calc()
BROWSER SUPPORT
At the moment Scroll Snap Points have quite
limited browser support, with Firefox ofering the
best support. However, the specification became
a candidate recommendation in February this
year so wider support should soon follow (srt.
lt/rT2xJr). There’s also a polyfill available to
provide support for Chrome (srt.lt/Er6Ri).
In development
12+
function. Our calculation works like this; 1rem is
equal to 16px (the default browser font-size), so our
base-font-size is 16px. Our Spacing unit is then 16px
multiplied by one and half. So by default our
spacing-unit is equal to 24px.
--spacing-unit: calc(var(--base-font-size) *
1.5);
04. USING OUR CUSTOM PROPERTIES
Now we’ve set our Custom Properties on the :root
element we can use them when styling elements in
the page by using the new syntax var(). Inside this
we recall our Custom Property name and optionally
multiple fallback values, which can be other
Custom Properties or values.
body {
font-size: var(--base-font-size, 1rem);
padding: calc(var(--spacing-unit, 1.5rem) *
2);
}
h1 {
font-size: calc(var(--base-font-size, 1rem) *
2.4);
margin: 0 auto calc(var(--spacing-unit,
1.5rem) * 1.5);
}
05. JAVASCRIPT FUNCTION
Using JavaScript we can take the input from the
range slider to update the Custom Property
controlling the font size, which will in turn update
the spacing unit using calc().
function updateCustomProperties() {
var size = document.getElementById(“getsize”).value;
document.body.style.setProperty(‘--base-font-
NEW GENERATION CSS
size’, size + ‘rem’);
}
We can also use HTML5 colour inputs to change the
background and text colours by adding them to the
HTML and then adding new variables and
setProperty values inside the JavaScript function.
BROWSER SUPPORT
CSS Custom Properties are now supported in the
current version of all modern browsers, Edge
included. Mobile support as of the most recent
versions is good too with only IE, Blackberry and
Opera Mini lacking support.
49+
(Current version 57)
15+
Uses an older version of the
spec (Current version 15)
31+
(Current version 53)
9.1+
(Current version 10.1)
ESSENTIAL READING
• CSS-Tricks
Covers everything you need to know about
front-end development and blurring the lines
into UI/UX, design and back-end development.
CSS Tricks ofers blogs, videos, forums and an
impeccable CSS Almanac making it well worth
adding to your bookmarks.
• Smashing Magazine
Through their articles, digital books, job
resources and industry conferences they
have a lot to ofer anyone in the web industry.
Consistently provides quality resources for
beginners and pros alike.
39+
9+
Above: When the user scrolling has stopped the browser will automatically scroll to the closest snap point
feature ________________________________________________________________49