Skip to content
PostCSS Logical Polyfill

Introduction

PostCSS Logical Polyfill is a PostCSS plugin that transforms CSS logical properties into physical properties with appropriate direction selectors, enabling backward compatibility for older browsers while preserving the directional behavior for international layouts.

What are CSS Logical Properties?

Section titled “What are CSS Logical Properties?”

CSS Logical Properties and Values provide the author the ability to control layout through logical, rather than physical, direction and dimension mappings. The logical properties define direction‐relative equivalents to their corresponding physical properties.

For example:

  • margin-inline-start is the logical equivalent of margin-left in LTR languages and margin-right in RTL languages
  • padding-block affects both padding-top and padding-bottom
  • border-inline-end becomes border-right in LTR and border-left in RTL

The Problem

Section titled “The Problem”

While modern browsers support CSS logical properties, older browsers don’t understand them. This creates a compatibility issue when you want to use modern CSS logical properties but still support a wider range of browsers.

The Solution

Section titled “The Solution”

PostCSS Logical Polyfill solves this by:

  1. Detecting logical properties in your CSS
  2. Converting them to physical properties that all browsers understand
  3. Adding appropriate direction selectors ([dir="ltr"], [dir="rtl"]) to maintain directional behavior
  4. Optimizing output by generating single rules for block-direction properties that don’t need directional variants

Key Benefits

Section titled “Key Benefits”

🔄 Polyfill Direction

Section titled “🔄 Polyfill Direction”

Unlike most tools that transform physical properties to logical ones, this plugin works in reverse - transforming logical properties to physical ones for maximum compatibility.

🎯 Smart Generation

Section titled “🎯 Smart Generation”

Automatically creates both LTR and RTL versions of your styles, ensuring your international layouts work correctly.

⚡ Optimized Output

Section titled “⚡ Optimized Output”

Block-direction properties (like margin-block, padding-block) generate single rules without duplication since they work the same in all directions.

🔗 Extended Support

Section titled “🔗 Extended Support”

Includes support for:

  • Scroll properties (scroll-margin-*, scroll-padding-*)
  • Overflow properties (overflow-block, overflow-inline)
  • CSS Containment properties (contain-intrinsic-*-size)
  • Logical values (float: inline-start, clear: inline-end, resize: block)

🧪 Experimental Features

Section titled “🧪 Experimental Features”

Supports cutting-edge features like linear gradient logical directions for future-ready CSS.

🎛️ Configurable

Section titled “🎛️ Configurable”

Customize direction selectors and output order to match your project’s needs.

Browser Support

Section titled “Browser Support”

The generated CSS works in all browsers that support:

  • CSS attribute selectors ([dir="ltr"], [dir="rtl"])
  • The physical CSS properties being generated

This means virtually all browsers, including:

  • Internet Explorer 7+
  • All modern browsers
  • Mobile browsers

Use Cases

Section titled “Use Cases”

International Websites

Section titled “International Websites”

Perfect for websites that need to support both left-to-right (LTR) and right-to-left (RTL) languages.

Gradual Migration

Section titled “Gradual Migration”

Ideal for teams wanting to gradually migrate from physical properties to logical properties without breaking existing browser support.

Modern CSS with Legacy Support

Section titled “Modern CSS with Legacy Support”

Write modern CSS using logical properties while ensuring it works in older browsers.

Framework Integration

Section titled “Framework Integration”

Easily integrate with any CSS framework or build system that uses PostCSS.

Next Steps

Section titled “Next Steps”

Ready to get started? Check out the Installation guide to add PostCSS Logical Polyfill to your project.

Learn More

Section titled “Learn More”