【译】是时候了解 CSS 逻辑属性了

本文来源于翻译文章 Late to Logical， 其作者 Adam Argyle 长期关注 CSS 逻辑属性发展和使用。在过去的一年，CSS 的逻辑属性取得长足发展，一些新特性开始被浏览器支持。文章主要介绍了 CSS 的逻辑属性及其应用场景。

在已经过去的 2020 年，盒模型的描述方式正在经历一场变革，一种重新定义盒模型的方式正在悄然流行，它不仅可以让前端的布局在逻辑上更加严谨，而且能让开发者以更少的代码写出兼容性更好的页面。它就是本文探讨的主题：CSS 逻辑属性。那么什么是 CSS 逻辑属性呢？首先让我们看一段代码：

p {  /* 🚫 */ text-align: left;  /* 👍 */ text-align: start;
  /* 🚫 */ margin-top: 1rem;  /* 👍 */ margin-block-start: 1rem;}

复制代码

text-align: start 就是一条 CSS 逻辑属性。为了更好的理解逻辑属性这个概念，先让我们一起思考一个问题：对于一个盒模型，left 能代表文字开始方向吗？在中文语境中没问题，对于阿拉伯语呢？left 作为 CSS 典型的物理属性，显然缺乏了逻辑严谨性。这就好比，我们不能假定拿筷子的都是右手，因为左撇子的人通常会用左手拿筷子。这里的 “左” 和 “右” 就是手的物理属性，而 “拿筷子的” 则是手的逻辑属性。同理，并不是所有语言的书写习惯都是从左到右的，让我们看下面这张图：

图片展示了拉丁文，希伯来文和日语三种不同的书写方式。显然如果我们希望能写出适用于不同书写方式的页面，就不能使用从左到右、从上到下的方式观察世界，我们需要一个新的参考点，也就是块轴（block）与行内轴（inline）。如果开始用块轴与行内轴的方式来看待布局，逻辑属性就非常有意义了。此外，逻辑属性在生活中也比较常见，比如船舶方位中使用的 “左舷” 以及 “滑雪运动中的左侧” 等。

船舶的左舷

船舶的左舷（port）和右舷（starboard）是船舶逻辑上的两侧，与船舶自身相关。正如维基百科所描述的那样，左舷和右舷是船舶的方位术语，对应船的左侧和右侧，与观察者的朝向没有关系。也就是说无论观察者面向何方，左舷永远都指向船舶的同一侧。

滑雪运动中的左侧

在滑雪运动中，“滑雪运动员的左侧（ Skier’s left ）” 也是一个逻辑方位，是指滑雪运动员面向山下时，他左面的那一侧。如果不通过逻辑语言来定义 “左侧” 和 “右侧”，那么滑雪运动员在分别朝向山底和朝向山顶时，其左侧和右侧对应的实际位置会完全相反。所以用一个合乎逻辑的方法来讨论方向是很必要的，而 “滑雪运动员的左侧” 和 “滑雪运动员的右侧”，本质上是与语境相关的逻辑属性。

总而言之，在什么样的场合，就要说什么样的话。这样才能更合乎逻辑，以避免造成混淆。

深入理解逻辑属性

我们一直习惯使用物理属性 left、right、top、bottom 描述盒模型，但是这些属性受制于书写模式，一旦书写模式改变，物理属性也随之改变，从而造成问题。但在逻辑属性中却不一样，因为逻辑属性中没有方向性的概念，不受书写模式的干扰，通过逻辑属性，比如：inline-start 和 inline-end 的布局适用于所有书写模式。

button {  padding-block: 1ch;  padding-inline: 2ch;  border-inline: 5px solid var(--brand-1);}

复制代码

上面这段代码使用逻辑属性定义了一个按钮，无论在任何书写模式中，这个按钮都会按我们期待的样式展示。

p {  max-inline-size: 50ch;  margin-block: 1rem;}

复制代码

这是使用逻辑属性定义 p 标签的方式，逻辑属性的重要性在于以用户为中心，无论大家使用哪种语言，前端工程师都无需考虑样式的多样性、复杂性和不可预测性，因为浏览器引擎会对其进行正确布局。

hr {  max-inline-size: 30ch;  margin-inline: auto;  border-block-start: 1px solid hsl(2rad 20% 20% / 20%);}

复制代码

定义盒模型就应该使用盒模型自己的语言，那么从现在开始，请少使用 top、left，多尝试使用逻辑属性，因为逻辑属性才是盒模型自己的语言。

Web 的 “魔法纸张” 现在变得更加神奇，因为它对用户来说可以表现的更加自然，你一定会爱上逻辑属性的。