看看这个 CSS 片段。这是怎么回事？
p {
border-top: 2px solid red;
margin-left: 2rem;
width: 80ch;
}
根据您的网站受众，可能存在零个或三个错误。在解释哪些错误之前，让我们先设置一些上下文。
当您踏上船时，您不会听到“左”或“右”等术语。这是因为船的左/右侧取决于观察者的视角。相反，他们使用“左舷”和“右舷”，这些明确的术语始终指船的同一侧，无论您的位置或说话者的位置如何：
图像由 Pearson Scott Foresman 创建并发布到公共领域。来源
同样的原则也适用于位置的解剖学术语，它允许医生和兽医明确地描述身体部位的位置，无论患者或医生的相对位置如何。
如果您的 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 |
✨ 如果您喜欢这篇文章或我的其他文章并想支持我的工作，请考虑在 GitHub 上赞助我？
以上是你的 CSS 逻辑合理吗？的详细内容。更多信息请关注PHP中文网其他相关文章！
