Top Right Bottom Left
⚠️ Deprecated Approach
We no longer use the top, right, bottom, and left properties for positioning in our designs. These properties are now considered deprecated in favor of logical properties. For modern, maintainable layouts, we exclusively use logical properties like inset-block-start, inset-inline-end, and their counterparts. Please ensure you're using the appropriate logical property to maintain consistency and ensure future-proof designs.
See inset documentation.
Why We Prefer Logical Properties with inset
In CSS, the inset property is a shorthand for defining values for the top, right, bottom, and left properties. However, we prefer to use logical properties when applying inset, as they provide a more flexible, semantic, and future-proof approach to layout design. Here's why:
1. Better Support for Different Writing Modes
The primary advantage of logical properties is that they adapt to the writing mode and text direction of the document. Unlike the traditional top, right, bottom, and left properties, which are fixed to physical edges of the viewport, logical properties like inset-block-start and inset-inline-end change based on the direction of the content.
- For left-to-right (LTR) languages,
inset-block-startcorresponds to the top of the container. - For right-to-left (RTL) languages,
inset-block-startcorresponds to the bottom of the container.
This makes the layout automatically adjust to languages with different reading directions, such as Arabic or Hebrew, without needing extra CSS rules.
2. Consistency Across Different Devices and Screens
Logical properties ensure consistent positioning across different devices, screen orientations, and writing modes. By using inset-block-start and inset-inline-end, you rely on the content's flow, not the fixed positions of edges, ensuring that your layout works seamlessly regardless of the language or device.
For example, inset-inline-end always represents the right side in LTR languages and the left side in RTL languages, eliminating the need to adjust styles manually when switching between languages.
3. Cleaner and More Semantic Code
Logical properties make your CSS more intuitive and readable. Instead of specifying physical positions like top or left, logical properties describe the position relative to the writing direction (block vs. inline). This makes your code more semantic and easier to understand for other developers, especially when working with multi-language sites.
For example:
inset-block-startaligns with the top or bottom of the container, depending on the writing mode.inset-inline-endaligns with the right or left side, depending on the text direction.
This approach reflects the content's flow, improving the maintainability of your design.
4. Future-Proofing Your Layouts
As web standards evolve, logical properties are becoming the preferred method for defining layout properties like inset. By using logical properties, you ensure your code stays up-to-date with the latest practices, reducing the need for future refactoring.
Since writing modes (like vertical text orientation or RTL languages) are expected to become more prevalent, relying on logical properties ensures that your design is more adaptable to future changes in the web platform.
Conclusion
We recommend using logical properties with the inset shorthand for a more flexible, readable, and scalable design approach. This method makes your layouts more adaptable across languages and devices, and it aligns with current web standards, ensuring your code is future-proof.