Intent to Ship: CSS flow-relative shorthand and offset properties

[Oriol Brufau]

Contact emails
obr...@igalia.com

Explainer
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Margins_borders_padding

Spec
https://drafts.csswg.org/css-logical/#box

TAG review
https://github.com/w3ctag/design-reviews/issues/286
The review was broader than what's included in this intent-to-ship,
the open issues are for other features and are not relevant here.

Summary
Ship the already implemented properties introduced by CSS Logical Properties.
Specifically:

• border-block, border-block-color, border-block-style, border-block-width
• border-inline, border-inline-color, border-inline-style, border-inline-width
• inset-block-start, inset-block-end, inset-inline-start, inset-inline-end
• inset, inset-block, inset-inline
• margin-block, margin-inline
• padding-block, padding-inline

Motivation
The shorthands will allow authors to set flow-relative properties for multiple sides in a single declaration.
For example, margin-block: 1px 2px instead of margin-block-start: 1px; margin-block-end: 2px.
The flow-relative offset properties (inset-*) will provide the ability to set top/right/bottom/left with logical mappings, rather than physical.

Link to “Intent to Prototype” blink-dev discussion
https://groups.google.com/a/chromium.org/d/msg/blink-dev/48OwfwZrbvI/A1XZFGkzAwAJ
That intent-to-implement also had other features, not included here.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
Yes. This feature is not platform dependent.

Debuggability
The new properties will appear in the Styles panel such as any other CSS property.

Risks

Interoperability and Compatibility
Low interoperability risk
Already shipped by Firefox

Low compatibility risk
This feature just adds new CSS properties that don't break existing ones.
There is just a little CSSOM change:

element.style.cssText = "top: 1px; right: 2px; bottom: 3px; left: 4px";
element.style.cssText;

Currently it gets serialized as "top: 1px; right: 2px; bottom: 3px; left: 4px;",
but it will become "inset: 1px 2px 3px 4px;".

Gecko: Shipped
https://bugzilla.mozilla.org/show_bug.cgi?id=1520396
https://bugzilla.mozilla.org/show_bug.cgi?id=1520236
https://bugzilla.mozilla.org/show_bug.cgi?id=1520229
https://bugzilla.mozilla.org/show_bug.cgi?id=1464782
https://bugzilla.mozilla.org/show_bug.cgi?id=1519944
https://bugzilla.mozilla.org/show_bug.cgi?id=1519847

