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
margin-block: 1px 2px
instead of margin-block-start:
1px; margin-block-end: 2px
.inset-*
) will
provide the ability to set top
/right
/bottom
/left
with logical mappings, rather than physical.Interoperability and CompatibilityIs this feature fully tested by web-platform-tests?
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:
Currently it gets serialized aselement.style.cssText = "top: 1px; right: 2px; bottom: 3px; left: 4px"; element.style.cssText;
"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 withwriting-mode
anddirection
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.
--
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.
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.
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.
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.
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
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.
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.