Today we'll have a short look at what (we hope) 2013 will bring us — browser-wise, that is. This is by no means a reliable prediction, and may in some cases be plain old wishful thinking. Nevertheless, we want to make a short list of neat things that may or may not come to the web the coming year(s).

Did you know your mouse has a lot more to offer than being "just" a cursor? Think about FPS games, and you'll know what we mean. Until recently, we could not really properly take advantage of the mouse in that way, but with the new Pointer Lock API we can.

Drag and drop used to be a lot of custom Javascript, relying on mousedown, mouseup, mousemove events to work. These drag and drop Javascript libraries do a decent job within their own environment, but they can't really interact with system drag and drop. With the HTML5 drag and drop API we can handle dragging stuff into the browser, dragging within the browser and dragging out of the browser.

Floats are pretty useful, but the only snag is that we can only float left or right and not in the center (or anywhere else for that matter). And if we have two adjecent divs or columns, we can't have the float affect the text-flow in both columns. Thankfully, this will change with CSS Exclusions.

Forms used to be pretty simple; you had your input boxes, textareas, selects, radio buttons, check boxes, and of course file inputs. For a long time this was pretty much it, they did their thing and did it well, but it was fairly limited. With HTML5 Forms, forms got a pretty big update, here we demonstrate some highlights (not all are standard).

Wouldn't it be great to have our content in multiple containers? How about putting it all over an image background? And wouldn't it be neat if we could have the content flow there, without us having to mark it up that way? Not long ago, this was impossible. But now that we have CSS Regions, we can make content flow from one container into the next — and we can handle these containers like regular DOM objects. This may all sound very confusing, but you'll know what we mean by the end of this article.

Static backgrounds are old news, yet even the newer methods (however cool they might be) are still about static images. Wouldn't it be great if we could create dynamic backgrounds? How about animated backgrounds — we could put Nyancat everywhere! Or even creating content-dependent backgrounds? When we combine the power of Canvas with the ability to use it as a background, we can!

Using relative units of measurement like percentages is excellent for creating responsive and fluid designs, but it's a pain to combine with absolute units (px, em, and such). The calc() CSS function finally relieves that pain, and can give your layouts quite a kick!

Not too long ago, a 'computer" was a static object. Weighing a metric tonne, for the most part it just stood there under your desk, gathering dustbunnies in peace. It changed somewhat with the introduction of laptops — but compared to your phone it still doesn't move all that much. And your smartphone records all kinds of interesting information, like movement and rotation data. Wouldn't it be great if we could do something with this information? Good thing we can, thanks to the deviceorientation event!

Multiple backgrounds are a nice thing to have, but wouldn't it be even better if we could cross-fade said multiple backgrounds for even more spectacular effects? The CSS Image Values and Replaced Content Module Level 4 promises that we can, and it has already been implemented in Webkit!

We all know this horror of the web: imagine you had just finished writing a mile-long blog-post. You click "save", but good grief, your internet connection has vanished! And with it, all your writing, thoughts & musings. No way of ever getting it back. If only the app you used had checked your online status and saved your data in localStorage (or something similar)! Or if it would've given you fair warning that you're no longer connected, so that you could copy-paste your text into a local document. As it turns out, they could have, using the HTML5 online/offline events and the Network Information API.

Today we're going to play with dynamic linear gradients, and all the cool new background properties in CSS. Did you know you can influence how the background scrolls in an overflowing container? Did you know how to make flexible odd-even colored lines? We do. And by the end of this, so will you!

Working with Files has always been exclusively a "server thing". No more, enter the File API and his buddies. This API allows you to work with files directly in the browsers. You can read, modify, and create them right then and there, and let the user save the result.

While text-decoration certainly isn't the most cutting edge feature, it is a very useful one. It has been around quite a while, but recently got overhauled into the CSS Text Decoration Module Level 3 spec. The new text decoration features give you a lot more control than you had before.

Apart from all the stunning visual stuff you can do in your browser, we also have something in store for tricking out audio. The Audio API gives you the means to party hard with some audio. And we don't mean just controls like play, pause, etc. — but serious in-browser audio processing. You can generate sounds (waveforms), filter the audio, and analyze it.

The browser used to be a box that could only fill as much of the screen as the OS permitted. Pages were trapped within the confines of the browser window. Time to bust out of this joint! How? Fullscreen API, that's how! With the Fullscreen API you can make any element (video & games, anyone?) go fullscreen, that includes the full page if you want.

Just like the Battery API, the Page Visibility API is a tiny but useful API (let's refer to them as "niche APIs"). It tells us wether a page is visible or not. Before this you always had to assume the page was visible, even when it was not.

While not really one of the fancy-pants APIs, the Battery API is quite useful. Especially if you're building an offline web-app. We can read out the charging status, battery level, charge and discharge time, all within the browser.

While webcams, video chat and other camera-related stuff has been around for a pretty respectable time, until now we had to rely on Flash or other native tools to put them to work. On of the things the WebRTC API offers us is access to video and audio input from a user's webcam/microphone. Combined with the powerful canvas element (all kneel before the canvas element please) we can do some really sweet stuff.

With the CSS columns property we can create mult-column layouts. And we don't mean the kind that you have to create a separate div for every column, and you'd never quite get the right balancing — regardless of the home-grown tricks you were using. With CSS columns you can create real columns that automatically balance, and the content flows nicely from one to another!

The web has evolved from a very text-oriented structure into the interactive, experience-rich digital environment we all know and love today. With the waning of Flash (which none of us are mourning, FYI), CSS has had to fill quite a few voids left in web-effects. Enter visual effects, made from scratch in CSS. And while it's not exactly a web-based Photoshop, it's starting to deliver some very interesting results.

This one is for all you typophiles out there. For a long time web-typography was an unsightly, borked mess. Luckily, this changed with wide-spread support for @font-face. But still you couldn't use the fonts you had to their full extent: all the cool OpenType features like small-caps, ligatures, old-style figures and swashes were reserved for those who used these fonts in print. With the CSS property font-feature-settings, that has changed quite a bit.

Live updates have always been kind of a hassle — you had to deal with long polling, flash components or, if you went the HTML5 route, you'd have chosen WebSockets. That's no longer the case, you can set up EventSource in about 5 lines of code and it works over standard HTTP.

Wouldn't it be swell if you could notify a user with an important message even if the browser isn't currently in use? Drumroll please: enter the Notifications API!