【譯】是時候瞭解 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":{}}]}]}