你的 CSS 逻辑合理吗？

看看这个 CSS 片段。这是怎么回事？

p {
    border-top: 2px solid red;
    margin-left: 2rem;
    width: 80ch;
}

根据您的网站受众，可能存在零个或三个错误。在解释哪些错误之前，让我们先设置一些上下文。

视角问题

当您踏上船时，您不会听到“左”或“右”等术语。这是因为船的左/右侧取决于观察者的视角。相反，他们使用“左舷”和“右舷”，这些明确的术语始终指船的同一侧，无论您的位置或说话者的位置如何：

图像由 Pearson Scott Foresman 创建并发布到公共领域。来源

同样的原则也适用于位置的解剖学术语，它允许医生和兽医明确地描述身体部位的位置，无论患者或医生的相对位置如何。

CSS国际化

如果您的 Web 应用程序在全球范围内使用，您必须设计它们以适应各种语言需求。例如，英语和西班牙语等语言是从左到右 (LTR) 书写的；阿拉伯语和希伯来语是从右到左 (RTL) 书写的；蒙古文和传统日语是从上到下书写的。

所以，当你使用这样的 CSS 声明时：

p {
    margin-left: 2rem;
}

您的意思是(1)您想要在段落的物理左侧添加空格，还是(2)您想要在内容开始之前添加一些空格？对于完全国际化的 UI，正确的答案始终是 (2).

逻辑解决方案

您可以为 LTR 和 RTL 语言创建单独的样式表并有条件地加载它们。甚至还有像 webpack-rtl 插件这样的工具，可以根据原始 LTR 样式表自动生成 RTL 样式表。

但是，最好的解决方案是有条件地应用 CSS 样式，如下所示：

p {
    if writing is left-to-right:
        margin-left: 2rem;
    elseif writing is right-to-left:
        margin-right: 2rem;
    elseif writing is top-to-bottom:
        margin-top: 2rem;
    endif
}

您可以在 CSS 中执行此操作，但语法要简单得多：

p {
    margin-inline-start: 2rem;
}

这个 margin-inline-start 属性是一个 逻辑 CSS 属性，它会根据用户的书写方向动态调整。逻辑属性的工作原理类似于左舷/右舷的类比；它们在不同的书写系统中以明确的方式描述布局。

逻辑属性使用这两个术语定义布局方向：

• 内联：与行内的文本流平行。
• 块：垂直于一行内的文本流。

此图显示了 CSS 支持的所有书写模式的逻辑位置与物理位置的比较：

使用逻辑属性，本文开头所示的初始示例可以重写如下：

p {
    border-top: 2px solid red;
    margin-left: 2rem;
    width: 80ch;
}

更新现有 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中文网其他相关文章！