[css-backgrounds] background-position as a shorthand for x and y

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|

[css-backgrounds] background-position as a shorthand for x and y

Greg Whitworth
Hello,

We would like to standardize background-position-x and background-position-y which is currently supported by Blink, Webkit, Trident and Edge. This would need for the spec to reference background-position as a shorthand for the longhands of background-position-x and background-position-y, also the addition of these longhands.

Here is a simple testcase: http://jsbin.com/wabewoxibe/edit?html,css,output

Thanks,
Greg

Reply | Threaded
Open this post in threaded view
|

Re: [css-backgrounds] background-position as a shorthand for x and y

Marat Tanalin | tanalin.com
03.08.2015, 02:50, "Greg Whitworth" <[hidden email]>:
> Hello,
>
> We would like to standardize background-position-x and background-position-y which is currently supported by Blink, Webkit, Trident and Edge. This would need for the spec to reference background-position as a shorthand for the longhands of background-position-x and background-position-y, also the addition of these longhands.
>
> Here is a simple testcase: http://jsbin.com/wabewoxibe/edit?html,css,output

Actually, background-position-x/-y have already been decided to be standardized [1] (see "Add -x/-y longhands to background-* properties" section).

But looks like there is unfortunately no progress since then.

[1] https://lists.w3.org/Archives/Public/www-style/2014Apr/0188.html

Reply | Threaded
Open this post in threaded view
|

RE: [css-backgrounds] background-position as a shorthand for x and y

Greg Whitworth
> Actually, background-position-x/-y have already been decided to be
> standardized [1] (see "Add -x/-y longhands to background-* properties"
> section).
>
> But looks like there is unfortunately no progress since then.
>
> [1] https://lists.w3.org/Archives/Public/www-style/2014Apr/0188.html

I thought we had talked about it at some point, they all seem to blur together anymore. So let's just consider this a slight nudge then to the editors :)

Greg

Reply | Threaded
Open this post in threaded view
|

Re: [css-backgrounds] background-position-x/y and logical positioning

fantasai
On 08/02/2015 10:27 PM, Greg Whitworth wrote:

>> Actually, background-position-x/-y have already been decided to be
>> standardized [1] (see "Add -x/-y longhands to background-* properties"
>> section).
>>
>> But looks like there is unfortunately no progress since then.
>>
>> [1] https://lists.w3.org/Archives/Public/www-style/2014Apr/0188.html
>
> I thought we had talked about it at some point, they all seem to blur
> together anymore. So let's just consider this a slight nudge then to
> the editors :)

Dropped in a (very) rough draft into backgrounds-4:
   https://drafts.csswg.org/css-backgrounds-4/#the-background-position

The tricky part about this (and therefore the reason we didn't have it
earlier) is the interaction with logical positions. Tab had a proposal
for handling this. What's I drafted up is mostly the same, but I changed
some of the keywords to make it a little easier to follow the expansions.

The <position> syntax now works like this:

A) Physical Directions Only

    Same syntax as Level 3, roughly
      <x-keyword> <offset>? <y-keyword> <offset>?
    where <x-keyword> is [ left | right | center ]
    and <y-keyword> is [ top | bottom | center ]
    and <offset> is [ <length> | <percentage> ]

    Assigns into background-position-x and background-position-y.

B) Flow-relative Directions Only

    <logical-keyword> <offset>? <logical-keyword> <offset>?
    where <logical-keyword> is [ start | center | end ]

    Assigns into background-position-inline and background-position-block.

C) Logical/Physical Mix

    Expands <x-keyword> and <y-keyword> with axis-constrained logical variants:

      <x-keyword> <offset>? <y-keyword> <offset>?
    where <x-keyword> is [ left | right | center | x-start | x-end ]
    and <y-keyword> is [ top | bottom | center | y-start | y-end ]

    Assigns into background-position-x and background-position-y.

Examples:

   background-position: top left;
   /* top left corner */

   background-position: start start;
   /* block-start inline-start corner */

   background-position: x-start top;
   /* top left in English, top right in Hebrew, top right in Japanese */

Tab's original proposal used unprefixed 'start' and 'end' for C (mixed)
and 'block-'/'inline-' prefixed keywords for B (pure logical). This made
assignments in the mixed case a bit hard to follow, and purely logical
positions very verbose. Using x-start/y-start variants makes it easier
to follow what's getting assigned into what, and the 'start start'
syntax follows the way we're handling border-radius longhands.

That said I'm not averse to expanding out case B with prefixes as Tab
originally suggested, at least in the shorthand. It will be more explicit;
but it's also more verbose and the keywords won't quite match their form
in the longhand.

