RE: [css3-background] background-position relative to other corners

Eric A. Meyer wrote:

> At 10:03 AM -0700 1/29/08, Alan Gresley wrote:
> 
> >Giving the 'background-origin' property an extra value. This does make sense.
> 
>     Another possibility is to rename what's now 'background-origin' to 
> 'background-edge' or 'background-bound' (which seems to be what it's 
> really about) and then have a brand-new 'background-origin' that is 
> actually used to define the origin corner.  The horizontal and 
> vertical offset values defined in 'background-position' would then be 
> calculated from the corner defined in 'background-origin', which 
> would default to 'top left' or 'top-left' or whatever.
> 
> -- 
> Eric A. Meyer (eric@meyerweb.com)     http://meyerweb.com/

Hi Eric

The new value for background-origin could be what I think Fantasai was suggesting here. 

http://lists.w3.org/Archives/Public/www-style/2008Jan/0609.html

and leaving my initial proposal of allowing the 'background-position' property with 4 values for CSS4. Part of my reply to Fantasai which you are now replying to was:

> Thank you. I prefer rect() too. As I understand it, this:

> background-position: rect(0 0 0 0);
> will be:
> background-origin: rect(0 0 0 0);


'background-origin' already has the values 'border', 'padding' and 'content' and the new value would be 'rect'. My initial proposal of allowing the 'background-position' property with 4 values is shown in these linked test cases.
 
http://css-class.com/test/css/backgrounds/background-position-and-size1.htm
http://css-class.com/test/css/backgrounds/background-position-and-size2.htm


Moving on to progressive enchantment using CSS3. Eric, adding new background properties doesn't aid authors to use progressive enhancement. Looking at what is supported:

E {background: url(a.png), url (b.png);} /* Safari 3 */

E {background: url(a.png) (100% 100%);} /* Not supported */
or
E {-UAprefix-background-size: 100% 100%;} /* Safari 3 and Opera 9.5 */

E {background: hsla(100, 50%, 50%, 0.5);} /* Safari 3 and Gecko 1.9 */


Most of the properties is this wonderful CSS3 which is going to be difficult for authors to implement when mixed in together. I and others may be able figure out how to achieved this, but many authors will look at these crazy workarounds and say this is all to much to figure out and just stick with plain old CSS2.1.


Both Safari 3 and Opera 9.5 will use

-webkit-background-size: 100% 100%;-o-background-size: 100% 100%;


but all browsers (that I have tested) will ignore this, which they should if they parse it correctly.

background: (100% 100%);


So please can UA that support background-size with prefixes currently just honor this.

E {background: url(a.png) (100% 100%);} /* Safari 3 and Opera 9.5 hopefully soon */


so I can go

E {background: url(wide.jpg) center;} /* all browser */
E {background: url(wide.jpg) (100% 100%);} /* no support yet */
E {background: url(transparent.png) (100% 100%);} /* no support yet */
E {background: url(transparent.png), hsla(100, 50%, 50%, 0.5);} /* Safari 3 */
E {background: url(transparent.png) (100% 100%), hsla(100, 50%, 50%, 0.5);} /* no support yet */


It would make it so much simpler. Here is a test case.

http://css-class.com/test/css/backgrounds/multiple-hsla-backgound.htm

Test 1: all browsers support alpha transparency.
Test 2: Safari 3.
Test 3: Gecko 1.9 and Opera 9.5[*].
Test 4: Safari 3.
Test 5: various support across browsers.
Test 6: Safari 3.

* Opera 9.5 fails test 3 since the whole declaration should be dropped.

http://lists.w3.org/Archives/Public/www-style/2008Feb/0237.html


I haven't even added my text-shadow and box-shadow to this mix but if I did at least I could support Safari 3 :-)


@IE team, considering what is now possible (in at least Safari), please understand why I am strongly desiring  a default IE8 standard mode. :-)


Alan

http://css-class.com/

Received on Thursday, 28 February 2008 09:04:26 UTC