Background module supported; vendors ditch prefixes

I just finished my CSS3 background tests, and I’m happy to report that all browsers but one now support the module very well. Also, I’m pleased to report that all browser vendors but one have ditched the vendor prefixes and now support the pure, correct CSS3 properties.

All browsers but one. If you guess that that one browser is IE, you’ve guessed wrong. It’s Firefox.

In the latest crop of browsers, this is the situation:

These new facts have not been added to the CSS compatibility table yet; the series of tests is supposed to be a step towards updating that table, but so much has happened in the background module that it’s worth early publication and a separate entry.

Local background images

I’m extremely, extraordinarily pleased by the fact that all browsers save Firefox now support background-attachment: local. This value makes the background image scroll with the element.



I discovered the need for this value back in 2002, and published about it when I unveiled back in October 2003. Moving at a brisk pace, W3C and the browsers have implemented it within seven years.

Pretty soon I’m going to argue that position needs a fifth value. If we take local backgrounds as a precedent, this fifth value will be implemented in 2017.

Transparent borders

Web designers will want to look into transparent borders. Some new background properties, notably background-clip: padding-box only make sense when the element’s borders are in fact transparent. The test page allows you to toggle the border colour.

I’m not totally sure what the use of all of this is, but then I’m not a designer and I’m usually very bad at estimating the design impact of new properties such as this one.

Vendor prefixes

Finally, the latest crop of browsers gives completely unexpected support to my contention that vendor prefixes should be abolished. I published that thought back in March, and within 24 hours Eric Meyer, Andy Clarke, Jonathan Snook, and Stephen Hay told me I was wrong. Vendor prefixes may not be beautiful, but they’re necessary. As a result, I backtracked.

Now, however, I find that Microsoft, Apple, Google, and Opera have decided to ditch all vendor prefixes in the background module (although an oversight allows one -webkit- instance to survive for the moment).

If you’re still wondering what my gripe with vendor prefixes is, take a look at the test page. I have to repeat all of my tests for all of the vendor prefixes, and so do you when you actually want to use it in a live site.

Does that mean I’m right after all? I can’t say for sure. The spec is in Last Call, but that doesn’t mean it’s a recommendation yet, and as far as I understand prefixes should only be ditched when a spec is in fact a recommendation.

Still, the very same crop of browsers that ditched the background-related vendor prefixes maintains them for box-sizing, even though the meaning of this property has been stable for years. Only IE9 preview 3 uses the pure declaration.

So all in all the fact that the background vendor prefixes have been removed does not prove that I was right. Pity, but I guess I’ll survive.

This is the blog of Peter-Paul Koch, web developer, consultant, and trainer. You can also follow him on Twitter or Mastodon.
Atom RSS

If you like this blog, why not donate a little bit of money to help me pay my bills?



Comments are closed.

1 Posted by David Storey on 24 June 2010 | Permalink

We didn't remove our prefixes as we thought you were right, or prefixes are wrong. We simply never used them for backgrounds and borders in the first place, except a couple of properties. We decided to implement the properties when we felt they were stable and wouldn't change (drastically). As they were stable, we received word of that effect from those in the working group, and the spec was (or was close to) CR, we implemented them prefixless, which is the correct thing to do. The spec isn't in CR any longer, but I believe that is due to adding box-shadow back in the spec, and I'd expect it to return to CR fairly soon.

box-sizing is still in a spec which isn't stable, so it still has the prefix. The same for things like Transitions and Transforms.

2 Posted by Dirk on 24 June 2010 | Permalink

I instantly see uses for transparent borders:

toggle borders on :hover without changing the document-flow.

Margins collapse, borders won't.

3 Posted by GreLI on 24 June 2010 | Permalink

AFAIK, prefixes must be abandoned when Candidate Recommendation stage is reached.

4 Posted by Matt Brubeck on 24 June 2010 | Permalink

These properties are also unprefixed in Firefox 4 nightly builds since June 8, 2010. See for example. Just like Opera, Mozilla did because because a Candidate Recommendation was published for these properties. After the CR, the spec was republished as LC:

This was been CSS WG policy since long before your call to "abolish" vendor prefixes. "Does that mean I’m right after all? I can’t say for sure." Well, it should be obvious that the browser vendors have not changed their position, since they still use vendor prefixes for the many properties that have not reached CR.

5 Posted by Michael Kozakewich on 24 June 2010 | Permalink

Regarding prefixes, it's not an all-or-nothing matter. The vendor prefixes are good, but when they come into heavy use (such as with border-radius) and are relatively unchanging, the prefixes should be ditched.

So, what they're doing right now, but earlier.

6 Posted by Barryvan on 25 June 2010 | Permalink

I'm curious: why do you include IE9p3, but not Fx3.7a5? I'd be interested in seeing the results of 3.7's support; after all, we're more likely to be able to actually make use of these abilities in non-IE browsers, as there's generally a better upgrade take-up.

7 Posted by Mark on 25 June 2010 | Permalink

It was strange, but when I went to this test page in Opera 10.53 the tests failed, but when I upgraded to 10.54 they worked. I noticed you did the tests (according to the chart) in 10.53. Not sure what this means...

8 Posted by Jason on 28 June 2010 | Permalink

Another case for the background-clip property is for borders such as double, dotted, and dashed. The background color shows through the empty areas of these border styles. Background-clip will allow us to control whether we want the element background to show here, or the element's parent's background to show.