W3C home > Mailing lists > Public > site-comments@w3.org > May 2012

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

From: Joe Thomas <joethomas@motorola.com>
Date: Thu, 31 May 2012 05:54:06 +0000
Message-Id: <CAETFwdDUOhrEpKJ7nKv3HTEu9N3PUHxfGRdkF=xUOBM0UJgWjg@mail.gmail.com>
To: site-comments@w3.org
Hello,

My name is Joe Thomas. I sent the below query to www-style@w3.org on May 23, but the query is not yet available on the public forum. Could you please take a look at it ?

Thanks
Joe Thomas
Motorola Mobility Inc.,
Sunnyvale, CA.


---------- Forwarded message ----------
From: <www-style-request@w3.org>
Date: Wed, May 23, 2012 at 2:14 PM
Subject: Re: [css-background] Order of properties in background shorthand
To: joethomas@motorola.com


*** NOTE: ***

   Your message was sent from an address which is not on the list
   of people who are authorized to post to this mailing list.
   Therefore, your message has been forwarded to the list maintainer
   for manual processing.

   If you do not see your message appear on the list or in the
   mailing list archives within a few business days, you may wish
   to contact the mailing list maintainer to investigate the delay.

   -- W3C Postmaster
      http://www.w3.org/Mail/

your message follows:
----------------------------------------------------------------------------

--e89a8fb1edf8b82f4004c0a9592f
Content-Type: text/plain; charset=ISO-8859-1

Hi,

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-propertiesfor
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?


Thanks
Joe Thomas

--e89a8fb1edf8b82f4004c0a9592f
Content-Type: text/html; charset=ISO-8859-1
Content-Transfer-Encoding: quoted-printable

