Hot in web standards: March/April 2013

Hi everyone, it’s time for your bimonthly dose of web standards developments! As summer hesitantly starts to approach in the warmer climates, so do many other exciting updates in the ever-changing world of open web tech.

Major update on CSS Grid Layout — feedback needed!

A new Working Draft of CSS Grid Layout has been recently published and unlike other WDs, it contains some pretty major changes from the previous version. The main one is that it’s switched to a new positioning model. The old grid layout model uses properties to indicate the starting row/column and each item’s span. The new model positions every edge of the item to a grid line. For example, assume you want to position an item on the second column in the third row and have it span one column horizontally and two columns vertically. With the older syntax, you’d do something like this:

1. grid-column-position: 2;
2. grid-column-span: 1;
3. grid-row-position: 3;
4. grid-row-span: 2;

Or, if you like shorthands:

1. grid-column: 2 1;
2. grid-row: 3 2;

Or, even more compactly:

1. grid-area: 3 2 2 1;

With the new syntax, you would do something like this:

1. grid-start: 2;
2. grid-end: 3;
3. grid-before: 3;
4. grid-after: 5;

Or, with shorthands:

1. grid-column: 2 3;
2. grid-row: 3 5;

Or, with grid-area:

1. grid-area: 3 2 5 3;

Please note that the syntax is in serious flux right now, and all of the above might change. Proponents of the new syntax argue that print-based grids are often line-based, not row/column based, and that this new model gives even more power and flexibility when using media queries to switch grids around. However, you can also just ignore the line-based properties and stick with grid-row and grid-column, which will let you pretend that it's still rows and columns. On the other hand, proponents of the older syntax say that everyone thinks about grids in rows, columns and spanning widths and heights, just like we did with tables before CSS came along. Where do you stand?

There is also a number of other issues the CSS WG needs your feedback on as well, so don’t hesitate to do so!

W3C plans to unify testing resources across WGs

W3C test suites are necessary to ensure specifications are implementable, and a spec cannot move forward without enough tests. A lack of tests is currently one of the main bottlenecks that keeps specifications from advancing.

W3C is becoming systematic about tests and implementing a plan to unify testing resources and methodologies across working groups, which will decrease effort and increase quality across groups, making it faster to test specs and closing the gaps in testing that exist between the boundaries of different WGs. For example, HTML and SVG are technologies that often interact but there are few tests for that kind of interaction. A shared methodology will improve things like that.

In addition, to facilitate this philosophy, there is now a Github test repository which is currently used by the WebApps WG, DAP WG and HTML WG and more groups are joining by the day. Given how Github makes collaboration easier, hopefully this will lead to more test contributions as well. On the plus side, it’s something everyone could help with.

Discussions spark on native lazy loading for images

Jake Archibald has been leading a fascinating discussion in the W3C bug tracker about finding a way to opt-in to lazy loading for images. In this context, lazy loading means that the browser should avoid loading images until they are really needed, i.e. not when they are hidden through CSS or out of the current viewport. This will enables us to do a number of cool things, including:

• We’ll be able to conserve bandwidth by loading fewer unnecessary images
• We’ll be able to prioritize image loading so that the most crucial images (e.g. toolbar icons) load first.

So far it looks like syntax-wise, it’s going to be implemented with a new attribute on <img>. Suggested names include defer, async, lazy, late, jit and others.

FPWD of CSS Overflow

CSS Overflow is a new draft, aiming to extend the overflow capabilities of CSS beyond the overflow-x and overflow-y properties. Specifically, it will allow us to use different mechanisms for overflow beyond scrolling, like pagination. I’m very excited about this spec, because I’ve personally needed this functionality for a long time. It’s incredibly useful for a number of cases, like designing web pages to mimic documents (e.g. a word processor web app or a document where you want to have consistent pagination in both the screen and print versions).

You might be wondering “isn’t this what CSS Regions are supposed to do?”. I know I did when I first saw CSS Overflow. The main difference is that CSS Regions flow into predefined areas that are already in the HTML and might be completely different from each other, whereas CSS Overflow generates new areas ("fragments") that mimic the original container and are not reflected in the HTML.

We even get ::nth-fragment() pseudo elements to style different fragments in a different way, which could be used for a number of cool things. One kind of hacky use case I can think of right now is using these to emulate ::nth-line pseudo elements by having an initial container that has a height equal to the line-height, so that every fragment is a new line we can target separately.

New WD of Clipboard APIs

