CSS flow-relative shorthand and offset properties

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.

Documentation

Specification

Working draft or equivalent

Status in Chromium

Blink


Enabled by default (tracking bug) in:

  • Chrome for desktop release 87
  • Chrome for Android release 87
  • Android WebView release 87

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • Shipped/Shipping
  • N/A
  • Positive
  • Positive

Owner

Intent to Prototype url

Intent to Prototype thread

Search tags

css-logical,

Last updated on 2020-10-20