Read time 5 mins

The changing face(s) of css and layout

03/04/2016 - UX Design

The way which we use CSS has, thankfully, evolved enormously over recent years - not only in terms of what we can do with it, but also how we write it and the browser support for it.

SASS and Compass allow us to construct CSS in ways which range from the basic to the incredibly complex, the latter of which can come to resemble programming language and syntax, rather than simple user-friendly code. While debate over this continues, there's no doubt that what can be done both with the language and with the increasing browser support is making the web more interesting and importantly, much faster.

Apple Macbook, displaying CSS code, on a desk with a potted plant

There are contenders for further change - from the many other pre-processors out there to totally new systems.

Flexbox, which has actually been around for a good while now, would allow for much more diversity and malleability in screen layouts. Take up of this has been stunted by lack of browser support, with IE being the usual culprit and continued hold up: http://caniuse.com/#search=flexbox

The next step along this layout path is the CSS Grid, which "is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces". Browser support here again lags even further behind so it'll be some time before we can begin to implement these new systems.

There are always ways around lack of browser support, in the shape of polyfills - which often come in the shape of javascript helpers - and whilst these are useful they require more time and effort to implement and continuous support can be difficult.

Interestingly within the same timeframe of CSS evolution, there is an emerging concept called Houdini, which would in essence remove the need for polyfills and allow developers to render their CSS in all browsers, but again it'll be a while before this comes about.

Crucially all of these developments are only possible when the browser support is there for them. Although it's been a long slog, the double whammy bonus of Microsoft's decision to drop support for Internet Explorer (currently versions below v11 but they've also announced that 11 is the last version, as they put their focus onto the Edge browser), and the overtaking of IE by Chrome as the world's most used browser mean we are closer than ever to use the new tools available to us.