CSS4 What's New that you need to Know

These days you can’t talk about CSS without talking about things that aren’t CSS. Preprocessors like PostCSS, Sass and Less mean that many people don’t directly write CSS. Requiring styles from within JavaScript and relying on tools to fill in browser support so you don’t have to – it’s a brave new world. CSS4 doesn’t actually exist, not as a monolithic specification describing what ‘CSS4’ is. What we do have are modules which describe separate functionality.

This is the same way CSS3 was organised and helped browser vendors to implement new CSS functionality and the CSS Working Group to work in parallel, as “Modules develop at different speeds, depending on their complexity and the working group’s priorities” (Bert Bos, w3.org/Style/2011/CSS-process). Module specifications go through five stages but browsers could implement them at any stage. This is where vendor-prefixes like -webkit- became ubiquitous and tools like Autoprefixer a necessity, so that browsers could get real-world feedback on features prior to the spec or implementation being fully completed. Those five stages aren’t sequential either, through testing fundamental issues can be uncovered which require the spec to be rethought.

With all that in mind, the next wave of modules currently under development contain some neat features and refinements. The highlights include: variables, new selectors, Grid and Snap Points. Some of these already have a decent level of support in evergreen browsers. Variables are supported in 26.01 per cent of browsers (Firefox and Chrome with Opera and Safari on their way), Grid is at 8.77 per cent, and Snap Points have 23.83 per cent global support but 41.14 per cent in the UK. These stats are from caniuse.com and are accurate at the time of writing.

Variables

Part of what makes preprocessors so appealing are variables, and they’re finally making their way to CSS. They’re declared like ‘–primary-color: #6C71C4;’ and used as ‘background-color: var(–primary-color)’. The use and aim of CSS variables is to make it easier for us to read large files and help you to write error-free CSS as you can declare it once and then reuse it throughout. The syntax for these variables may be a bit harder to stomach compared to the way that preprocessors declare variables, but this was decided as the most consistent with the current grammar of CSS. In many ways, this is more exciting than variables in preprocessors as they are static, whereas native variables will be dynamic. This means that you’ll be able to ensure that colours are always accessible and that variable values can be set within media queries.

Grid

The CSS Grid Layout module aims to make creating layouts simpler. This shouldn’t be confused with CSS Grids, which are a popular way to divide containers into columns of a specific width. Chrome and Firefox currently have the best support for it in their next incarnations, while IE11 and Edge support an older version of the specification. Unfortunately Safari is one of the main browsers left to implement it, which holds web developers back from being able to use it in the next six months. This is unlike flexbox layouts, which can fairly easily fall back to using block or inline-block. Tab Atkins explains it well, flexbox is akin to a one-dimensional layout system. It’s great when you know you want to work in a straight line but for anything more it starts to feel as hacky as using floats; Tab says that Grid is for two-dimensional layouts. It’s for this reason that it’s harder to write fallbacks without simply stacking content. Rachel Andrew has been a key figure in exploring what it’s capable of and advocating its use. She’s created many useful resources including Get Ready for CSS Grid Layout published by A Book Apart for a deeper look into it.

Snap points

The next CSS feature will hopefully do away with sites hijacking the scroll event, causing jank and iffy experiences across devices. CSS Scroll Snap Points allow you to define where the user should end up when scrolling along the page with a tolerance defined by you and a gentle transition. It currently has support in Firefox and Safari. IE10 and Edge support an older version of the specification; IE10 only works on touchscreens. Snap Points work both horizontally and vertically, making it ideal for scrolling to containers or for carousels/galleries. The best news is that it only needs a handful of new properties to achieve.

Selectors

There is a plethora of new selectors that will help style elements that you’d usually have to rely on either class names or JavaScript. There are the temporal selectors :past, :current and :future which relate to a timeline, for example a subtitle track or text being read by a screenreader and not a date input. A new type of query called @supports should remove the need for some use cases for libraries like Modernizr, as CSS will be able to query whether the browser supports a given feature (eg Grid Layout) and only apply the styles if they do. They’re used much like a media query: @supports (grid-template-columns). You can combine these with ‘and’, ‘or’, and ‘not’ operators to build up complex queries.

Presponsive Layout

Responsive design is undoubtedly the big thing of 2013. With @media queries, it's never been easier to adapt your site for multiple devices and screen sizes, giving your user a better experience. The only real obstacle left in the responsive way is page loads: connection speeds are still worryingly slow for a large proportion of visitors, and the W3C are aware of that. That's why there's a proposal for presponsive design, which would let you apply preload states for slower connections.

Of course, this technology doesn't come cheap. You'll need a fancy new flux processor chip, which only comes with the latest fibre-optic connections.

@media (flux-capacitor: true) {

    88mph {

        body { background: url('loading.gif'); }

    }

}

Cascading Scriptsheets

This feature was actually introduced by Internet Explorer under the term behavior. If you've ever used a PNG fix, you've used this before. It's incredibly useful for enhancing interaction like never before, and it's helping to bridge the gap and feud between JavaScript and CSS developers. It uses unobtrusive, function-style syntax, and looks like this:

*:hover {

    script: script(alert('hello world'));

}

Here's the equivalent in JavaScript:

var doc = document;
var star = doc.all;

window.hello_world = function(message) {
    message = message || 'hello world';
    alert(message);
}

for(var i = 0; i < star.length; i++) {
    if(star[i] && star[i].nodeName) {
        star[i].onmouseover = function() {
            if(window.hello_world) {
                hello_world();
            }
        }
    }
}

Server-side Stylesheets (CLISS)

If you've ever had to work in a command-line interface before, you'll notice that it's a bit - well, boring - to look at. The CSS4 spec attempts to amend this by introducing the CLISS module.

CLISS stands for Command-Line Interface Styling Scriptsheets, and it follows a very similar syntax to the CSS you're used to working on with websites, but can now be used to make your Terminal a little bit brighter. Currently, there's support for the Unix, OS X and Windows command-line applications, provided an optional module is installed. Unlike existing styling options within the application, CLISS allows the entire CSS property set, allowing full customization. Right now, the selector stack is very limited (terminal, line, and error), but there's a lot more in the works.

The syntax looks like this:

terminal {

    background: url("puppies.gif");

    color: #f0f;

    transform: rotate(-90deg);

}

    terminal error {

        display: none; /* Never write bad code again */

    }

Proper Email Styling Support

Yes, you did just read that right. The W3C are working with a range of email providers to give you a consistent, modern approach to styling and authoring HTML emails.

This could mean we can finally start using semantic <article>, <section>, and even <div> tags, stop using inline stylesheets, and finally move to a centralised, external stylesheet system — really get things up to date with the rest of the web.

However, they all agreed that "tables were alright", quoting that "CSS is overrated anyway", so nothing's changed. Ah well.

New and Old Properties

With the advent of CSS4, some old properties have been reintroduced and some have been given to the world for the very first time.

Among the resurrected properties are text-decoration: blink, text-decoration: marquee, font-style: wordart, and font-family: "Comic Sans MS", which are designed to bring typography up to the standards set by the Gutenburg press of the thirteenth century.

The newer properties include retina: true (which automatically enhances your images, CSI:Miami-style), background-music: muzak (which gives your eCommerce sites a true shopfront feeling), and -webkit-typos: false (which utilises iOS’ hyper-accurate spellchecking software to automatically fix typos in YouTube comments).