← Back to release summary

CSS flow-relative shorthand and offset properties

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

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

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