Supported Properties

This document provides a comprehensive reference of all CSS logical properties supported by postcss-logical-polyfill, including how they are transformed and categorized.

Property Categories

The plugin intelligently categorizes logical properties into three main types:

Block-Direction Properties

Generate single rule without direction selectors - optimized for performance

Inline-Direction Properties

Generate separate LTR and RTL rules with direction selectors

Mixed-Direction Properties

Affect both dimensions, generate LTR/RTL rules as needed

Block-Direction Properties

These properties only affect the block dimension (vertical in most writing modes) and generate a single rule without direction selectors, optimizing CSS output size.

Margin Properties

• margin-block → margin-top + margin-bottom
• margin-block-start → margin-top
• margin-block-end → margin-bottom

Padding Properties

• padding-block → padding-top + padding-bottom
• padding-block-start → padding-top
• padding-block-end → padding-bottom

Border Properties

• border-block → border-top + border-bottom
• border-block-start → border-top
• border-block-end → border-bottom
• border-block-width → border-top-width + border-bottom-width
• border-block-style → border-top-style + border-bottom-style
• border-block-color → border-top-color + border-bottom-color
• border-block-start-width → border-top-width
• border-block-start-style → border-top-style
• border-block-start-color → border-top-color
• border-block-end-width → border-bottom-width
• border-block-end-style → border-bottom-style
• border-block-end-color → border-bottom-color

Inset Properties

• inset-block → top + bottom
• inset-block-start → top
• inset-block-end → bottom

Size Properties

• block-size → height
• min-block-size → min-height
• max-block-size → max-height

Scroll Properties NEW

• scroll-margin-block → scroll-margin-top + scroll-margin-bottom
• scroll-margin-block-start → scroll-margin-top
• scroll-margin-block-end → scroll-margin-bottom
• scroll-padding-block → scroll-padding-top + scroll-padding-bottom
• scroll-padding-block-start → scroll-padding-top
• scroll-padding-block-end → scroll-padding-bottom

Overflow Properties NEW

• overflow-block → overflow-y

Overscroll Behavior Properties NEW

• overscroll-behavior-block → overscroll-behavior-y

CSS Containment Properties NEW

• contain-intrinsic-block-size → contain-intrinsic-height

Inline-Direction Properties

These properties affect the inline dimension (horizontal in most writing modes) and generate separate LTR and RTL rules with appropriate direction selectors.

Margin Properties

• margin-inline → LTR: margin-left + margin-right, RTL: margin-right + margin-left
• margin-inline-start → LTR: margin-left, RTL: margin-right
• margin-inline-end → LTR: margin-right, RTL: margin-left

Padding Properties

• padding-inline → LTR: padding-left + padding-right, RTL: padding-right + padding-left
• padding-inline-start → LTR: padding-left, RTL: padding-right
• padding-inline-end → LTR: padding-right, RTL: padding-left

Border Properties

• border-inline → LTR: border-left + border-right, RTL: border-right + border-left
• border-inline-start → LTR: border-left, RTL: border-right
• border-inline-end → LTR: border-right, RTL: border-left
• border-inline-width → LTR: border-left-width + border-right-width, RTL: border-right-width + border-left-width
• border-inline-style → LTR: border-left-style + border-right-style, RTL: border-right-style + border-left-style
• border-inline-color → LTR: border-left-color + border-right-color, RTL: border-right-color + border-left-color
• border-inline-start-width → LTR: border-left-width, RTL: border-right-width
• border-inline-start-style → LTR: border-left-style, RTL: border-right-style
• border-inline-start-color → LTR: border-left-color, RTL: border-right-color
• border-inline-end-width → LTR: border-right-width, RTL: border-left-width
• border-inline-end-style → LTR: border-right-style, RTL: border-left-style
• border-inline-end-color → LTR: border-right-color, RTL: border-left-color

Inset Properties

• inset-inline → LTR: left + right, RTL: right + left
• inset-inline-start → LTR: left, RTL: right
• inset-inline-end → LTR: right, RTL: left

Size Properties

• inline-size → width
• min-inline-size → min-width
• max-inline-size → max-width

Border Radius Properties

• border-start-start-radius → LTR: border-top-left-radius, RTL: border-top-right-radius
• border-start-end-radius → LTR: border-top-right-radius, RTL: border-top-left-radius
• border-end-start-radius → LTR: border-bottom-left-radius, RTL: border-bottom-right-radius
• border-end-end-radius → LTR: border-bottom-right-radius, RTL: border-bottom-left-radius

Scroll Properties NEW

• scroll-margin-inline → LTR: scroll-margin-left + scroll-margin-right, RTL: scroll-margin-right + scroll-margin-left
• scroll-margin-inline-start → LTR: scroll-margin-left, RTL: scroll-margin-right
• scroll-margin-inline-end → LTR: scroll-margin-right, RTL: scroll-margin-left
• scroll-padding-inline → LTR: scroll-padding-left + scroll-padding-right, RTL: scroll-padding-right + scroll-padding-left
• scroll-padding-inline-start → LTR: scroll-padding-left, RTL: scroll-padding-right
• scroll-padding-inline-end → LTR: scroll-padding-right, RTL: scroll-padding-left

Overflow Properties NEW

• overflow-inline → overflow-x

Overscroll Behavior Properties NEW

• overscroll-behavior-inline → overscroll-behavior-x

CSS Containment Properties NEW

