16 April 2018

CSS: Building the Future

So this weekend I was lucky enough to go to the WordCamp London conference to build on my knowledge of how much you can do with the CMS.

This post is over two years old, so the details may be out of date.

While I was there I decided to go to a talk about the future of CSS with @keithdevon. Initially I did believe this would be like most other talks, so basically speaking about FlexBox and CSS Grids, two things that have become a massive speaking point in the last few years.

Instead I was pleasantly surprised as I learnt about CSS practices that I haven't heard much about at all! Obviously as a CSS lover, this was my jam.

Custom Properties

So custom properties have actually been around for a few years now, and have gone through a few changes. They do come across as something very similar to Sass, however in looking at the implementation it does seem like a cleaner approach.

Example

So in Sass you set the variable as $primary-colour, however with custom properties you set variables as --primary-colour . The double dash is a requirement for custom properties. So you can set these in the root as per:

CSS

:root { 
	--primary-colour: #ff0000; 
	--secondary-colour: #414141;
}

Now after this, they can be used just like you would with Sass, however you'd set these as a var() .

CSS

h1 {
  color: var(--primary-colour);
}

The best thing about doing it this way, is that it is native CSS, which means you don't need any preprocessor. You can also use them for JS manipulation!

JS Manipulation

There are two functions you can use with custom properties: getPropertyValue() and setProperty()

So using getPropertyValue(), you can grab the custom properties variables and use them this way instead.

JAVASCRIPT

var primaryColour = styles.getPropertyValue('--primary-colour');

You can also set the variables using setProperty().

JAVASCRIPT

document.documentElement.style.setProperty('--primary-colour', '#ff0000');

Sadly there is one downside with Custom Properties...... and that is something absolutely horrible called Internet Explorer. Yep. As normal, IE does not support Custom Properties (I mean are we surprised?).

However you can add some fallbacks, and even though this means doubling up on CSS, I feel it's the way forward so you don't stay stuck in the past.

Colour Functions

Now, this is something really cool.

With color-mod() you can choose loads of different colour adjustments to change the way your colours come across. Just a few of these include:

Contract
Saturation
Tint
Shade
Hue

This can be used like this:

CSS

h1 {
	color:color-mod(var(--primary-colour), 
	shade(20))
}

So is amazing at setting things like dark colours and light colours!

Sadly...

Yeah, so this has no browser support yet! However it looks like it's something that is coming soon!

In summary

CSS has come a long way since the release of CSS3 (2014) & CSS4 (2016), with new modules being released constantly. With new modules coming all the time CSS can only get more and more exciting and pushing our limits on what we can do with the web.

More about the future of CSS can be seen on Keith Devon's (WCLDN Speaker) slides from the conference:

https://highrise.digital/future-css/

I for one, cannot wait to see what comes next!