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

Specification link

Status: Specification currently under development in a Working Group

Status in Chromium

Blink components: Blink>CSS

Implementation status: Enabled by default (tracking bug)

Consensus & Standardization

• Firefox: Shipped/Shipping
• 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