新增了 Chromium 的逻辑属性简写形式和新的边衬区属性。
从 Chromium 69(2018 年 9 月 3 日)开始, 逻辑属性和值有助于 开发者可以通过逻辑思维模式, 相较于物理、方向和尺寸样式在 Chromium 87 中,简写形式和 偏移,使这些逻辑属性和值更容易写入。 这让 Chromium 与 Firefox 一致,后者支持这些简写形式 自 66 年以来。 Safari 的技术预览版已将这些技术准备就绪。
文档流程
如果您已经熟悉逻辑属性,那么内联和块轴,并且 想回顾相关知识,可以跳过。或者,您也可以在这里简单回顾一下。
在英语中,字母和单词从左向右排列,而段落从上到下堆叠。 繁体中文字母和单词从上到下排列,而段落则堆叠在一起 从右到左仅在这两种情况下,如果我们编写的 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 🤓?