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:
border-image
.background-clip
.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.)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.
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.
Scrollable
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.
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.
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?
Categories:
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 http://bugzil.la/549809 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:
http://lists.w3.org/Archives/Public/www-style/2010Jun/0341.html
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.