CSS Logical Properties for International Layouts
Use CSS logical properties for layouts that work correctly in left-to-right, right-to-left, and vertical writing modes.
Key Takeaways
- Logical properties replace physical properties (left/right/top/bottom) with flow-relative equivalents (inline-start/inline-end/block-start/block-end) that adapt automatically to writing direction and text orientation.
- They're especially important in design systems and component libraries that may be used in internationalized applications.
- ### Physical vs Logical `margin-left: 1rem` always adds space on the left side, regardless of text direction.
CSS 压缩
压缩 CSS 代码以减小文件大小
CSS Logical Properties
Logical properties replace physical properties (left/right/top/bottom) with flow-relative equivalents (inline-start/inline-end/block-start/block-end) that adapt automatically to writing direction and text orientation.
Physical vs Logical
margin-left: 1rem always adds space on the left side, regardless of text direction. In a right-to-left language like Arabic, this pushes content away from the reading start — the opposite of the intent. margin-inline-start: 1rem adds space at the start of the inline axis, which is left in LTR and right in RTL. The same CSS works correctly in both directions.
Property Mapping
padding-left → padding-inline-start. margin-right → margin-inline-end. top → inset-block-start. border-bottom → border-block-end. width → inline-size. height → block-size. text-align: left → text-align: start.
When to Use Logical Properties
Use logical properties in all new CSS. Even if you don't currently support RTL languages, logical properties cost nothing extra and future-proof your styles. They're especially important in design systems and component libraries that may be used in internationalized applications.
Browser Support
Logical properties are supported in all modern browsers (Chrome 87+, Firefox 66+, Safari 14.1+, Edge 87+). For older browser support, use a PostCSS plugin that generates physical property fallbacks. The fallback approach is margin-left: 1rem; margin-inline-start: 1rem — browsers that understand logical properties use the latter.
Practical Adoption
Start by replacing padding and margin on components. Then update border properties and positioning. Finally, convert width/height to inline-size/block-size. Use your linter to flag physical properties in new code. For existing codebases, migrate gradually — component by component rather than a big-bang rewrite.
相关工具
相关格式
相关指南
CSS Units Explained: px, em, rem, vh, and When to Use Each
CSS offers over a dozen length units, each suited to different situations. Understanding the differences between absolute and relative units is essential for building responsive, accessible interfaces.
Flexbox vs CSS Grid: A Practical Comparison
Flexbox and CSS Grid are complementary layout systems, not competitors. This guide clarifies when to reach for each one and how to combine them for robust, responsive page layouts.
How to Create CSS Gradients: Linear, Radial, and Conic
CSS gradients create smooth color transitions without image files. Learn to build linear, radial, and conic gradients with precise control over color stops, direction, and shape.
Troubleshooting CSS Specificity Conflicts
When CSS rules unexpectedly override each other, specificity is usually the culprit. This guide explains how specificity is calculated and provides strategies for managing it in growing codebases.
CSS Custom Properties (Variables) Best Practices
CSS custom properties enable dynamic theming, design tokens, and maintainable style systems. Learn how to organize, scope, and use CSS variables effectively in production applications.