Re: About multiple backgrounds' syntax

On Tuesday 21 April 2009, L. David Baron wrote:
> On Monday 2009-04-20 10:07 +0200, Daniel Glazman wrote:
> > http://twitter.com/Hixie/status/1561236395
> >
> > I have to agree with Hixie: this is one of the poorest
> > syntaxes ever designed in the WG. So unintuitive.
>
> I agree.  I think the '/' (which was what was in the draft for five
> years or so) was a bit better, at least, and if we keep the feature
> I'd prefer we revert to that and do what I suggested in
> http://lists.w3.org/Archives/Public/www-style/2009Feb/0553.html ,
> which I don't think removes any features that we should care about
> keeping, since I don't think it makes sense to use '/' as a
> delimiter when the things on one side of it aren't there.
>
> -David

I don't know what I prefer yet, just trying out some syntax...

If the syntax in the draft[1] is #0 and the two in my previous mail[2] 
are #1 and #2, then here are syntaxes #3 and #4.

Assuming

  - size can only occur in the background shorthand immediately after
    position, as David Baron prefers;

  - fallback color is attached (with a "/") to the background image it
    is a fallback for, rather than to the background color;

then, omitting 'inherit' and 'initial' as usual,

[syntax #3]

    background: [ <bg-layer> , ]* <final-bg-layer>;

    <bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? ||
      <repeat> || <attachment> || <bg-origin> || no-clip;

    <final-bg-layer> = <'bg-image'> [ / <color> ]? ||
      <bg-position> [ / <bg-size> ]? || <repeat> || <attachment> ||
      <bg-origin> || no-clip || <'background-color'>;

    background-image: <bg-image> [ , <bg-image> ]* [ / <color> ]?;

    <bg-image>: <image> | none;

    background-color: <color>;

Examples:

    background-image: url(first.png), url(second.png) / yellow;
    background-position: 0 0, bottom right;
    background-size: 10% 10%, cover;
    background: url(first.png) 0 0 / 10% 10%,
      url(second.png)/yellow bottom right / cover;



The two slashes are maybe not so nice, especially as one means "or" and 
the other "and." So here is a variant with parentheses (Anne van 
Kesteren's old proposal):

[syntax #4]

    background: [ <bg-layer> , ]* <final-bg-layer>;

    <bg-layer> = <bg-image> || <bg-position> || ( <bg-size> ) ||
      <repeat> || <attachment> || <bg-origin> || no-clip;

    <final-bg-layer> = <'bg-image'> [ / <color> ]? ||
      <bg-position> || ( <bg-size> ) || <repeat> || <attachment> ||
      <bg-origin> || no-clip || <'background-color'>;

    background-image: <bg-image> [ , <bg-image> ]* [ / <color> ]?;

    <bg-image>: <image> | none;

    background-color: <color>;

Examples:

    background-image: url(first.png), url(second.png) / yellow;
    background-position: 0 0, bottom right;
    background-size: 10% 10%, cover;
    background-repeat: no-repeat, no-repeat;
    background: url(first.png) (10% 10%) no-repeat,
      url(second.png)/yellow (cover) bottom right no-repeat;



[1] http://www.w3.org/TR/2008/WD-css3-background-20080910/
[2] http://lists.w3.org/Archives/Public/www-style/2008Dec/0061.html
[3] http://www.w3.org/Style/CSS/Tracker/issues/63



Bert

PS. This contributes to ISSUE-63 [3] and ACTION-105

-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Wednesday, 22 April 2009 15:48:09 UTC