Intent to Implement and ship: New CSS Value 'legacy" for the alignment behavior of HTML’s <center> element

[Javier Fernandez]

Contact emails
jfern...@igalia.com

Spec
https://drafts.csswg.org/css-align/#valdef-justify-items-legacy

Summary
The CSS Box Alignment spec defines a special syntax for the justify-items CSS property so that it's possible to implement the legacy alignment behavior of HTML’s <center> element and align attribute.

In order to declare an element to use this kind of alignment, a new CSS value has been defined: 'legacy'.

Motivation
We already implement this feature under the 'auto' CSS value, but the CSS WG resolved that an more explicit value should be used:
  - https://github.com/w3c/csswg-drafts/issues/1318

This new syntax will make clearer to end users that an element's justify-items will use the legacy alignment behavior, hence it will use the inherited value.

Interoperability risk
Firefox: In development
Edge: Shipped
Safari: In development
Web developers: No signals

I think the interoperability risk is low.  We already support the legacy alignment, so this change will require just to define a new keyword, 'legacy', to specify that an element will use the alignment behavior of HTML’s <center> element.

Edge already shipped this new CSS syntax for the justify-items property and I'll implement it for WebKit as well.
I've been in contact with Firefox developers and it seems they will implement this change soon:
  -   https://bugzilla.mozilla.org/show_bug.cgi?id=1363875

Compatibility risk
The old value 'auto' will be kept for now, although the new CSS syntax doesn't accept it and it should be parsed as invalid. Hence, this change won't break any content in current sites.

I have plans to send soon an intent-to-deprecate request to eventually remove support for the 'auto' value and use this new 'legacy' value as an alternative. I've added an UseCounter to evaluate the use of the legacy alignment in current sites so we can evaluate the removal of the 'auto' value:
  - https://chromium-review.googlesource.com/c/chromium/src/+/886365

Ongoing technical constraints
The ideal approach to implement a clean codebase would be to just replace the 'auto' CSS value with the new one, 'legacy', in the CSS parsing and Computed Style logic. However, since we want to give some time to end users that may have implemented already sites with the legacy alignment using the 'auto' value, we will have to keep the old codebase and probably having duplicated logic.

Additionally, considering that 'auto' is the current default value for the justify-items property, keeping both codepaths will imply some complexity in the code generation and templates we use for the CSS properties.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
Yes

OWP launch tracking bug
https://bugs.chromium.org/p/chromium/issues/detail?id=726148

Link to entry on the Chrome Platform Status
https://www.chromestatus.com/features/5751109557682176

Requesting approval to ship?
Yes

[Anne van Kesteren]

On Mon, Jan 29, 2018 at 2:38 PM, Javier Fernandez <javie...@gmail.com> wrote:
> Spec
> https://drafts.csswg.org/css-align/#valdef-justify-items-legacy

This will need corresponding changes in the HTML Standard which
currently defines this behavior. Does this new definition account for
various issues opened against the HTML Standard?

https://github.com/whatwg/html/issues/369
https://github.com/whatwg/html/issues/372

I also looked at the patch for Firefox and it didn't seem to adjust
the default style sheet. Are we sure everyone is on the same page
here?


--
https://annevankesteren.nl/

[Javier Fernandez]

Hi,

I'll comment on the specific issues inline, but first of all I'd like to
remark some points that may be useful to clarify the purpose of this
intent request.

The CSS Box Alignment spec tries to generalize the alignment properties
previously defined as part of the CSS Flexible Box Layout Model spec.
It's a superset, hence it contains all the properties and values already
defined (and currently supported by all browsers) and a bunch of new
properties and values.

