看看這個 CSS 片段。這是怎麼回事？
根據您的網站受眾，可能存在零個或三個錯誤。在解釋哪些錯誤之前，讓我們先設定一些上下文。
當您踏上船時，您不會聽到“左”或“右”等術語。這是因為船的左/右側取決於觀察者的視角。相反，他們使用“左舷”和“右舷”，這些明確的術語始終指船的同一側，無論您的位置或說話者的位置如何：
圖像由 Pearson Scott Foresman 創建並發佈到公共領域。來源
同樣的原則也適用於位置的解剖學術語，它允許醫生和獸醫明確地描述身體部位的位置，無論患者或醫生的相對位置如何。
如果您的 Web 應用程式在全球範圍內使用，您必須設計它們以適應各種語言需求。例如，英語和西班牙語等語言是從左到右 (LTR) 書寫的；阿拉伯語和希伯來語是從右到左 (RTL) 書寫的；蒙古文和傳統日語是從上到下書寫的。
所以，當你使用這樣的 CSS 宣告時：
您的意思是(1)您想要在段落的物理左側添加空格，還是(2)您想要在內容開始之前添加一些空格？對於完全國際化的 UI，正確的答案總是 (2).
您可以為 LTR 和 RTL 語言建立單獨的樣式表並有條件地載入它們。甚至還有像 webpack-rtl 外掛程式這樣的工具，可以根據原始 LTR 樣式表自動產生 RTL 樣式表。
但是，最好的解決方案是有條件地應用 CSS 樣式，如下所示：
您可以在 CSS 中執行此操作，但語法要簡單得多：
這個 margin-inline-start 屬性是一個 邏輯 CSS 屬性，它會依照使用者的書寫方向動態調整。邏輯屬性的工作原理類似於左舷/右舷的類比；它們在不同的書寫系統中以明確的方式描述佈局。
邏輯屬性使用這兩個術語定義佈局方向：
此圖顯示了 CSS 支援的所有書寫模式的邏輯位置與實體位置的比較：
使用邏輯屬性，本文開頭所示的初始範例可以改寫如下：
更新現有 CSS 樣式表以使用邏輯屬性一開始可能看起來令人畏懼。然而，大部分工作只是簡單地用 inline-start 替換 left，用 inline-end 替換 right，用 block-start 替換 top，用 block-end 替換bottom。有些屬性需要不同的重新命名；例如，border-bottom-left-radius 變成 border-end-start-radius，height 變成 block-size，等等
這種努力是值得的，因為這是一個面向未來的解決方案，可確保每個人都可以訪問您的網站。例如，我參與的 EasyAdmin 專案已經更新了其樣式表以使用邏輯屬性。
這是所有邏輯屬性的參考表，可協助您更新自己的項目：
| Physical Property | Logical Property |
|---|---|
| border-bottom | border-block-end |
| border-bottom-color | border-block-end-color |
| border-bottom-left-radius | border-end-start-radius |
| border-bottom-right-radius | border-end-end-radius |
| border-bottom-style | border-block-end-style |
| border-bottom-width | border-block-end-width |
| border-left | border-inline-start |
| border-left-color | border-inline-start-color |
| border-left-style | border-inline-start-style |
| border-left-width | border-inline-start-width |
| border-right | border-inline-end |
| border-right-color | border-inline-end-color |
| border-right-style | border-inline-end-style |
| border-right-width | border-inline-end-width |
| border-top | border-block-start |
| border-top-color | border-block-start-color |
| border-top-left-radius | border-start-start-radius |
| border-top-right-radius | border-start-end-radius |
| border-top-style | border-block-start-style |
| border-top-width | border-block-start-width |
| bottom | inset-block-end |
| container-intrinsic-height | contain-intrinsic-block-size |
| container-intrinsic-width | contain-intrinsic-inline-size |
| height | block-size |
| left | inset-inline-start |
| margin-bottom | margin-block-end |
| margin-left | margin-inline-start |
| margin-right | margin-inline-end |
| margin-top | margin-block-start |
| max-height | max-block-size |
| max-width | max-inline-size |
| min-height | min-block-size |
| min-width | min-inline-size |
| overscroll-behavior-x | overscroll-behavior-inline |
| overscroll-behavior-y | overscroll-behavior-block |
| overflow-x | overflow-inline |
| overflow-y | overflow-block |
| padding-bottom | padding-block-end |
| padding-left | padding-inline-start |
| padding-right | padding-inline-end |
| padding-top | padding-block-start |
| right | inset-inline-end |
| top | inset-block-start |
| width | inline-size |
✨ 如果您喜歡這篇文章或我的其他文章並想支持我的工作，請考慮在 GitHub 上贊助我？
以上是你的 CSS 邏輯合理嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
