你的 CSS 邏輯合理嗎？

看看這個 CSS 片段。這是怎麼回事？

根據您的網站受眾，可能存在零個或三個錯誤。在解釋哪些錯誤之前，讓我們先設定一些上下文。

視角問題

當您踏上船時，您不會聽到“左”或“右”等術語。這是因為船的左/右側取決於觀察者的視角。相反，他們使用“左舷”和“右舷”，這些明確的術語始終指船的同一側，無論您的位置或說話者的位置如何：

圖像由 Pearson Scott Foresman 創建並發佈到公共領域。來源

同樣的原則也適用於位置的解剖學術語，它允許醫生和獸醫明確地描述身體部位的位置，無論患者或醫生的相對位置如何。

CSS國際化

如果您的 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

了解更多

• MDN：CSS 邏輯屬性與值

---

✨ 如果您喜歡這篇文章或我的其他文章並想支持我的工作，請考慮在 GitHub 上贊助我？

---

以上是你的 CSS 邏輯合理嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！