Implement {inline-,block-}size and {min-,max-}{inline-,block-}size, which are introduced by CSS Logical Properties. The related properties are: inline-size, block-size , min-inline-size,min-block-size, max-inline-size, max-block-size Provide the author with the ability to control layout through logical, rather than physical, direction and dimension mappings.

Demos

• https://jsfiddle.net/xuxing/fL8rpcko/
• https://jsfiddle.net/xuxing/433e3fdw/
• https://jsfiddle.net/xuxing/25xh1mpn/
• https://jsfiddle.net/xuxing/ug00c0vj/

Documentation

• https://developer.mozilla.org/docs/Web/CSS/CSS_Logical_Properties
• https://drafts.csswg.org/css-writing-modes/#logical-to-physical

Specification

Working draft or equivalent

Status in Chromium

Blink components: Blink>CSS

Enabled by default (tracking bug) in:

• Chrome for desktop release 57
• Chrome for Android release 57
• Android WebView release 57

Consensus & Standardization

• Firefox: Shipped/Shipping
• Edge: Positive
• Safari: No signal
• Web Developers: Positive

Owner

• xing.xu@intel.com

Comments

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

Search tags

Last updated on 2020-11-19