← Back to release summary

CSS logical flow-relative values

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

Summary

Add these new values to existing CSS properties: 'float: inline-start', 'float: inline-end', 'clear: inline-start', 'clear: inline-end', 'resize: block', 'resize: inline'. These flow-relative directional keywords resolve to a physical value depending on the writing mode or direction of the element or its containing block.

Motivation

Being able to set the 'float', ' clear' and 'resize' CSS properties to a value that depends on the writing mode and direction. This is useful to reuse the same CSS code for multiple languages that use different writing modes or directions. Just changing the writing mode or direction will make these logical values adapt accordingly to the desired behavior.

Standards & signals

Docs: https://developer.mozilla.org/docs/Web/CSS/CSS_logical_properties_and_values

Explainers: https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/

View on chromestatus.com