Since this new spec affects to many layout modes, it has some specific
clauses about Partial Implementations
(https://drafts.csswg.org/css-align/#partial), so that new values for a
CSS property must be implement for all the layout models already
supporting such property.

The justify-items is one of those new properties. In Chrome, we have
implemented it only for the CSS Grid Layout feature, which is a valid
scenario, according to the above mentioned Partial Implementation
section. Additionally, this 'legacy' keyword is also new and will only
affect to Grid Layout containers, for the time being.

Finally, as part of the Grid Layout implementation, we already support
this legacy alignment for elements using 'auto' as justify-items value,
using the inherited value if an ancestor's justify-items value contains
the 'legacy' keyword (plus 'left', 'center' or 'right'). This intent
request just tries to replace the 'auto' value with a new defined
keyword, 'legacy'. There is no actual behavior change (while we don't
implement support for other layout models), other than resolving to
'normal' in case of no ancestors using the legacy keyword (and a few
computed style and serialization issues).

On 29/01/18 16:30, Anne van Kesteren wrote:
> On Mon, Jan 29, 2018 at 2:38 PM, Javier Fernandez <javie...@gmail.com> wrote:
>> Spec
>> https://drafts.csswg.org/css-align/#valdef-justify-items-legacy
> This will need corresponding changes in the HTML Standard which
> currently defines this behavior. Does this new definition account for
> various issues opened against the HTML Standard?
>
> https://github.com/whatwg/html/issues/369
> https://github.com/whatwg/html/issues/372

I'm not sure I understand enough those issues to be sure what changes
would require, but I can forward the question to the CSS Box Alignment
spec editors. In my opinion, this definition of 'legacy' alignment
doesn't account for those issues. Specially, as I mentioned before, in
the case of Grid Layout elements.

> I also looked at the patch for Firefox and it didn't seem to adjust
> the default style sheet. Are we sure everyone is on the same page
> here?
>

As far I understand the patch, it sets 'legacy' as the initial value in
the xml definition of the justify-items property:

"justify-items": {
domProp: "justifyItems",
inherited: false,
type: CSS_TYPE_LONGHAND,
- initial_values: [ "auto", "normal" ],
+ initial_values: [ "legacy", "normal" ],

Perhaps I didn't understand the question. I'm in direct conversation
with the Firefox dev implementing this change to ensure our
implementation matches what the other browser do.

[fantasai]

On 01/29/2018 07:30 AM, Anne van Kesteren wrote:
> On Mon, Jan 29, 2018 at 2:38 PM, Javier Fernandez <javie...@gmail.com> wrote:
>> Spec
>> https://drafts.csswg.org/css-align/#valdef-justify-items-legacy
>
> This will need corresponding changes in the HTML Standard which
> currently defines this behavior. Does this new definition account for
> various issues opened against the HTML Standard?
>
> https://github.com/whatwg/html/issues/369

This should be easy: add table { justify-items: normal; }

> https://github.com/whatwg/html/issues/372

This should be handled implicitly, through the 'legacy' keyword's
pseudo-inheritance behavior. It would be harder *not* to do this.

> I also looked at the patch for Firefox and it didn't seem to adjust
> the default style sheet. Are we sure everyone is on the same page
> here?

I'm not sure about that. We (Tab and I) asked for feedback on the 'legacy'
keyword several times, but haven't received much in the way of commentary.
So we marked it at risk and have been waiting to see if anyone had anything
to say about it. :)

If it is being implemented, though, then we should have HTML update to
hook up to that instead of having implicit magic behavior. The only
reason the feature exists is to implement this aspect of HTML, and have
it properly integrated into CSS so its interactions with CSS-based
alignment is clear. Filed https://github.com/whatwg/html/issues/3428

~fantasai

[Christian Biesinger]

Can you clarify if this intent covers switching <center> to use this
property instead of -webkit-center, or is this only for grid for now?

Christian

> --
> You received this message because you are subscribed to the Google Groups
> "blink-dev" group.
> To view this discussion on the web visit
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/be1975cf-694b-812e-1e2e-f9d6dc118a7c%40gmail.com.

[Javier Fernandez]

Hi Christian,

On 30/01/18 02:49, Christian Biesinger wrote:
> Can you clarify if this intent covers switching <center> to use this
> property instead of -webkit-center, or is this only for grid for now?

No, this intent only covers Grid for now. The new CSS Value will be
parsed as valid for all layout models, but the 'justify-items' property
is used to resolve the 'auto' values of 'justify-self' on the
descendants, and support for the justify-self property has been
implemented only for Grid Layout, so far.

[Ojan Vafai]

Can you clarify how this proposal is different from https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/wP4NWLgbIpA/P1rebd9ZAgAJ ?

[Javier Fernandez]

As I commented in the thread about https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/wP4NWLgbIpA/P1rebd9ZAgAJ , this request is focied only on the implementation of the new 'legacy' value, keeping the old 'auto' behavior. We've decided that since there are no compat issues, we could do the ship and remove intents at the same time. Hence, this will become just an intent-to-implement, referenced by the intent-to-ship-and-remove request.

--

You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/b400206d-f799-499f-b6ed-1c022afe62a7%40chromium.org.

[Ojan Vafai]

Got it. I think we can just say this intent is subsumed by the other one at this point then. So no need for lgtms here.