有缺陷的逻辑

这不是 事实 吗？

这就像学习一门新语言。 在某个时刻，你的大脑会从将母语 翻译 成另一种语言转变为用另一种语言 思考 。

除了英语，我不会说其他任何语言，但我听说这是真的。 也许最后一步是用新语言做梦。

但在这里，Jeremy 将其用作学习新 CSS 语法的隐喻。 你首先听说它，然后尝试它，然后理解它，然后你大脑中的一个开关会翻转，你开始直觉地使用它。 确实用新的语法 思考 。

我非常喜欢那一刻。 感觉就像你升级了一层。

Jeremy 文章的悲惨之处在于，存在脱节现象。 就像 逻辑属性 已经出现，我们可以使用它们，我们许多人的大脑也开始切换。 但是……它们并没有被一致地使用。

例如，如果你在用逻辑属性思考并设置边距和填充，你可能会这样做

.button {
  padding-inline: 1rem;
  margin-inline: 1rem;
}

事实上，你甚至可以将原本在从上到下的语言中使用的width设置为inline-size。 但是，一旦@container查询下降，这 正在发生，你就无法将该宽度断点表示为inline-size，它又回到了传统的min-width和max-width。

这将是一件令人沮丧的事情，因为它混淆了我们能够思考的清晰度。 不过，这些东西发展得非常快，因为我刚刚 查看了草案规范（很快就会成为工作草案？），并且示例 2 是

main, aside {
  container: inline-size;
}

.media-object {
  display: grid;
  grid-template: 'img' auto 'content' auto / 100%;
}

@container (inline-size > 45em) {
  .media-object {
    grid-template: 'img content' auto / auto 1fr;
  }
}

所以，看起来这种不一致性已经被解决了。 示例 3 中包含@container (width > 40em)，因此也许它最终能够以任何一种方式使用它们。 我可能会投票让他们只使用逻辑属性，但我认为这艘船即将启航。

Jeremy 还指出，overflow-*属性尚未转换为逻辑属性，因为像overflow-x这样的东西应该是overflow-inline。 目前只有 Firefox 支持该功能。

我希望这很快就能得到解决。 但总的来说，有大量的逻辑属性已准备好用于思考：大小、位置、边距、填充、边框、对齐等等。 哎呀，即使像border-top-left-radius这样的东西现在也可以被认为并用作border-start-start-radius，并且你可以使用float: inline-end代替float: right。