W3C home > Mailing lists > Public > www-style@w3.org > May 2012

RE: [css-background] Order of properties in background shorthand

From: Brian Manthos <brianman@microsoft.com>
Date: Thu, 31 May 2012 19:50:36 +0000
To: Joe Thomas <joethomas@motorola.com>, "www-style@w3.org" <www-style@w3.org>
Message-ID: <4031779A10373C4AB7B9FBAD218A8BAC0824C59C@CH1PRD0310MB391.namprd03.prod.outlook.com>
Examples would help make sure I'm understanding the IE6 concern properly.

That said, my impression is that you're asking/expecting pre-CSS3 browsers to read something like...
                background: red content-box;

... and treat it as ...
                background: red;

This is incorrect IMO.

The markup should be something more like...
/* red for old browsers */
                background: red;
/* fancier content-box origin & clip red for CSS3 browsers */
                background: red content-box;


From: Joe Thomas [mailto:joethomas@motorola.com]
Sent: Wednesday, May 23, 2012 2:15 PM
To: www-style@w3.org
Subject: [css-background] Order of properties in background shorthand


I would like to discuss about the order of CSS properties in background shorthand.

A bit about the context:
Currently getComputedStyle of background shorthand property in webkit does not return the three properties newly added to the background shorthand in CSS3 namely background-size, background-origin and background-clip. We are in the process of adding support for these three properties in getComputedStyle as part of https://bugs.webkit.org/show_bug.cgi?id=86155

The order of  the properties in background shorthand as per CSS3 specification http://www.w3.org/TR/css3-background/#the-background is  <bg-image> || <bg-position> [ / <bg-size> ]? || <bg-repeat> || <bg-attachment> || <box>{1,2} || <bg-color>

The above order is different from the order mentioned in CSS2.1 specification http://www.w3.org/TR/CSS21/colors.html#background-properties for the same properties, which is  <bg-color> || <bg-image> || <bg-repeat> || <bg-attachment> || <bg-position>

If the UAs started generating background shorthand property as per CSS3 spec, that makes it harder for older UAs that supports only CSS2.1 spec (like IE6) to parse these generated results. Also from my testing, I observed that IE6 fails to parse the background shorthand if the order is mentioned as per CSS3 spec. On the other hand if the order of properties in background shorthand gets changed to CSS2.1 order followed by three properties newly introduced in CSS3, older UAs like IE6 can parse all the properties mentioned in CSS2.1 correctly and it ignores the new properties which are added at the end. This will help us to maintain backward compatibility. Latest Opera Browser (v 11.64) generates background shorthand value in getComputedStyle in this order. So the below order will be helpful in maintaining backward compatibility with older UAs

<bg-color> || <bg-image> || || <bg-repeat> || <bg-attachment> || <bg-position> [ / <bg-size> ]? <box>{1,2}

Could you please let us know your thoughts on this?

Joe Thomas
Received on Thursday, 31 May 2012 19:51:29 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:17 UTC