Drupal core now ships native CSS Logical Properties.

Drupal core (10+) now ships native CSS Logical Properties*.

With CSS Logical Properties, we now write

.selector {
  padding-inline-start: 10px;
}

Instead of

.selector {
  padding-left: 10px;
}

[dir="rtl"] .selector {
  padding-left: 0;
  padding-right: 10px;
}

These new CSS properties streamline the maintenance of styles for RTL (right to left) languages such as Arabic or Hebrew. In addition because the CSS rules are less verbose, it results in significantly less CSS shipped to the browser, which results in faster load times.

These properties* are supported by all of Drupal 10’s supported browsers. However, unsupported browser versions might see errors in page layout.

* Note that flow relative properties (e.g. float: inline-start, clear: inline-end) are not supported by supported browsers, so those properties still need to use non-logical values.