• contain-intrinsic-inline-size → contain-intrinsic-width

Mixed-Direction Properties

These properties affect both block and inline dimensions and generate separate LTR and RTL rules.

Inset Properties

• inset → LTR: top + right + bottom + left, RTL: top + left + bottom + right

Logical Values Support

The plugin also supports logical values for certain CSS properties:

Float Property

/* Input */
.element { float: inline-start; }

/* LTR Output */
[dir="ltr"] .element { float: left; }

/* RTL Output */
[dir="rtl"] .element { float: right; }

Clear Property

/* Input */
.element { clear: inline-start; }

/* LTR Output */
[dir="ltr"] .element { clear: left; }

/* RTL Output */
[dir="rtl"] .element { clear: right; }

Resize Property

/* Input */
.element { resize: block; }

/* Output (direction-independent) */
.element { resize: vertical; }

Extended Properties (Shim System)

The plugin includes an integrated shim system that extends support for logical properties that weren’t originally supported by the core postcss-logical package.

Browser Support Coverage

All extended properties are supported by modern browsers (baseline 2022-2023) but the plugin provides fallbacks for older browsers that don’t support CSS logical properties yet.

Experimental Features

The plugin includes experimental support for draft-stage CSS logical properties and features.

Linear Gradient Logical Directions

⚠️ Experimental Feature - Use with caution in production environments.

/* Input */
.element {
  background: linear-gradient(to inline-start, red, blue);
}

/* LTR Output */
[dir="ltr"] .element {
  background: linear-gradient(to left, red, blue);
}

/* RTL Output */
[dir="rtl"] .element {
  background: linear-gradient(to right, red, blue);
}

Supported logical directions:

• to inline-start → direction-aware to left/to right
• to inline-end → direction-aware to right/to left
• to block-start → to top (direction-independent)
• to block-end → to bottom (direction-independent)

Radial Gradient Logical Positions NEW

⚠️ Experimental Feature - Enhanced support for radial gradient logical positioning.

/* Simple logical positions */
.element {
  background: radial-gradient(circle at inline-start, red, blue);
}

/* LTR Output */
[dir="ltr"] .element {
  background: radial-gradient(circle at left, red, blue);
}

/* RTL Output */
[dir="rtl"] .element {
  background: radial-gradient(circle at right, red, blue);
}

Advanced mixed positioning:

/* Mixed logical and physical positions */
.element {
  background: radial-gradient(circle at inline-start top, red, blue);
}

/* LTR Output */
[dir="ltr"] .element {
  background: radial-gradient(circle at left top, red, blue);
}

/* RTL Output */
[dir="rtl"] .element {
  background: radial-gradient(circle at right top, red, blue);
}

Supported logical positions:

• at inline-start → direction-aware at left/at right
• at inline-end → direction-aware at right/at left
• at block-start → at top (direction-independent)
• at block-end → at bottom (direction-independent)
• Mixed positions like at inline-start top, at bottom inline-end, at 50% inline-start etc.

Compound directions:

/* Compound logical positions */
.element {
  background: radial-gradient(circle at inline-start block-end, red, blue);
}

/* LTR Output */
[dir="ltr"] .element {
  background: radial-gradient(circle at left bottom, red, blue);
}

/* RTL Output */
[dir="rtl"] .element {
  background: radial-gradient(circle at right bottom, red, blue);
}

Repeating Gradients NEW

⚠️ Experimental Feature - Full support for repeating gradient logical directions.

Both repeating-linear-gradient and repeating-radial-gradient support all the same logical directions as their non-repeating counterparts:

/* Repeating linear gradients */
.stripes {
  background: repeating-linear-gradient(to inline-end, red 0%, blue 10px);
}

/* LTR Output */
[dir="ltr"] .stripes {
  background: repeating-linear-gradient(to right, red 0%, blue 10px);
}

/* RTL Output */
[dir="rtl"] .stripes {
  background: repeating-linear-gradient(to left, red 0%, blue 10px);
}

/* Repeating radial gradients */
.pattern {
  background: repeating-radial-gradient(circle at inline-start, red 0%, transparent 15px);
}

/* LTR Output */
[dir="ltr"] .pattern {
  background: repeating-radial-gradient(circle at left, red 0%, transparent 15px);
}

/* RTL Output */
[dir="rtl"] .pattern {
  background: repeating-radial-gradient(circle at right, red 0%, transparent 15px);
}

All logical directions are supported:

• repeating-linear-gradient with to inline-start/end, to block-start/end
• repeating-radial-gradient with all logical positioning including mixed and compound directions

Processing Examples

Block-Only Example

/* Input */
.content {
  margin-block: 2rem;
  padding-block-start: 1rem;
}

/* Output - Single rule without direction selectors */
.content {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding-top: 1rem;
}

Inline-Only Example

/* Input */
.container {
  margin-inline: 1rem;
  padding-inline-start: 1rem;
}

/* Output - Separate LTR and RTL rules */
.container {
  margin-left: 1rem;
  margin-right: 1rem;
}
[dir="ltr"] .container {
  padding-left: 1rem;
}
[dir="rtl"] .container {
  padding-right: 1rem;
}

Mixed Properties Example

/* Input */
.element {
  inset: 10px;
}

/* Output - LTR and RTL rules for mixed properties */
[dir="ltr"] .element {
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
}
[dir="rtl"] .element {
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
}