You are currently offline, so some features of this site may not work fully.

Your browser doesn’t support some of the latest CSS features used to build this site.

Read more about my usage of new CSS features.

I’ve spent a bit of time playing with some new CSS features, had some fun and found a few quirks.

I’ve been looking forward to using some of the new and up-and-coming features of CSS for ages. Earlier this week I launched a new website and started from nothing - only content, which is allowing me to buid the site slowly and experiment with whatever new features I feel like.

I held off having any CSS on the site for a while (which made it super fast!) but finally decided to layer on styles so I could experiment with the following relatively new CSS features.


CSS custom properties

The first thing I wanted to have a play with was CSS custom properties - or CSS variables. The support is quite limited for these (see Can I Use) so in production projects I’d not use these yet. However it’s fun to mess around with these things and see what you can do.

Now we’re all used to using variables in Sass so I won’t go into an explanation of why variables are useful but following are some code examples of my usages.

Declaring custom properties:

:root {
  --c-black: #262626;
  --c-green: #5BAB5B;
  --c-red: #F63333;
  --f-s-small: 12px;
  --f-sans-serif: sans-serif;
  --u-padding: 20px;
}

Using those custom properties:

body {
  color: var(--c-black);
  font-family: var(--f-sans-serif);
}

Using in the browser

One of the quirks I found was that in Chrome 49 (current latest version) the inspect panel shows the colour picker when your variable name has a CSS named color in it.

A lot of my variables have these names in as I use them to reference brand colours for a project.

A screenshot of Chrome 49’s dev tools with CSS custom properties

One of the reasons I wanted to use custom properties is to see if you can mess with them in the browser dev tools and have every element using that variable inherit the styles - so this was a little bit odd to encounter.

Switching over to Chrome Canary and also testing in Firefox 45.x this didn’t happen, so I moved my development environment over to use Canary.

A screenshot of Firefox 45’s dev tools with CSS custom properties

Using in media queries

An issue I found was that currently it doesn’t seem that custom properties can be used within media queries. I usually store media query values in Sass variables, eg:

$mq-medium: 45em;

— in an aim to increase consistency and to reduce usage of random ‘magic number’ css values.

When trying to use a CSS custom property within a media query:

@media (min-width: $--mq-medium) {
  @supports (display: grid) {
    …
  }
}

— it didn’t work, so I have reverted back to using Sass variables for these, for now.

Using in regression tests

A further challenge I’ve found with using these new properties is that the headless browser used in my visual regression testing doesn’t support them either. For example, the test reference screenshots don’t use the font-family or color from the CSS custom properties:

A reference screenshot from my regression tests, not using CSS custom properties correctly.

This means that the tests aren’t quite accurate, so this is something that I’m going to have to think about — whether or not they provide enough value, and where the balance is between experimenting with new features, and the robustness of supported features.


CSS grid

Using CSS grid layout is something I’ve wanted to try out for a while. The majority of layouts at the moment we build consist of hacky float based grids and cluttered div.col.col--1-of-12 style markup, which is pretty heavy on the front end and generally feels pretty gross.

Grid is here! Sort of. While the CSS grid support stats don’t fill you with confidence just yet, you can enable it as a feature in Chrome by going to chrome://flags/#enable-experimental-web-platform-features in the browser and hitting the enable link. If you do this and relaunch, the title of the section should display a lovely green “✔ Your browser @supports this” message and these paragraphs should flow into grid columns.

To enable in Firefox, navigate to about:blank and enable layout.css.grid.enabled.

The code

For the basic grid layout you can see above, the code was simply this:

.grid-layout--b {
  display: grid;
  grid-template-areas: 'header header' 'col-1 col-2';
  grid-template-columns: 50% 50%;
}

.grid-layout--b__heading {
  grid-area: header;
}

.grid-layout--b__col-1 {
  grid-area: col-1;
  padding: 0 var(--u-padding);
}

.grid-layout--b__col-2 {
  grid-area: col-2;
  padding: 0 var(--u-padding);
}

Providing fallbacks

Playing with grid was fun. Again, I wouldn’t use it on a production ready site for a while yet but it’s good to get in there early and play around with it.

If you’ve just turned on grid support in your browser whilst on this blog, you’ve proved the point that it’s usually ok to use these progressive new features and provide fallbacks — in this instance you were perfectly fine reading the content in one full-width block, but now it’s in a grid layout it’s a bit nicer to read, and easier to use.

In the example on my Homepage however I go a step further and provide an old-school, float:left; approach as a fallback if the browser doesn’t @support CSS grid - open the inspector and have a look.


CSS @supports

That leads me nicely on to CSS @supports. Supports, or CSS feature queries, has been around for a while and is fairly widely supported itself now so I wanted to try it.

I’m going to be using CSS feature queries as an alternative to Modernizr. Previously I’d use Modernizr to add a CSS class to the <html> tag and use that target for CSS fallbacks like the grid example above. Now I can check using @supports, as follows:

@supports (display: grid) {
  .grid-layout--a {
    grid-template-areas: 'header header' 'col-1 col-2';
    grid-template-columns: 50% 50%;
  }

  .grid-layout--a__heading {
    grid-area: header;
  }

  .grid-layout--a__col-1 {
    grid-area: col-1;
    padding: 0 var(--u-padding);
  }

  .grid-layout--a__col-2 {
    grid-area: col-2;
    padding: 0 var(--u-padding);
  }
}

@supports not (display: grid) {
  .grid-layout--a__col-1,
  .grid-layout--a__col-2 {
    float: left;
    padding: 0 var(--u-padding);
    width: 50%;
  }
}

This checks for grid support and by using the not keyword also flags browsers that don’t support it and allows me to provide my hacky floaty fallback layout.

For my @supports proof of concept I implemented signs on the headings of this post that show up with a green “supported” message or red “unsupported” message:

  • CSS custom properties
  • CSS grid
  • CSS @supports

Try viewing this post in different browsers or on different devices to see the message, and features of my CSS, change.

View the MDN documentation on @supports to see all of the variations that you can utilise.


TL;DR

Playing with these new features is fun. There are some that I wouldn’t use on a production site just yet, but it’s great to get ready for when these powerful features of CSS can be used fully and my website, as mentioned before, is a playground for me to test these sorts of things.

So if it looks broke, I’m probably messing with something I shouldn’t be!

Further resources:

As always the code for this site including the examples shown above is on GitHub and probably under some sort of WTFPL so play around with it if you like.