Flow-relative CSS gets shorthand treatment in Chromium 87

Chromium 87 brings a set of logical property shorthands and new inset properties, bringing the browser in line with Firefox, which has supported these shorthands since version 66. Safari has the features in its technology preview. The changes simplify authoring for developers already using logical properties and add new capabilities for positioning elements relative to document flow.

Logical properties and values have been available since Chromium 69 (September 2018). They let developers style layouts using logical direction and dimension terms instead of physical ones, making international layouts easier to maintain.

Physical vs. logical: a quick refresher

Physical properties like margin-top or left are tied to the screen. In English, text flows left-to-right and paragraphs stack top-to-bottom. In traditional Chinese, paragraphs stack right-to-left. A physical margin that spaces an English paragraph correctly may not make sense once content is translated into a vertical writing mode.

Logical properties describe sides relative to content flow. The block axis is the direction new content blocks follow, such as where the next paragraph goes. block-start is the side where a paragraph begins, and block-end is where it flows toward. The inline axis is the direction letters and words travel, as in the path of a writing hand. inline-start is where writing starts and inline-end is where it wraps or ends.

Chromium's own user-agent stylesheet already uses logical properties for default paragraph margins, setting margin-block-start and margin-block-end rather than physical top and bottom margins.

New margin and padding shorthands

The new margin-block and margin-inline shorthands do not introduce new abilities, but they cut down on longhand repetition. Where a developer previously had to write both margin-block-start and margin-block-end, the shorthand sets both edges in one declaration. The same applies to the inline axis for left and right sides in horizontal writing modes.

Padding receives the same treatment with padding-block and padding-inline. These let you set both block or both inline padding edges in a single declaration.

Inset properties bring new capabilities

The inset property is a physical shorthand for the top, right, bottom, and left longhands. It works like margin and padding, so a single value sets all four sides, two values set vertical and horizontal pairs, and so on.

The bigger news is the pair of flow-relative insets: inset-block and inset-inline. These are genuinely new capabilities, since there were previously no longhand ways to specify absolute positioning with logical properties. Any value of position can benefit from setting sides this way. For example:

.element {
  position: absolute;
  inset-block: 0;
  inset-inline: 24px;
}

This replaces the physical longhand set of top and bottom at 0 plus left and right at 24 pixels, and it adapts automatically when the writing mode or direction changes.

Border shorthands go logical

Border properties also gain logical shorthands. border-block and border-inline cover the nested color, style, and width properties for each axis. These mirror the longhand forms:

.element {
  border-block: 2px solid black;
}

This sets the border width, style, and color on both the block-start and block-end sides in one declaration.

A practical example with <figure>

Combining these shorthands makes internationally responsive components easier to build. A card using a <figure> element with a caption requires only a few logical property declarations to handle different writing directions and document directions correctly.

Fallback strategies for older browsers

For browsers that do not support logical shorthands, the cascade provides a straightforward fallback pattern: declare the physical property first, then follow with the logical one. Supporting browsers will use the logical value during style resolution, and older browsers will apply the physical fallback.

For more targeted control, the :lang() pseudo-selector can adjust physical spacing per language before offering logical spacing for supporting browsers. The @supports rule provides another option for conditionally applying physical property fallbacks.

Build tools offer automated alternatives. Sass, PostCSS via the postcss-logical plugin, and Emotion each provide build-time solutions with various fallback approaches.

An open question on logical shorthands for all four sides

One gap remains: there is no shorthand for styling all four logical sides at once. The margin, padding, and inset physical shorthands accept one to four values covering all sides, but no equivalent logical shorthand exists yet.

A draft proposal would add a logical keyword that, when placed inside any physical shorthand, would apply the values to logical sides instead:

margin: logical 10px;

Some developers have raised concerns that this approach requires repeated logical keywords and is not DRY. Other proposals would change the behavior at the block or page level, but that risks leaking logical interpretation into styles that still assume physical sides. The resolution is still pending in the CSSWG GitHub issue.