通过相对流相对简写形式增强逻辑布局

新增了 Chromium 的逻辑属性简写形式和新的边衬区属性。

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

从 Chromium 69（2018 年 9 月 3 日）开始， 逻辑属性和值有助于 开发者可以通过逻辑思维模式， 相较于物理、方向和尺寸样式在 Chromium 87 中，简写形式和 偏移，使这些逻辑属性和值更容易写入。 这让 Chromium 与 Firefox 一致，后者支持这些简写形式 自 66 年以来。 Safari 的技术预览版已将这些技术准备就绪。

显示拉丁语、希伯来语和日语，并在设备框架内呈现占位文本。文本之后有箭头和颜色，有助于将块和内联的 2 个方向联系起来。

文档流程

如果您已经熟悉逻辑属性，那么内联和块轴，并且 想回顾相关知识，可以跳过。或者，您也可以在这里简单回顾一下。

在英语中，字母和单词从左向右排列，而段落从上到下堆叠。 繁体中文字母和单词从上到下排列，而段落则堆叠在一起 从右到左仅在这两种情况下，如果我们编写的 CSS 将“上外边距”， 我们只适当地间隔了 1 种语言样式。如果网页翻译成传统语言 中文翻译为中文，在新的竖向书写模式中，页边距可能意义不大。

因此，盒子的实际面在国际市场上并不是很有用。因此， 支持多种语言的流程；来学习盒式模型的物理面与逻辑面。

您是否检查过 Chrome 开发者工具中的 p 元素？如果是这样，您可能 您可以看到默认的用户代理样式 不是物理的，而是逻辑的。

p {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

Chromium 的用户代理样式表中的 CSS

页边距不像英语读者可能认为的顶部或底部。 是block-start和block-end！这些逻辑属性类似于英国读者 但与日本读者的“右”和“左”很相似。只需编写一次，即可随时随地使用。

正常流程是指网页有意地成为这种多向性的一部分。 当网页内容根据文档方向的变化而更新时，布局及其 所有元素都会纳入流程。详细了解“在”中和“出”流 MDN 或 CSS 显示模块规范。虽然逻辑属性 不需要流畅，因为随着方向的变化，它们会为您承担很多繁重工作。 “流”表示方向，即字母、字词和内容需要沿着哪个方向移动。 这会引导我们阻塞和内联逻辑方向。

禁播方向是指新内容禁播的方向，例如自问 “Where to put the next paragraph?”（将下一段落置于何处？）您可以将其视为“内容块”或“文本块”。 每种语言都有自己的方块和方块排列顺序 各自的 block-axis。block-start 是段落最开始的一侧， 而 block-end 是新段落朝向哪个侧面。

例如，在传统的日语手写中，方块方向从右向左流动：

内嵌方向是字母和单词的移动方向。考虑方向 写字时手臂和手的移动轨迹；沿inline-axis行驶。 inline-start 是开始书写的一面，而 inline-end 是开始书写的一面 写作结束或换行的地方。在上面的视频中，inline-axis 从上到下显示， 但在下一个视频中，inline-axis 从右向左流动。

目前是flow-relative 意味着为一种语言编写的样式将与上下文相关， 并应用于其他语言内容将根据目标语言进行展示。

新的简写形式

以下某些简写形式并非适用于浏览器的新功能，相反， 编写样式的方法，即充分利用能够在两个块上设置值 或内嵌边缘。inset-* 逻辑属性确实带来了新功能， 因为没有现成的方法可以使用逻辑属性指定绝对位置 。边衬区和简写形式可以完美融合在一起， 一次性向您介绍 Chromium 87 中引入的所有新逻辑属性功能。

外边距简写

我们未推出任何新技能，但运用了一些超实用的速记功能：
margin-block和 margin-inline。

长手
margin-block-start: 2ch;
margin-block-end: 2ch;
新建简写形式
margin-block: 2ch;
/* or */
margin-block: 2ch 2ch;

没有“顶部和底部”的简写形式还是“左边和右边”...直到现在！ 您或许会使用 margin: 10px; 的简写形式引用所有 4 个面，现在您 可以使用逻辑属性简写形式轻松引用 2 个互补面。

长手
margin-inline-start: 4ch;
margin-inline-end: 2ch;
新建简写形式
margin-inline: 4ch 2ch;

内边距简写形式

未发布任何新技能，但使用了更方便易用的速记功能：
padding-block和 padding-inline。


长手
padding-block-start: 2ch;
padding-block-end: 2ch;
新建简写形式
padding-block: 2ch;
/* or */
padding-block: 2ch 2ch;

以及 inline 的免费简写集：

长手
padding-inline-start: 4ch;
padding-inline-end: 2ch;
新建简写形式
padding-inline: 4ch 2ch;

边衬区和简写形式

物理属性 top、right、bottom 和 left 都可以写入 inset 属性的值。任何值position都可以受益于 使用边衬区设置侧边。

.cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
}