(I'd prefer to avoid redundancies like 'background-position-block: block-start'.)

~fantasai

Reply | Threaded
Open this post in threaded view
|

Re: [css-backgrounds] background-position-x/y and logical positioning

Marat Tanalin | tanalin.com
14.08.2015, 23:27, "fantasai" <[hidden email]>:

> On 08/02/2015 10:27 PM, Greg Whitworth wrote:
>>>  Actually, background-position-x/-y have already been decided to be
>>>  standardized [1] (see "Add -x/-y longhands to background-* properties"
>>>  section).
>>>
>>>  But looks like there is unfortunately no progress since then.
>>>
>>>  [1] https://lists.w3.org/Archives/Public/www-style/2014Apr/0188.html
>>
>>  I thought we had talked about it at some point, they all seem to blur
>>  together anymore. So let's just consider this a slight nudge then to
>>  the editors :)
>
> The tricky part about this (and therefore the reason we didn't have it
> earlier) is the interaction with logical positions.


It would probably make sense first JUST to standardize what all browsers except for Firefox ALREADY support, and then add brand new features like `x-start` (which NO browser supports yet).

The only reason why `background-position-x/-y` (in their state already implemented in other browsers) is not implemented in Firefox/Gecko [1] is JUST because the feature was nonstandard. And it unlikely makes sense to postpone mostly supported functionality for years due to that absolutely unsupported new features are not yet ready to become standard.

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=550426

Reply | Threaded
Open this post in threaded view
|

Re: [css-backgrounds] background-position-x/y and logical positioning

fantasai
On 08/14/2015 05:12 PM, Marat Tanalin wrote:

>
> It would probably make sense first JUST to standardize what all browsers
> except for Firefox ALREADY support, and then add brand new features like
> `x-start` (which NO browser supports yet).
>
> The only reason why `background-position-x/-y` (in their state already
> implemented in other browsers) is not implemented in Firefox/Gecko [1]
> is JUST because the feature was nonstandard. And it unlikely makes sense
> to postpone mostly supported functionality for years due to that absolutely
> unsupported new features are not yet ready to become standard.

The reason we've held off on standardizing this feature is because we didn't
have a way to make it compatible with logical keywords, which we knew we
wanted to have. So that is why we need to solve these together: we need a
solution that can solve both problems.

~fantasai

Reply | Threaded
Open this post in threaded view
|

Re: [css-backgrounds] background-position-x/y and logical positioning

Marat Tanalin | tanalin.com
15.08.2015, 19:34, "fantasai" <[hidden email]>:

> On 08/14/2015 05:12 PM, Marat Tanalin wrote:
>>  It would probably make sense first JUST to standardize what all browsers
>>  except for Firefox ALREADY support, and then add brand new features like
>>  `x-start` (which NO browser supports yet).
>>
>>  The only reason why `background-position-x/-y` (in their state already
>>  implemented in other browsers) is not implemented in Firefox/Gecko [1]
>>  is JUST because the feature was nonstandard. And it unlikely makes sense
>>  to postpone mostly supported functionality for years due to that absolutely
>>  unsupported new features are not yet ready to become standard.
>
> The reason we've held off on standardizing this feature is because we didn't
> have a way to make it compatible with logical keywords, which we knew we
> wanted to have. So that is why we need to solve these together: we need a
> solution that can solve both problems.

You would probably unlikely want to spec an absolutely new `background-position-x/-y` variant incompatible with existing implementations, so, for now, you could probably just to safely _document_ the already interoperable behavior of existing implementations without need for inventing anything new, and then add new subfeatures in line with existing documented behavior you're probably not going to break anyway. In other words, nothing prevents you from documenting existing implemented behavior that you can't really change. ;-)

Reply | Threaded
Open this post in threaded view
|

Re: [css-backgrounds][css-masking] background-position as a shorthand for x and y

L. David Baron
In reply to this post by Greg Whitworth
On Sunday 2015-08-02 23:47 +0000, Greg Whitworth wrote:
> We would like to standardize background-position-x and background-position-y which is currently supported by Blink, Webkit, Trident and Edge. This would need for the spec to reference background-position as a shorthand for the longhands of background-position-x and background-position-y, also the addition of these longhands.
>
> Here is a simple testcase: http://jsbin.com/wabewoxibe/edit?html,css,output

Gecko is implementing these as well, and also for mask-position-x/y.

-David

--
𝄞   L. David Baron                         http://dbaron.org/   𝄂
𝄢   Mozilla                          https://www.mozilla.org/   𝄂
             Before I built a wall I'd ask to know
             What I was walling in or walling out,
             And to whom I was like to give offense.
               - Robert Frost, Mending Wall (1914)

signature.asc (836 bytes) Download Attachment