2012 into 2013: web standards in perspective

2012 has been a very exciting year for web standards and web development: we saw the emergence of some very powerful graphic and layout specs, which served to bring the web closer to the ability of traditional desktop applications and desktop publishing programs; we saw application enablers like web components and device hardware access drastically increase the available scope of what we can control using JavaScript; we were greeted by some interesting debates and scandals; and much, much more!

In this article we round up the more exciting happenings in the world of web standards in 2012, and cast our eyes forward to comment on what's likely to be hot in 2013.

CSS Graphics

Over the last few years, CSS3 had a number of shots in the arm with respect to programmatic graphic rendering with all the major browsers now supporting box-shadow, CSS gradients, animations, transforms and other such goodies. But in 2012 we saw some really interesting specs emerge, which will allow for very significant effects to be added easily.

Many of these features were developed by the W3C's CSS-SVG Effects Task Force (FX TF). This joint venture between the CSS and scalable vector graphics (SVG) working groups intends to jointly work on new features that could apply to CSS and SVG, and make existing features work better with both.

First, we've got filters, which have been available in SVG for a long time but are only just making it into a CSS-compatible spec. CSS filters are very exciting because they provide a simple way to apply effects like blur and drop shadows to elements:

filter: blur(10px);

Filters also apply across all aspects of an element properly. For example, box-shadows are always rectangular, and can look really ugly if the elements contain transparent areas. Filters can solve this problem. For an illustration of this, check out Lea Verou's drop-shadow filter versus box-shadow example.

Next on the list is compositing and blending modes, which apply Photoshop-style blending modes to HTML elements. The syntax again is simple:

blend-mode: multiply;

Another new feature by FX TF is masks. Similar to a common Photoshop feature, masks allow us to use an image as a mask for another image (be it a separate image file, or a generated image such as a CSS gradient). Dictated by the size, shape and transparency of the mask, portions of it will appear cut out or transparent. This feature is based upon the proprietary WebKit mask feature, which has already been available for some time.

Up until now, support for these features has been limited, with Chrome having experimental support for filters. We should see more support for these specs in 2013 as well as more new features added.

Layout tools

In the old days, creating web layouts with CSS was always a bit of a hacky nightmare, even after browsers started to support CSS2 properly and consistently. The tools we had were limited: often we had to abuse floats and other features, using them for purposes they were never intended for, and do some downright weird stuff to get something approximating the effects we wanted.

Come 2012 and this has all changed. We're seeing some very useful layout specs come to the forefront and some even have support already.

