CSS4 is Coming: What You Need to Know

The Internet is constantly evolving — it's hard to believe rickrolling is six years old, Internet Explorer 6 is twelve years old, and CSS is nearing the public release of version 4.

So what's new in CSS4? I've taken a look through the entire CSS4 spec, hand-picking the best parts. Here are just a few of them.

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:

1	*:hover {
2	script: script(alert('hello world'));
3	}

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

CSS is overrated anyway - W3C

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).

To Conclude

It's a great time to be working on the web right now, and it's getting better and better; evolving from strength to strength, enabling people from around the world to connect and make great things like this.

Keep creating, and show us what great CSS4 demos you've made in the comments!