WebKit: Positive (https://lists.webkit.org/pipermail/webkit-dev/2018-August/030086.html)

Web developers: Positive (https://bugs.chromium.org/p/chromium/issues/detail?id=1088329)

Ergonomics
The flow-relative properties will frequently be used in tandem with writing-mode and direction properties.
The new properties shouldn't have a bad impact on performance, since they will work similarly to other properties already shipped.

Activation
It won't be challenging for developers to use the new shorthands if they already know the existing longhands.

Security
No security risks.

Is this feature fully tested by web-platform-tests?
Yes
https://wpt.fyi/results/css/css-logical/logical-box-border-color.html
https://wpt.fyi/results/css/css-logical/logical-box-border-shorthands.html
https://wpt.fyi/results/css/css-logical/logical-box-border-style.html
https://wpt.fyi/results/css/css-logical/logical-box-border-width.html
https://wpt.fyi/results/css/css-logical/logical-box-inset.html
https://wpt.fyi/results/css/css-logical/logical-box-margin.html
https://wpt.fyi/results/css/css-logical/logical-box-padding.html

Tracking bug
https://bugs.chromium.org/p/chromium/issues/detail?id=538475

Link to entry on the Chrome Platform Status
https://www.chromestatus.com/feature/6618771051511808

[Chris Harrelson]

LGTM1

--
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/7afda4f8-67a6-06ac-f766-86277625eea5%40igalia.com.

[PhistucK]

I love this intent. :)

Do you have any indication of how much element.style.cssText is being read? That is a breaking change for a very old feature, so I am a tiny bit worried about it without data...

With Firefox shipping, this is encouraging, but they do not cover most of the web, unfortunately...

☆PhistucK

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw8qtQCUmzh5pZpWM7m_jtCfcPJhGj4v9%3DmUQa_yEM2AiA%40mail.gmail.com.

[sligh...@chromium.org]

LGTM2

LGTM1

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/7afda4f8-67a6-06ac-f766-86277625eea5%40igalia.com.

--
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+unsubscribe@chromium.org.

[Daniel Bratell]

I'm curious about the same thing as PhistucK, more details about what changes in the style serialization.

The things that change, are they just the new (relatively rarely used) properties or will it change something that may have widespread use? People have been known to make assumptions about what they get back when reading the style.

/Daniel

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/b5a02175-684b-48ee-9d49-5f206177bd49o%40chromium.org.

[Oriol Brufau]

The change is due to the fact that CSSOM tries to provide the shortest possible serialization, using shorthands if available.

So when there was no shorthand for top/right/bottom/left, they would be serialized separately.
But now that we are adding the 'inset' shorthand, the serialization uses it since it's simpler.

Note this is not specific of these properties, it happens every time that a new shorthand is added for existing longhands.

So 'margin-block-start: 1px; margin-block-end: 2px' will now serialize as 'margin-block: 1px 2px',
and 'top: 1px; right: 2px; bottom: 3px; left: 4px' will now serialize as 'inset: 1px 2px 3px 4px'.

The former is less concerning since logical margins are used much less frequently than physical offsets.

But anyways I don't think many pages rely on having the 4 offset longhands in the serialization.
Because if you want to read the current values, rather than splitting 'style.cssText' on every ';' and e.g. searching for a 'top: something' pair,
it's much easier to just read 'style.top', which will of course continue working.

But I mentioned the risk since we got https://bugs.chromium.org/p/chromium/issues/detail?id=876913 about this,
though that was because there was a real bug: the styles got serialized using 'inset' despite it being disabled behind a flag.
So reassigning the serialization just cleared the styles without round-tripping, devtools said "Unknown property name", etc.

As far as I can find, Mozilla got a single bug report, https://bugzilla.mozilla.org/show_bug.cgi?id=1554055
They just closed it as resolved invalid, and nobody else seemed to complain.

Note Firefox shipped 'inset' in version 66, released as stable on 2019-03-19.
So even if Firefox has much less market share than Chromium, users have had quite some time to find problems,
but there is no report about some site broken by this.

- Oriol Brufau

El 27/8/20 a les 21:44, Daniel Bratell ha escrit:

You received this message because you are subscribed to a topic in the Google Groups "blink-dev" group.
To unsubscribe from this topic, visit https://groups.google.com/a/chromium.org/d/topic/blink-dev/E7f_WZOcTgQ/unsubscribe.
To unsubscribe from this group and all its topics, 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/2698c5be-272d-3924-7075-461f570f0ed8%40gmail.com.

[TAMURA, Kent]

LGTM3.

It seems Firefox doesn't have many compatibility issues. The risk would be very low.

LGTM1

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/7afda4f8-67a6-06ac-f766-86277625eea5%40igalia.com.

--
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/CAOMQ%2Bw8qtQCUmzh5pZpWM7m_jtCfcPJhGj4v9%3DmUQa_yEM2AiA%40mail.gmail.com.

--
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/b5a02175-684b-48ee-9d49-5f206177bd49o%40chromium.org.

--
You received this message because you are subscribed to a topic in the Google Groups "blink-dev" group.
To unsubscribe from this topic, visit https://groups.google.com/a/chromium.org/d/topic/blink-dev/E7f_WZOcTgQ/unsubscribe.
To unsubscribe from this group and all its topics, 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/2698c5be-272d-3924-7075-461f570f0ed8%40gmail.com.

--
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/a4bd6b45-6437-7d8a-3a06-404becc39f05%40igalia.com.

--

TAMURA Kent
Software Engineer, Google