<span style=3D"color:rgb(0,0,0);font-family:arial;font-style:normal;font-va=
riant:normal;font-weight:normal;letter-spacing:normal;line-height:normal;te=
xt-align:-webkit-auto;text-indent:0px;text-transform:none;white-space:norma=
l;word-spacing:0px;font-size:small;display:inline!important;float:none">Hi,=
</span><div style=3D"color:rgb(0,0,0);font-family:arial;font-style:normal;f=
ont-variant:normal;font-weight:normal;letter-spacing:normal;line-height:nor=
mal;text-align:-webkit-auto;text-indent:0px;text-transform:none;white-space=
:normal;word-spacing:0px;font-size:small">
<br></div><div style=3D"color:rgb(0,0,0);font-family:arial;font-style:norma=
l;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:=
normal;text-align:-webkit-auto;text-indent:0px;text-transform:none;white-sp=
ace:normal;word-spacing:0px;font-size:small">
I would like to discuss about the order of CSS properties in background sho=
rthand.</div><div style=3D"color:rgb(0,0,0);font-family:arial;font-style:no=
rmal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-heig=
ht:normal;text-align:-webkit-auto;text-indent:0px;text-transform:none;white=
-space:normal;word-spacing:0px;font-size:small">
<br></div><div style=3D"color:rgb(0,0,0);font-family:arial;font-style:norma=
l;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:=
normal;text-align:-webkit-auto;text-indent:0px;text-transform:none;white-sp=
ace:normal;word-spacing:0px;font-size:small">
A bit about the context:<br>Currently getComputedStyle of background shorth=
and property in webkit does not return=A0the three properties newly added t=
o the background shorthand in CSS3 namely background-size, background-origi=
n and background-clip. We are in the process of adding support for these th=
ree properties in getComputedStyle as part of=A0<a href=3D"https://bugs.web=
kit.org/show_bug.cgi?id=3D86155">https://bugs.webkit.org/show_bug.cgi?id=3D=
86155</a></div>
<div style=3D"color:rgb(0,0,0);font-family:arial;font-style:normal;font-var=
iant:normal;font-weight:normal;letter-spacing:normal;line-height:normal;tex=
t-align:-webkit-auto;text-indent:0px;text-transform:none;white-space:normal=
;word-spacing:0px;font-size:small">
<br></div><div style=3D"color:rgb(0,0,0);font-family:arial;font-style:norma=
l;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:=
normal;text-align:-webkit-auto;text-indent:0px;text-transform:none;white-sp=
ace:normal;word-spacing:0px;font-size:small">
The order of =A0the properties in background shorthand as per CSS3 specific=
ation=A0<a href=3D"http://www.w3.org/TR/css3-background/#the-background">ht=
tp://www.w3.org/TR/css3-background/#the-background</a> is =A0&lt;bg-image&g=
t; || &lt;bg-position&gt; [ / &lt;bg-size&gt; ]? || &lt;bg-repeat&gt; || &l=
t;bg-attachment&gt; || &lt;box&gt;{1,2} || &lt;bg-color&gt;</div>
<div style=3D"color:rgb(0,0,0);font-family:arial;font-style:normal;font-var=
iant:normal;font-weight:normal;letter-spacing:normal;line-height:normal;tex=
t-align:-webkit-auto;text-indent:0px;text-transform:none;white-space:normal=
;word-spacing:0px;font-size:small">
<br></div><div style=3D"color:rgb(0,0,0);font-family:arial;font-style:norma=
l;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:=
normal;text-align:-webkit-auto;text-indent:0px;text-transform:none;white-sp=
ace:normal;word-spacing:0px;font-size:small">
The above order is different from the order mentioned in CSS2.1 specificati=
on <a href=3D"http://www.w3.org/TR/CSS21/colors.html#background-properties"=
>http://www.w3.org/TR/CSS21/colors.html#background-properties</a> for the s=
ame properties, which is =A0&lt;bg-color&gt; ||=A0&lt;bg-image&gt; || &lt;b=
g-repeat&gt; || &lt;bg-attachment&gt;=A0|| &lt;bg-position&gt;=A0</div>
<div style=3D"color:rgb(0,0,0);font-family:arial;font-style:normal;font-var=
iant:normal;font-weight:normal;letter-spacing:normal;line-height:normal;tex=
t-align:-webkit-auto;text-indent:0px;text-transform:none;white-space:normal=
;word-spacing:0px;font-size:small">
<br></div><div style=3D"color:rgb(0,0,0);font-family:arial;font-style:norma=
l;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:=
normal;text-align:-webkit-auto;text-indent:0px;text-transform:none;white-sp=
ace:normal;word-spacing:0px;font-size:small">
If the UAs started generating background shorthand property as per CSS3 spe=
c, 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 tha=
t 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 s=
horthand gets changed to CSS2.1 order followed by three properties newly in=
troduced 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 t=
he end. This will help us to maintain backward compatibility. Latest Opera =
Browser (v 11.64) generates background shorthand value in getComputedStyle =
in this order.=A0So the below order will be helpful in maintaining backward=
 compatibility with older UAs</div>
<div style=3D"color:rgb(0,0,0);font-family:arial;font-style:normal;font-var=
iant:normal;font-weight:normal;letter-spacing:normal;line-height:normal;tex=
t-align:-webkit-auto;text-indent:0px;text-transform:none;white-space:normal=
;word-spacing:0px;font-size:small">
<br></div><div style=3D"color:rgb(0,0,0);font-family:arial;font-style:norma=
l;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:=
normal;text-align:-webkit-auto;text-indent:0px;text-transform:none;white-sp=
ace:normal;word-spacing:0px;font-size:small">
&lt;bg-color&gt; ||=A0&lt;bg-image&gt; || || &lt;bg-repeat&gt; || &lt;bg-at=
tachment&gt; ||=A0&lt;bg-position&gt; [ / &lt;bg-size&gt; ]?=A0&lt;box&gt;{=
1,2}</div><div style=3D"color:rgb(0,0,0);font-family:arial;font-style:norma=
l;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:=
normal;text-align:-webkit-auto;text-indent:0px;text-transform:none;white-sp=
ace:normal;word-spacing:0px;font-size:small">
<br></div><div style=3D"color:rgb(0,0,0);font-family:arial;font-style:norma=
l;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:=
normal;text-align:-webkit-auto;text-indent:0px;text-transform:none;white-sp=
ace:normal;word-spacing:0px;font-size:small">
Could you please let us know your thoughts on this?<br><br><br>Thanks<br>Jo=
e Thomas<br></div>

--e89a8fb1edf8b82f4004c0a9592f--
Received on Thursday, 31 May 2012 12:32:10 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 24 October 2012 16:21:34 GMT