CSS flow-relative shorthand and offset properties

Category: CSS
Type: New or changed feature
Status: Enabled by default (Chrome 87)
Intent stage: Shipped

Breaking change: No
Enterprise impact: None
Spec maturity: Working draft
Web Platform Tests: No

WPT details: 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

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.

Standards & signals

Specification: https://drafts.csswg.org/css-logical/#box
Firefox: Shipped/Shipping
Safari: Positive
Web developers: Positive
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=538475

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=css%2Fcss-logical%2Flogical-box-border-color
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+CSS%20flow-relative%20shorthand%20and%20offset%20properties
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=CSS%20flow-relative%20shorthand%20and%20offset%20properties
Baseline status: https://webstatus.dev/?q=CSS%20flow-relative%20shorthand%20and%20offset%20properties

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

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

View on chromestatus.com