物理长手
position: absolute;
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;
新的物理简写形式
position: absolute;
inset: 1px 2px 3px 4px;

这看起来应该非常方便！边衬区是各面的简写形式， 其作用与外边距和内边距相同

新功能

与实体的简写形式一样令人兴奋， 其他 inset 简写形式引入的逻辑特征。这些简写形式 便于开发者撰写内容（输入更短字词），但也增加了 布局的潜在覆盖面，因为它们是相对流量的。

物理长手
position: absolute;
top: 10px;
bottom: 10px;
逻辑简写
position: absolute;
inset-block: 10px;


物理长手
position: absolute;
left: 10px;
right: 20px;
逻辑简写
position: absolute;
inset-inline: 10px 20px;

深入阅读和完整的内嵌简写形式和简写形式 。

边框简写形式

边框及其嵌套的 color、style 和 width 属性均已添加 以及新的逻辑简写形式。


物理长手
border-top-color: hotpink;
border-bottom-color: hotpink;
逻辑简写
border-block-color: hotpink;
/* or */
border-block-color: hotpink hotpink;


物理长手
border-left-style: dashed;
border-right-style: dashed;
逻辑简写
border-inline-style: dashed;
/* or */
border-inline-style: dashed dashed;


物理长手
border-left-width: 1px;
border-right-width: 1px;
逻辑简写
border-inline-width: 1px;
/* or */
border-inline-width: 1px 1px;

深入阅读以及完整的边框简写形式和详细列表 。

逻辑属性 <figure> 示例

我们用一个小例子汇总一下。逻辑属性 一幅带说明的图片，用于处理不同的书写和文档方向。

或者试试吧！

您无需执行太多操作，即可使用 <figure> 和几个逻辑属性。如果您想知道所有这些国际化 和我们诚挚的谢意，希望今天的讲解能给您带来一些好处。

Polyfill 和跨浏览器支持

级联或构建工具是添加新旧浏览器等可用选项， 并采用更新后的逻辑属性进行适当间隔。对于级联后备广告，请遵循 逻辑名称，浏览器会使用“最后一个”属性。 分辨率。

p {
  /* for unsupporting browsers */
  margin-top: 1ch;
  margin-bottom: 2ch;

  /* for supporting browsers to use */
  /* and unsupporting browsers to ignore and go 🤷‍♂️ */
  margin-block: 1ch 2ch;
}

不过，这并不是一个适合所有人的完整解决方案。这里是手写的后备 利用 :lang() 伪选择器定位特定语言， 它们的物理间距，最后提供逻辑 间距：

/* physical side styles */
p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

/* adjusted physical side styles per language */
:lang(ja) {
  p {
    /* zero out styles not useful for traditional Japanese */
    margin-top: 0;
    margin-bottom: 0;

    /* add appropriate styles for traditional Japanese */
    margin-right: 1ch;
    margin-left: 2ch;
  }
}

/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}

/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
  /* remove any potential physical cruft.. */
  margin: 0;
  /* explicitly set logical value */
  margin-block: 1ch 2ch;
}

您还可以使用 @supports 来确定是否提供 媒体资源后备：

p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

@supports (margin-block: 0) {
  p {
    margin-block: 1ch 2ch;
  }
}

Sass、PostCSS、 情绪和其他人利用自动捆绑器和/或构建功能 包含各种后备选项或解决方案的时间推介内容。逐一查看 看看哪个与您的工具链和整体网站策略相契合。

后续步骤

将有更多 CSS 提供逻辑属性，但这还没有完成！有一项重大变更 以及此 GitHub 问题中尚未发布的解决方案。 有一个临时解决方案处于草稿中。如果想要为所有对象添加样式 用简写形式写出方框的逻辑边？

物理简写
margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 2px;
逻辑简写
margin: logical 1px 2px 3px 4px;
margin: logical 1px 2px;
margin: logical 2px;

当前的方案草稿意味着您必须在每个 logical 从而应用逻辑等价词，这听起来并不像 非常干一些。

还有其他建议可以在屏蔽或网页一级进行更改 但这可能会在仍然假设物理面的样式中泄露逻辑用途。

html {
  flow-mode: physical;
  /* or */
  flow-mode: logical;
  /* now all margin/padding/etc references are logical */
}

/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */

这题不难！投出您的一票，表达您的意见，我们期待听到您的反馈意见。

想要详细了解逻辑属性？此处提供了详细的参考信息 以及指南和示例，请访问 MDN 🤓?

反馈

  • 如需提议对流相对简写的 CSS 语法进行更改， 首先在 csswg-drafts 代码库中检查现有问题。 如果现有问题均与您的提案不符，请创建新问题。
  • 如需报告 Chromium 在实现相对流简写时出现的错误，请执行以下操作： 请先在 Chromium 错误跟踪器上检查现有问题。 如果现有问题均与您的 bug 不匹配，请创建新问题。