I'm writing a CSS book

JavaScript archives Compatibility Thidrekssaga QuirksBlog Donations CSS book Politics Mobile About COH

contact

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:

• IE9 preview 3 supports everything except border-image.
• Opera 10.53 supports everything, except that it has issues with background-clip.
• Safari 5 and Chrome 5 support everything, except that they interpret background-repeat: round and space as no-repeat, and that they have forgotten to remove the vendor prefix from background-clip: content-box. (padding-box works fine without prefix. Go figure.)
• Firefox 3.6.3, unfortunately, does not support background-attachment: local, the new background-repeat values, background-clip, and background-origin, and uses vendor prefixes for what it does support.

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 QuirksMode.org 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.

Comments

Comments are closed.