Logical properties

21.11.2023 — by Nesim

Logical properties are a new set of CSS properties that are meant to make it easier to support different writing modes. For example, margin-inline-start maps to margin-left in LTR and margin-right in RTL. Or text-align: left becomes text-align: start.

Links

• Awesome article on web.dev
• MDN: All logical properties
• Stylelint & Logical Property plugin

Real world examples

• [redacted] Internal project “3N”

Session CodePen

See this Pen on CodePen.

Browser Support