Clipboard APIs are fascinating. I recently used this on Dabblet, to fix multiple clipboard bugs, since with it you have full access to what’s being pasted, cut or copied in multiple formats. So, I’m quite glad to see this spec advancing and I can’t wait for it to reach CR. The most significant changes in this new WD are that the beforecut, beforecopy and beforepaste events that were long supported by IE, are now added to the specification.

New Working Draft of SVG 2

SVG 2 is the next major version of SVG. It includes a ton of new features since SVG 1.1 like non-scaling strokes, improved compositing and blending, improved accessibility through ARIA attributes, and the first beginnings of mesh gradients! It also factors out all the features that have now been put into CSS, making it a leaner, cleaner spec. One of its aims is to solve all our gripes with modern SVG, like hassles with namespaces and quirks with using it in HTML and CSS, and to tighten up the language and improve the test suites to reduce browser bugs. On April 9th, a new WD was published with a number of small fixes and improvements, so it’s great to see that this is moving forward.

CSS Conditionals go to CR

CSS Conditionals is the document specifying the @supports rule, also known as native Modernizr functionality in CSS stylesheets. In April 4th, this has been published as a Candidate Recommendation, which means it’s mostly done and is now waiting for implementations and tests. Since there are already three implementations (Firefox 21, Chrome 28 and Opera 12.1), basically what’s needed to advance to Proposed Recommendation is to make sure these are interoperable, which means lots of tests! There have been many small changes and fixes to both the wording of the document and the syntax of these rules in this new publication, but nothing huge you need to be concerned about.

API for Media Resources 1.0 is having its 3rd Last Call

While some would argue that you can’t have multiple “last” anything, sometimes multiple Last Calls are inevitable. The Media Annotations WG resolved to publish a 3rd Last Call WD of the API for Media Resources spec, which is going to be an API to extract metadata (e.g. EXIF data) from images, videos and other media. These metadata could range from creator name, or date taken to model and make of capture equipment. This LC is pretty short and expires on May 3rd, so if you want to send feedback, don’t delay it!

New WD of CSS Custom Properties for Cascading Variables

Variables in CSS is one of the top requests that the CSS WG gets. Currently developers have to resort to preprocessors to get this functionality, but the CSS Custom Properties for Cascading Variables spec is hoping to change that and get something similar baked straight into native CSS. The latest Working Draft, published in March, includes tons of changes, almost in every paragraph. Here are a few:

• The wording has been changed to refer to these as custom properties instead of variables, but don’t worry too much about that: The functionality is pretty much the same.
• The var- prefix is now case sensitive and needs to always be in lowercase
• Values of these custom properties can now have !important. This applies to the way the cascade works for these custom properties, not to the declarations where their values are used.
• It was made clear that even if the value is invalid, it should be retained in the CSS object model and read/written by JavaScript.

Starting CSS Color Level 4

Tab Atkins of Google recently made an Editor’s Draft for the next Level of CSS Color, including a few nice small usability fixes and features:

• Usability fixes like allowing non-integer values for rgb(a)/hsl(a) color components, angles for hues and percentages for opacity values.
• The highly requested 4 and 8 digit hex codes, to allow for transparency
• Support for color correction, ICC profiles and Lab colors is also being discussed. If you have an opinion about whether they would or wouldn’t be useful, feel free to weigh in!

Web Storage becomes a Proposed Recommendation

If you're a front-end developer, you've probably used localStorage... what, you haven't? Go learn to use it right now! The W3C specification defining localStorage and sessionStorage is Web Storage and it recently reached Proposed Recommendation status, just one step before Recommendation. Like most transitions from CR to PR, no changes were made.

Goodbye CSS Marquee, you won’t be missed

CSS Marquee was a draft that predated CSS Animations and attempted to recreate the effect of <marquee> in pure CSS. It has been partially implemented by Opera (Presto) and WebKit. However, CSS Animations rendered it obsolete a while ago and it hadn’t been worked on for a long time. In a recent CSS WG call, it was decided that the final nail would be put on its coffin: It will be converted to a W3C Note. W3C Notes are only informative, intended for user documentation, use cases and requirements, and so on... so when a spec is published as a Note, it means the Working Group is discouraging implementation. Sometimes Notes are temporarily “parked” as a Note, like DOM3 Events was back in 2001... but mostly, Notes are where specs go to die.

Thanks to Doug Schepers for his invaluable feedback and corrections and to Tab Atkins for his feedback on the Grid Layout section

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, blogging, speaking, writing, and coding popular open source projects to help fellow developers.