让我们合乎逻辑
让我们合乎逻辑
这是最初发布的 在我自己的网站上 .
我正在重构一些 CSS 会议 整个周末。我认为切换到使用会很好 逻辑属性 只。我这样做的部分原因是为了让网站更容易翻译成具有不同写作模式的语言，但主要是为了帮助训练 我 在默认情况下使用逻辑属性进行思考。
总而言之，进行得相当顺利。您可以通过打开开发工具来解决问题 会议 并添加一个 写作模式 向 身体 或者 html 元素。
在大多数情况下，切换是顺利的。它主要涉及用 剩下 , 正确的 , 最佳 ， 和 底部 为了 内联启动 , 内联端 , 块启动 ， 和 块端 .
这 边界半径 属性让我有点吃惊。您必须使用速记，例如 边界开始结束半径 ， 不是 边界块开始内联结束半径 （不存在）。因此，您必须牢记属性的顺序：
边框-{{方块方向}}-{{内联方向}}-半径
说到速记，我也不得不吻别一些速记声明。假设我用这个速记来表示类似的东西 利润 或者 填充 ：
保证金：1em 1.5em 2em 0.5em；
这些值适用于 边距顶部 , 右边距 , 边距底部 ， 和 左边距 , 不是 逻辑等价物（ 块启动 , 内联端 , 块端 ， 和 内联启动 ）。因此需要单独的声明：
边距块开始：1em；
边距内联端：1.5em；
边距块端：2em；
边距内联开始：0.5em；
像这样的速记也是如此：
保证金：1em 2em；
这需要写成两个声明：
边距块：1em；
内联边距：2em；
现在 我以前说过 我再说一遍：你不能在媒体查询中使用逻辑属性感觉真的很奇怪。虽然正如我所说：
现在您可以正确地争辩说，在这种情况下，我们正在谈论视口的物理尺寸。所以也许宽度和高度比内联和块更有意义。
但随之而来的是街区（或内联）的新孩子， 容器查询 , 准备好了 容器型 像 内联大小 .我希望我们可以在所有条件查询中使用逻辑属性只是时间问题。
另一个仍然存在认知不匹配的地方是变换和动画。我们有一个 翻译X（） 功能但没有 翻译内联（） .我们有 翻译Y() 但不是 翻译块（） .
上 会议 我正在使用一些 JavaScript 来找出一些动画效果的细节。我正在使用类似的方法 getBoundingClientRect() .它不返回逻辑属性。因此，如果我想根据写作方向调整我的动画，我需要分叉我的 JavaScript 代码。
哦，还有一件事： 纵横比 属性采用以下形式的值 宽度/高度 ， 不是 内联/块 .如果您正在处理图像、视频或其他嵌入式内容，这是有道理的，但使用起来真的很棘手 纵横比 在包含文本的元素上。我的意思是，只要文本是使用自上而下书写模式的语言，它就可以正常工作，但不适用于任何其他语言。
这是最初发布的 在我自己的网站上 .
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
