Web design

Hot in web standards: June 2012

In her second monthly report, Lea Verou rounds up the latest developments in the W3C working groups including 'unprefixing', media queries, sticky positioning and lots more

The Northern Hemisphere is already in the heart of the summer, and almost everybody is slowing down work and taking time off to enjoy the sunny weather. However, the W3C WGs are restless, always bringing us new developments to drool over. This month, several specifications advanced to the next stage, and we also saw some interesting new features being accepted. In addition, some long overdue topics, such as sticky positioning, are finally getting their fair share of attention. If you are already curious to find out more, read on!

Transforms, transitions and animations go nude!

…and by nude, I mean unprefixed. The CSS WG finally approved unprefixing these features, which was admittedly long overdue. The IE10 team didn’t waste a minute: it already unprefixed not only those, but also a bunch of other specs it deemed stable enough. If you future-proof your code, that shouldn’t be a problem for you, except in the case of gradients. Keep in mind that this means you don’t have to use the -ms- prefix at all for transitions, animations and gradients, since no stable build of IE was ever released that requires it.

Media Queries and View Mode reach Recommendation status

There has been a lot of celebration in the community for the Media Queries and View Mode specifications reaching Recommendation status. Although this is a great step forward for both specs, it’s not as an important milestone as most people make it out to be. As far as most implementors and authors are concerned, Proposed Recommendation (PR) and Recommendation (REC) are almost equivalent. As noted in the announcement, there were absolutely no changes between PR and REC.

Work starting on Media Queries 4

On a more exciting note, work has already started on Media Queries Level 4, which includes quite a few interesting new features, such as:

  • script: is JavaScript is enabled on the current document?
  • pointer: is a mouse available? Is it a touchscreen?
  • hover: can the :hover pseudo-class work on the current device?

The script media feature can also be polyfilled quite easily, so we could start using it now.

New unit: vmax

Hopefully, you’re already aware of viewport-relative units. If not, I strongly suggest you read this excellent primer by David Storey. These units, already supported by IE9 and WebKit, are going to take responsive web design to a whole new level.

You might have noticed, however, that something was missing. We had vw for 1/100th of the viewport width, vh for 1/100th of the viewport height and vmin for either of the two, whichever happens to be smaller. However, there was no vmax for the opposite behaviour. Thankfully, the CSS WG recently agreed to add it.

Sticky positioning

Even if you’ve only been developing websites for a few months, I’m pretty sure you’ve run into this: an element that needs to be statically positioned when it’s in view, but when the user scrolls, it should scroll too, in order to remain visible. This effect is most commonly applied to table headings, sidebars and other controls that are crucial to a page’s function.

JavaScript used to be unavoidable to achieve this kind of effect up until now. However, the CSS WG recently started discussing this matter seriously. So far, no consensus has been reached, so if you read the entire discussion and still feel like you have a better syntax to propose, feel free! Be warned, however: it’s a long thread.

Flexbox going to CR

After a lot of back and forth, and changes that rendered obsolete pretty much every Flexbox tutorial on the web and in print, Flexbox has finally stabilised and is on the track for Candidate Recommendation status. To some, that’s comparable to … achieving singularity.

document.parse() is coming?

The WebApps WG is seriously considering adding a new method to the Document interface that will parse an arbitrary string of HTML into a document fragment, similar to what document.write() and innerHTML do. Ian Hickson seems to be the main opponent of the idea, suggesting HTML literals instead, inspired by E4X. Hopefully, these solutions will help to eliminate some quite hacky workarounds traditionally employed by JavaScript libraries.

Early draft of Push API

A first Editor’s draft was recently published for Push API, which will enable clients to handle messages pushed from the server via a number of different methods, such as Server-Sent Events. Push-style server-client communication is certainly something that needs to become easier, so efforts like this are always welcome.

Backporting find() behavior to querySelector()?

Many of you already know that find() and findAll() are essentially going to replace the more verbose querySelector() and querySelectorAll() methods. Not only are they shorter, but they also resolve scoping in a much more sensible way. Of course, the querySelector() methods will always be supported, as not doing so would break too many existing websites.

This caused some people to advocate that this behaviour should be backported to the older methods, and that they should be deprecated. The resulting discussion is a must-read: one that will make you understand the considerations and struggles that go into pretty much every web standard in existence.

Words: Lea Verou

Lea works as a developer advocate for the W3C. She has a long-standing passion for open web standards, which she fulfills by researching new ways to use them, bloggingspeakingwriting, and coding popular open source projects to help fellow developers.

Subscription offer

Log in with your Creative Bloq account

site stat collection