• One of the most exciting is the Flexible Box Layout Model, often know as Flexbox, which solves many common layout problems. Flexbox is the spec if you want to: vertically centre content inside its parent container; reorder how elements are displayed without touching the document object model (DOM); make a bunch of columns the same height even if they contain different amounts of content; or make all child elements share an equal portion of the space inside the parent regardless of how big it is. With support already inside Opera, Chrome and Firefox, and with the spec now at candidate recommendation stage, things are looking rosy for Flexbox. For a detailed look at the syntax and examples, check out Flexbox: fast track to layout nirvana? by yours truly.
• CSS grid layout is also coming along nicely, providing a way to specify a concrete grid structure on a page, and then place different elements seamlessly into different cells of the grid.
• Exclusions & Shapes is a great a way to float content around defined shapes such as circles, polygons and even defined areas of images. This will allow us to create complex magazine-style layouts on the web with text floated around interesting images. This lacks stable browser support yet, but you can find some interesting demos and support information. (There is support available in Chrome Canary behind an experimental flag. See Adobe's CSS exclusions page for more details.)
• Regions provides a way of marking a specific section of content, and then specifying certain container elements for your content to flow into sequentially, which leads to many exciting layout possibilities. For more information, look at Magazine-like Layout for the Web with CSS Regions and Exclusions on HTML5Rocks.

Flexbox is quite stable at this point, but the specs for the others have shifted quite a lot recently. Browsers lack support for the latest syntax for each new feature. However, we should see a lot more more progress and stability in 2013.

Web components

2012 also paved the way for a new breed of web application development in the shape of web components. The idea is that creating easily reusable self-contained components is a really good idea for efficient code. This is old news and something we've been doing already for a long time. In more recent years, we've seen frameworks like Angular JS and Handlebars JS provide MVC capabilities, templating, custom element definitions and more.

But there's still something missing. We are still faking or approximating what we really need, cobbling together components, hiding the DOM content somewhere until we need it, or using iframes to inject things in the page. These methods are inefficient and can all too easily cause conflicts with code (properties, methods, style rules, etc.) outside the components.

Web components provide a proper way to define components that aren't loaded until needed, have proper encapsulation to avoid conflicts and can be extended with custom elements and DOM properties as needed. Possibly most interesting of all is the Shadow DOM, which is actually used already in browsers to structure complex components such as <video> and date inputs. We don't interact with this at all at present. But being able to define our own shadow DOM fragments and insert them where needed will be a very powerful thing indeed, allowing us to define better accessibility and have more precise control of sub components.

What is written here is a gross simplification of web components. To find out more check out:

• Web components a presentation by Eric Bidelman
• Introduction to web components at the W3C

Currently web components only have experimental support in Chrome Canary, which is hidden behind the experimental JavaScript flag in about:flags. Although, we're bound to see this technology come to fruition in 2013 and beyond.

Device access

For a long time, a major advantage that native apps had over web apps was the ability to make use of device hardware features, such as cameras, accelerometers and battery level information. But web apps are closing fast with a whole raft of new specs for accessing device features.

The Web RTC and getUserMedia (Media Capture and streams) allow us to capture inputs from web cams and other such devices and broadcast them through HTML5 <video>, providing the tools we need to create real-time communications between web apps. The possibilities here are endless. Also, the browser support is definitely getting there with Chrome, Firefox and Opera starting to support parts of these specs.

To learn more, read .net's Getting started with WebRTC and Playing with HTML5 video & getUserMedia support on dev.opera.com. You can also find some other reports of interesting implementations:

• Ericsson's browser that demonstrates WebRTC on mobile
• Cisco working with Mozilla to implement a joint implementation of WebRTC into Firefox
• AT&T leveraging WebRTC to open up its network to developers

Next, there is the deviceOrientation API, which allows us to tap into device accelerometer information and run different code when the device is moved in the x, y and z directions. Just think: you can use this to create your own virtual lightsaber with open standards! More use cases will follow when we've gotten bored with Star Wars (a long time, then).

Be warned that, at present, the available implementations of this spec are non-interoperable, although this should improve in future. Look at The W3C device orientation API: detecting orientation and acceleration on dev.opera.com for more information, including cross-browser code.

Finally, it's worth mentioning other efforts at hardware access standardisation and alternative OS choices. A W3C group called the System Applications Working Group has been set up to "define a runtime environment, security model, and associated APIs for building web applications with comparable capabilities to native applications". Mozilla has a suite of WebAPIs for accessing device capabilities and attributes, which is being put to good use in its Firefox Boot2Gecko phone OS. Other alternative OS choices are also appearing, such as Tizen and Ubuntu for Android.

Responsive design

Responsive design, of course, is a movement that's taken the world by storm in the last few years. We got the motivation and principles early on, and some technologies old and new came to the forefront as great enablers (such as media queries and percentage widths). But a number of problems remained, such as responsive <img>s. This will turn a corner in 2013.

The responsive images community group pretty much finished its discussion of what to do about the responsive <img>s problem. The group's conclusion (the <picture> element, which was first suggested by Bruce Lawson of Opera in 2011) and discussions are now underway on how to spec this. Follow some of this discussion on the W3C bugtracker. The latest step: an editor's draft of a responsive images extension has been created, which aims to tie together suggested functionality from the element, and the competing srcset proposal.

@supports, part of the CSS Conditional Rules Module Level 3, has started to get support across browsers (Opera and Firefox at the time of writing, but it has been added to the WebKit codebase). It provides a way to natively apply CSS rules selectively depending on whether the browser supports certain properties or not.

@viewport is a useful technology, but has always seemed like more of a style type thing that a content type thing. Therefore, some clever folks at Opera suggested a CSS equivalent. Take a look at the CSS device adaptation spec.

Media Queries (MQ) Level 4 are set to improve the control and power we have over styling for different devices with the availability of new queries. For example, pointer (does the device have a pointing device, and is it fine or coarse?), script (does the device have script available or not?), hover (does the device support hover states or not?) and luminosity (what lighting conditions is the device being viewed in?). I'm not sure we'll see support for these in 2013, but soon.

High resolution devices have become very popular in the last year or so, but they have thrown up their own set of challenges. How can you make bitmap graphics look crisp on both low and high resolution devices without resulting in unnecessary downloads and performance hits? There are some techniques that can already be used here. The element should help, and it's also interesting to note that the standard resolution MQ is now starting to get support across modern browsers, somewhat replacing the non-standard device-pixel-ratio.

The Pointer Events Specification has been released as a working draft and been implemented experimentally in IE10. This defines events for handling hardware agnostic pointer input from different devices, such as a pen, mouse, touchscreen, etc.

Performance

A number of very clever people have started to look in great detail over 2012 at improving web performance, and this movement should continue in 2013 and beyond.

We now have much more accurate ways to measure web application performance with the Navigation Timing, Resource Timing, User Timing and Performance Timeline specs created by the W3C web application performance working group. These are now all, at least, at candidate recommendation stage.

requestAnimationFrame now has experimental support across most modern browsers, allowing us to create much more efficient, performant animations on web sites. This is a vast improvement over more traditional methods such as setTimeout.

There are even movements towards improving web performance at the data transport level with a good degree of progress made on new protocols like SPDY and HTTP2.

Community, movements, miscellany

To round off this rollercoaster ride through the world of open standards in 2012-2013, let's move away from pure web technologies for a while, and look at some of the interesting scandals and inspiring movements we saw in the past year or so.

Move the web forward and, more recently, the Test the Web Forward initiative has done a great job of inspiring people to learn more, teach others what they know, hack around in interesting ways and improve browsers and standards specifications by writing tests and filing bugs.

webplatform.org launched near the end of 2012 with the aim of hosting a community that will create the definitive documentation for client-side web technologies.

HTML5 moved to candidate recommendation status, signalling it's pretty far along and stable. There was also a first public working draft of HTML 5.1 released.

CSS vendor prefixes caused somewhat of a stink. There were accusations of irresponsible development practices where developers would use prefixed CSS properties but only one version (say -webkit-). Those features would then not work on other browsers even if they did support them.

In an effort to improve site compatibility, some browsers started supporting other browser's prefixes. There were worries that WebKit browsers would not drop the prefixes on features such as animations, transforms and transitions, even when they were deemed stable enough by the CSS WG to go prefixless. This latter seems to have been cleared up though, and webkit-prefixes are now being dropped where appropriate.

As cheap smartphones and tablets are becoming more readily available, the modern web is in the hands of a more truly global market than before. We should not underestimate the economic importance of the BRIC countries and others, such as Indonesia, Turkey and South Africa.

With increased awareness and availability of programmable kits such as Arduino, Makey Makey and Raspberry Pi, the web is merging more and more every day with the physical world: make your own web controlled lights, radios and lego models; control web applications using bananas. When you start to get into it, this is a really fun area of experimentation.

On a related note, 3D printers are becoming much more affordable and open source manufacturing is becoming very hot. This will, of course, lead to a lot of challenges for traditional industries and a potential copyright holocaust. But it will be very fun to see what happens.

There was some controversy due to work done on HTML5 Encrypted media extensions, or so-called "HTML5 DRM". Co-specced by Google, Microsoft and Netflix, this was called "unethical" by HTML editor Ian Hickson. It continues to be developed as part of the HTML working group activities.

Finally, W3C announced on 21 January that Beihang University is the newest institution to host W3C activities (joining MIT, ERCIM, and Keio University). W3C folks at Beihang co-organised the recent Test the Web Forward event in Beijing along with Adobe. China is the world's second economy, has more internet users than any other country and is in the middle of an innovation boom. It's exciting that W3C staff on the ground will create more opportunities for developers in China to get involved in global web standards work.

Thank you for reading

We hope you've found this roundup interesting and informative. If we missed your favourite new technology off the list, then, we apologise; the article is already running long, and there was so much going on in 2012 that it could have been twice the length. Please mention anything else you found exciting in the comments.

Credits

We'd like to say a huge 'thank you' to all those who gave input into the writing of this article. Your wisdom made the content much richer:

Robin Berjon (W3C), Eric Bidelman (Google), Daniel Davis (Opera), Karl Dubost (Independent), Vincent Hardy (Adobe), Dominique Hazael-Massieux (W3C), Ian Jacobs (W3C), Bruce Lawson (Opera), Peter Lubbers (Google), Divya Manian (Adobe), Robert Nyman (Mozilla), Lea Verou (W3C)

Image by a.pitch