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

{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文来源于翻译文章 ","attrs":{}},{"type":"link","attrs":{"href":"https://css-tricks.com/late-to-logical/","title":"","type":null},"content":[{"type":"text","text":"Late to Logical","attrs":{}}]},{"type":"text","text":"， 其作者 Adam Argyle 长期关注 CSS 逻辑属性发展和使用。在过去的一年，CSS 的逻辑属性取得长足发展，一些新特性开始被浏览器支持。文章主要介绍了 CSS 的逻辑属性及其应用场景。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在已经过去的 2020 年，盒模型的描述方式正在经历一场变革，一种重新定义盒模型的方式正在悄然流行，它不仅可以让前端的布局在逻辑上更加严谨，而且能让开发者以更少的代码写出兼容性更好的页面。它就是本文探讨的主题：CSS 逻辑属性。那么什么是 CSS 逻辑属性呢？首先让我们看一段代码：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":"p {\n /* 🚫 */ text-align: left;\n /* 👍 */ text-align: start;\n\n /* 🚫 */ margin-top: 1rem;\n /* 👍 */ margin-block-start: 1rem;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"text-align: start","attrs":{}}],"attrs":{}},{"type":"text","text":" 就是一条 CSS 逻辑属性。为了更好的理解逻辑属性这个概念，先让我们一起思考一个问题：对于一个盒模型，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"left","attrs":{}}],"attrs":{}},{"type":"text","text":" 能代表文字开始方向吗？在中文语境中没问题，对于阿拉伯语呢？","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"left","attrs":{}}],"attrs":{}},{"type":"text","text":" 作为 CSS 典型的物理属性，显然缺乏了逻辑严谨性。这就好比，我们不能假定拿筷子的都是右手，因为左撇子的人通常会用左手拿筷子。这里的 “左” 和 “右” 就是手的物理属性，而 “拿筷子的” 则是手的逻辑属性。同理，并不是所有语言的书写习惯都是从左到右的，让我们看下面这张图：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/85/85649da2c717188aec0a13672411a519.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"图片展示了拉丁文，希伯来文和日语三种不同的书写方式。显然如果我们希望能写出适用于不同书写方式的页面，就不能使用从左到右、从上到下的方式观察世界，我们需要一个新的参考点，也就是块轴（block）与行内轴（inline）。如果开始用块轴与行内轴的方式来看待布局，逻辑属性就非常有意义了。此外，逻辑属性在生活中也比较常见，比如船舶方位中使用的 “左舷” 以及 “滑雪运动中的左侧” 等。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"船舶的左舷","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/82/82e7e53d4661dc23bb0d689e37d821b4.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"船舶的左舷（port）和右舷（starboard）是船舶逻辑上的两侧，与船舶自身相关。正如维基百科所描述的那样，左舷和右舷是船舶的方位术语，对应船的左侧和右侧，与观察者的朝向没有关系。也就是说无论观察者面向何方，左舷永远都指向船舶的同一侧。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"滑雪运动中的左侧","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/28/2820787e1563e348de02ec2927fbcc8e.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在滑雪运动中，“滑雪运动员的左侧（ Skier’s left ）” 也是一个逻辑方位，是指滑雪运动员面向山下时，他左面的那一侧。如果不通过逻辑语言来定义 “左侧” 和 “右侧”，那么滑雪运动员在分别朝向山底和朝向山顶时，其左侧和右侧对应的实际位置会完全相反。所以用一个合乎逻辑的方法来讨论方向是很必要的，而 “滑雪运动员的左侧” 和 “滑雪运动员的右侧”，本质上是与语境相关的逻辑属性。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"总而言之，在什么样的场合，就要说什么样的话。这样才能更合乎逻辑，以避免造成混淆。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"深入理解逻辑属性","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们一直习惯使用物理属性 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"left","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"right","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"top","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"bottom","attrs":{}}],"attrs":{}},{"type":"text","text":" 描述盒模型，但是这些属性受制于书写模式，一旦书写模式改变，物理属性也随之改变，从而造成问题。但在逻辑属性中却不一样，因为逻辑属性中没有方向性的概念，不受书写模式的干扰，通过逻辑属性，比如：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"inline-start","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"inline-end","attrs":{}}],"attrs":{}},{"type":"text","text":" 的布局适用于所有书写模式。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":"button {\n padding-block: 1ch;\n padding-inline: 2ch;\n border-inline: 5px solid var(--brand-1);\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面这段代码使用逻辑属性定义了一个按钮，无论在任何书写模式中，这个按钮都会按我们期待的样式展示。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":"p {\n max-inline-size: 50ch;\n margin-block: 1rem;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这是使用逻辑属性定义 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"p","attrs":{}}],"attrs":{}},{"type":"text","text":" 标签的方式，逻辑属性的重要性在于以用户为中心，无论大家使用哪种语言，前端工程师都无需考虑样式的多样性、复杂性和不可预测性，因为浏览器引擎会对其进行正确布局。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":"hr {\n max-inline-size: 30ch;\n margin-inline: auto;\n border-block-start: 1px solid hsl(2rad 20% 20% / 20%);\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"定义盒模型就应该使用盒模型自己的语言，那么从现在开始，请少使用 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"top","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"left","attrs":{}}],"attrs":{}},{"type":"text","text":"，多尝试使用逻辑属性，因为逻辑属性才是盒模型自己的语言。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/fd/fda21cb1c7977d8c52145205f6f5e7ce.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Web 的 “魔法纸张” 现在变得更加神奇，因为它对用户来说可以表现的更加自然，你一定会爱上逻辑属性的。","attrs":{}}]}]}