在网页设计中使用 margin-inline-start 来更好地支持 RTL

在设计网站时，满足从左到右 (LTR) 和从右到左 (RTL) 语言的需求对于全球受众来说至关重要。虽然大多数开发人员都熟悉使用 margin-left 和 margin-right 来调整布局，但这些属性在文本方向发生变化的环境中显得力不从心。使用 margin-inline-start 及其逻辑对应项 - 现代 CSS 属性，可让多语言和双向内容的设计变得更加容易。

在本文中，我们将探讨如何从 margin-left/margin-right 切换到 margin-inline-start 和 margin-inline-end 以提高灵活性并保持跨 LTR 和 RTL 语言的一致性。

**理解 CSS 中的逻辑属性**

传统 CSS 属性（如 margin-left 和 margin-right）是物理属性，这意味着它们的行为与屏幕的视觉左侧和右侧相关。这对于从左向右的语言（如英语）来说很有效，但当页面方向切换到从右向左时（如阿拉伯语或希伯来语）就会出现问题。

CSS3 中引入的逻辑属性与方向无关。它们根据文档或元素的书写模式进行调整。关键的逻辑边距属性包括：

• margin-inline-start：替换 LTR 的 margin-left 和 RTL 的 margin-right。

• margin-inline-end：替换 LTR 的 margin-right 和 RTL 的 margin-left。

这些属性与双向文本的自然流动更​​加一致，使其成为国际化网页设计不可或缺的一部分。

**为什么使用 margin-inline-start？**

1 - 无缝 RTL 支持

当您使用 margin-left 时，无论文本方向如何，它始终将边距应用于元素的左侧。即使页面切换到 RTL，此行为也不会改变，从而导致布局不对齐。相比之下，margin-inline-start 会根据文本方向进行调整，将边距应用于适当的一侧：

/* Logical property */
.element {
 margin-inline-start: 20px;
}
/* Equivalent to */
:root[dir="ltr"] .element {
 margin-left: 20px;
}
:root[dir="rtl"] .element {
 margin-right: 20px;
}

2 - 更清晰的代码

如果没有逻辑属性，则同时支持 LTR 和 RTL 需要特定于方向的样式，这会增加复杂性和出错的可能性。以下是比较：

传统方法：

:root[dir="ltr"] .element {
 margin-left: 20px;
}
:root[dir="rtl"] .element {
 margin-right: 20px;
}

现代方法：

.element {
 margin-inline-start: 20px;
}

3 - 面向未来且可扩展

逻辑属性是 CSS 向自适应和灵活布局持续演进的一部分。通过采用 margin-inline-start，您可以使您的设计符合现代标准，使其更具可扩展性和可维护性。

**真实世界的例子**

下面介绍了如何重构典型的卡片布局以获得更好的 RTL 支持：

之前：使用 margin-left

.card {
 margin-left: 1rem;
 padding-left: 2rem;
}

在 RTL 中，布局看起来会不对，因为间距在左侧保持固定。

之后：使用 margin-inline-start

.card {
 margin-inline-start: 1rem;
 padding-inline-start: 2rem;
}

现在，当方向改变时，边距和填充会自动调整，确保一致的用户体验。

**浏览器支持**

逻辑属性在现代浏览器（包括 Chrome、Edge、Firefox 和 Safari）中得到良好支持。如果您需要支持旧版浏览器，请考虑使用后备方案：

.card {
 margin-left: 1rem; /* Fallback */
 margin-inline-start: 1rem;
}

**最后的想法**

切换到 margin-inline-start 等逻辑属性是一个小变化，但对可访问性、可维护性和国际化产生了重大影响。随着网络日益全球化，采用这些属性可确保您的设计具有包容性，并可适应全球用户。

因此，下次使用 margin-left 时，请停下来想一想： margin-inline-start 是否会做得更好？很有可能会。

祝您编码愉快，并希望您的设计在任何语言中都能流畅运行！