CSS中的双向水平线

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

HTML 中的 dir 属性和CSS中的 dir 属性可以用来设置文本方向和水平流向。有些语言是从左到右 (LTR) 书写的，而有些语言是从右到左 (RTL) 书写的。因此，能够控制文本方向对于创建 Web 文档和界面至关重要。

构建一个同时支持从左到右 (LTR) 和从右到左 (RTL) 布局的界面是一项挑战。Flexbox 和 Grid 布局固然能让事情变得简单，但它们并不能满足我们所有的样式需求。

我们编写的许多 CSS 规则中都包含指定物理方向或边距的规则。例如，在编写 CSS 来布局水平元素时，通常只在一侧设置边距，并将0同一侧的相邻元素（第一个或最后一个）的边距也设置为 1。

.element {
    margin-right: 1rem;
}

.element:last-child {
    margin-right: 0;
}

或者

.element:not(:last-child) {
    margin-right: 1rem;
}

在上面的例子中，我们给除最后一个元素之外的每个元素的右侧都添加了边距。代码是这样写的。但实际上，我们想表达的是在元素之后，沿着文档（或父元素）的水平方向添加边距。

一种常见的样式设置方法blockquote是在引文的一侧添加边框；我们认为这一侧位于引文之前。

这是布尔玛的<blockquote>造型：

.content blockquote {
    background-color: #f5f5f5;
    border-left: 5px solid #dbdbdb;
    padding: 1.25em 1.5em;
}

我们还有很多其他的样式选择，其中我们在 CSS 中指定了侧/方向（左/右），但我们实际的意思是之前/之后。

因此，在构建同时支持从左到右 (LTR) 和从右到左 (RTL) 布局的界面时，一种方法是编写如下 CSS 规则：

.class {}

html[dir="rtl"] .class {}

或者，我们甚至可以为从左到右 (LTR) 和从右到左 (RTL) 的布局加载不同的样式表。然而，这两种方法都需要我们编写更多 CSS 代码，或者配置工具来生成相应的翻转样式。此外，还有一些工具可以自动将 LTR 样式转换为 RTL 样式。

如果能使用更低层次的抽象岂不是更好？如果我们能告诉浏览器我们定位的是元素的前后侧，而不是物理方向的左右，岂不是更好？很多时候，这才是我们真正想要的。这让我想起了这条推文：

基思·J·格兰特

@keithjgrant

编写 CSS 代码时，你是在编写抽象规则，将未知的内容组织到未知的媒介中。这可真够难的。

2017年3月17日下午1:26

CSS 具有所谓的逻辑属性。现在我们可以告诉浏览器我们实际想要表达的意思。例如，我们可以用-left`&` 和 ` &` 代替`& `：-right-inline-start-inline-end

.element:not(:last-child) {
    margin-inline-end: 1rem;
}

类似地，我们可以用-top和代替和。-bottom-block-start-block-end

这意味着我们可以编写一套规则，同时适用于从左到右 (LTR) 和从右到左 (RTL) 的布局。以下是使用该margin-inline-end属性的示例：

使用border-inline-startandpadding-inline-start属性：

Firefox 也支持，因此您可以使用、、等来border-*-*-radius瞄准不同的角落。border-start-start-radiusborder-end-start-radius

所有演示：

如需更深入的解释，您可以参考 Rachel Andrew 的文章《理解逻辑属性和值》。这篇文章不仅涉及 RTL 界面或水平双向 CSS 规则，还涵盖了逻辑维度。

我可以使用它吗？