Polyfill Direction
Transforms logical properties → physical properties (reverse of most tools)
/* Input */.container { margin-inline: 1rem 2px; padding-block: 2rem;}[dir="rtl"] .container { border-inline-start: 2px solid blue;}
/* Output */.container { padding-top: 2rem; padding-bottom: 2rem;}[dir="ltr"] .container { margin-left: 1rem; margin-right: 2px;}[dir="rtl"] .container { margin-right: 2px; margin-left: 1rem; border-right: 2px solid blue;}
Polyfill Direction
Transforms logical properties → physical properties (reverse of most tools)
Smart Generation
Creates both LTR and RTL versions automatically
Optimized Output
Block-direction properties generate single rules (no duplication)
Extended Support
Includes scroll properties and logical values via integrated shim
Experimental Features
Linear gradient logical directions and draft CSS specs
Configurable
Custom selectors and output order control
While modern browsers support CSS logical properties, older browsers don’t. This plugin acts as a polyfill, converting your modern logical properties to physical properties that work everywhere, while preserving the directional behavior for international layouts.
Perfect for:
This plugin transforms CSS Logical Properties into physical properties with appropriate direction selectors for browser compatibility. It intelligently processes: