β

理解CSS的逻辑属性和值

W3CPlus 14 阅读
 

特别声明,文本根据@Rachel Andrew的《 Understanding Logical Properties And Values 》一文所整理。

2017年5月18日,W3C的 CSS工作组(CSS Working Group) 发布了 CSS逻辑属性和值(CSS Logical Properties and Values Level 1) 的首份工作草案(First Public Working Draft)。不同的 书写模式(writing mode) 中,可以抽取出共性的抽象概念(如开始位置,或行),这些逻辑抽象概念需要在不同书写模式下映射到左或右、上或下等物理的概念上。一些CSS布局可能依赖这些共性的逻辑概念。该 CSS 模块给出了用于通过逻辑方式(而不是基于物理坐标、书写方向和维映射等)控制布局的逻辑属性和取值(logical properties and values)。这个模块来源于CSS21中关于逻辑属性和值的特性。

到目前为止,CSS逻辑属性和值还没有得到完全的支持,但了解他们可以帮助我们更好地理解CSS布局以及书写模式的交互。

在过去,CSS属性运用于物理维度(尺寸)和方向,将元素的位置映射到 left right top bottom 。使用 float 可以让一个元素向左或向右浮动,可以使用 position top right bottom left 定位元素的偏移量。使用比如 margin-top padding-top 来设置 margin padding border 的值。这些特理属性和值在 top right bottom left 和书写模式有很大的关系,书写模式可以直接改变其方向。比如:

  • 当书写模式 direction ltr (从左向右)时, margin-left 会让该元素距其左侧元素有多少间距( padding border 类似)
  • 当书写模式 direction rtl (从右向左)时, margin-left 不再是让该元素距其侧元素有多少间距了,而是变成了该元素距右侧元素之间有多少间距

如果你使用垂直书写模式,无论是在整个布局中还是在某些元素中,都没有什么意义。这篇文章中接下来将解释CSS如何改变这些,并且可以支持书写模式。在这个过程中,可以解释清楚一些关于Flexbox和Grid布局中一些令人感到困惑的一些事情。

当第一次开始使用CSS Grid并向大家解释其规范时,我注意到 grid-area 属性被用于 grid-row-start grid-row-end grid-column-start grid-column-end 四个属性的简写属性。因此,下面三种书写方式,其达到的效果都是相同的:

.item {
    grid-row-start: 1;
    grid-column-start: 2;
    grid-row-end: 3;
    grid-column-end: 4;
}
.item {
    grid-row: 1 / 3;
    grid-column: 2 / 4;
}
.item {
    grid-area: 1 / 2 / 3 / 4;
}

grid-area 对应的顺序如下:

  • grid-row-start
  • grid-column-start
  • grid-row-end
  • grid-column-end

如果你想深入了解网格区域( grid-area )更详细的内容,可以阅读《 网格区域 》一文,有关于Grid 布局更多的内容可以 点击这里进行了解

这里有两个关键词 *-start *-end ,而我们以前接触的CSS属性,比如 margin padding border 之类的都是以 *-top *-right *-bottom *-left 。那么为什么会是如此呢?如果仔细观察,它们实际上是按照相反的顺序排列的: top left bottom right 。这样一来,CSS工作组不是把事情变得更为困难了?

答案是,这些值 已经偏离了一个基本的假设,即Web上的内容映射到屏幕的物理尺寸,一个句子的第一个单词位于其所在框的左上角。如果你从未遇到过我们用简写的属性设置这些值,那么 grid-area 中的行顺序就变得完全有意义了。我们先设置了两个起始位置(行和列的起始位置),然后设置两个结束位置(行和列的结束位置)。

这意味着,如果书写模式改为垂直模式,那么块的位置仍然相对于文档的书写模式,而不是屏幕的物理属性。这样理解可能有点困惑。咱们来看看@Rachel Andrew在Codepen上给我们提供的一个 示例

了解了书写模式的这个事实,也就解释清楚了为什么Flexbox和Grid是指开始和结束行,而不是将网格映射到 top right bottom left 的物理维度上。

块和内联维度

上面已经提到了一些理解新布局的关键, 块和内联维度 的概念。当你使用新的CSS时,这些术语会不断出现。这两个尺寸(维度)在网格布局上下文中较为容易理解,因为在网格布局中,我们总是使用块和内联轴,所以下面的示例都将使用网格来写案例。

块维度对应于在页面上布局块的顺序。比如你页面中的文本内容,每一段都在另一段下面排列,这些排列的方向是块的维度,所以在网格布局中,这是块轴(Block Axis)。

在CSS网格布局中,块轴也称为行轴,这就是为什么块轴属性是 grid-row-start grid-row-end

因此,内联轴将会穿过块轴,沿着词在句子中的方向分布。在英文语句中,这个轴从左到右。在网格布局中,内联轴属性是 grid-column-start grid-column-end

如果我们把书写模式改变 vertical-lr (垂直模式),这意味着块轴垂直运行,而内联轴沿着直线从上到下。

所以说,如果我们讨论块维度,其实对应的是描述文本段落在普通文档流中布局的方向,内联维度是句子运行的方向。

逻辑属性

所谓CSS逻辑属性,指的是 *-start *-end 以及 *-inline-start *-inline-end *-block-start *-block-start 这类CSS属性,其最终渲染的方向是有逻辑性在里面的。

例如 margin-left 方向是固定的,就左侧间距,没有逻辑;但是, margin-start 有可能是左间距,也有可能是右间距,例如,对于内联元素,如果 direction 属性值是 rtl ,则 margin-start 的表现等同于 margin-right ,如果属性值是 ltr ,则 margin-start 的表现等同于 margin-left ,就表现出了逻辑判断在里面,因此,成为CSS逻辑属性。

逻辑维度

前面我们提到了块和内联维度,其实在CSS的逻辑属性中也分为块和内联维度,从这两个维度定义了 start end 属性。对于 width height 属性,我们使用 block-size inline-size 。我们也可以设置 max-block-size max-inline-size min-block-size min-inline-size 。如果你的Web页面是英文语种,那么 block-size 是指屏幕上块的物理高度, inline-size 指的是物品的物理宽度。如果你使用的是垂直书写模式,那么 block-size 对应的是屏幕上的 width inline-size height

在下面的示例中可以看到这一点。 block-size 150px inline-size 250px 。如果改变``writing-mode`属性的值,其布局也将对应的得到调整:

逻辑border

同样的, border 也有对应的逻辑属性,用来控制元素的边框,而且其工作方式也是类似的。 border 对应的物理属性有:

  • border-top
  • border-top-size
  • border-top-style
  • border-top-color
  • border-right
  • border-right-size
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-size
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-size
  • border-left-style
  • border-left-color

不过, border 的逻辑属性变得有点冗余,具体的逻辑属性有:

  • border-block-start
  • border-block-start-size
  • border-block-start-style
  • border-block-start-color
  • border-inline-start
  • border-inline-start-size
  • border-inline-start-style
  • border-inline-start-color
  • border-block-end
  • border-block-end-size
  • border-block-end-style
  • border-block-end-color
  • border-inline-end
  • border-inline-end-size
  • border-inline-end-style
  • border-inline-end-color

下面的这个示例,第一个盒子使用了逻辑属性 border-block-start-color:green border-inline-end-style:dotted ,第二个盒子使用了物理属性 border-top-color:green border-right-style:dotted 。大家可以通过改变 write-mode 的属性值,看到 border 的物理属性和逻辑属性之间的差异:

margin和padding

margin padding border 同样的。我们先来看他们的物理属性:

  • margin-top
  • margin-left
  • margin-bottom
  • margin-right
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

对应的逻辑属性:

  • margin-block-start
  • margin-inline-start
  • margin-inline-start
  • margin-inline-end
  • padding-block-start
  • padding-inline-start
  • padding-inline-start
  • padding-inline-end

同样通过一个简单的示例向大家演示两者之间的差异:

position的位移属性

position 设置非 static 值时可以控制元素位移。也有物理属性 和 逻辑属性之分。物理属性是我们常见的 top right bottom left 。其逻辑属性就有点差异了:

  • offset-block-start
  • offset-inline-start
  • offset-block-end
  • offset-inline-end

逻辑值

CSS这么多年来,大家都习惯使用物理属性。但也有属性值也带有逻辑性,比如 float clear 对应的 left right 的逻辑值为:

  • inline-start
  • inline-end

浏览器兼容性

如前所述,目前很少有浏览器支持逻辑属性和逻辑值。但是,如果你想现在就开始使用的它们的话。那么就需要借助CSS处理器。比如@Jonathan Neal写的PostCSS插件 postcss-logical 。这样你就可以在项目中编写CSS,然后使用PostCSS插件将逻辑属性和值转换为物理属性。

即使你现在不使用这些属性,但花点时间理解它们如何工作也是一件好事,理解他们可以帮助你更好的处理新的布局方式,也能更好的帮助你更好折理解布局如何工作,而且变得更加容易。

总结

CSS的逻辑属性和逻辑值对于我们来说是一个全新的概念。常见的CSS逻辑属性除了上面介绍的之外还有其他的,更全的属性可以在 MDN文档上查阅到 。从上面的介绍可以得知,CSS的 direction wrioting-mode 这两个属性可以直接影响 *-inline-start *-inline-end *-block-start *-block-end 。事实上,除了这两个属性之外,CSS的 text-orientation 对其也有影响。

乍看上去,有点困惑,但当你真正的掌握了这些概念之后,更有助于你理解新布局的一些困惑。也能轻易的帮助你理解以前无法理解Flexbox和Grid中的一些问题。当然,现在你可能还无法使用,但这不是你不去了解的理由。如果你在这方面有更深入的了解,欢迎在下面的评论中与我们一起分享。

扩展阅读

 
作者:W3CPlus
原文地址:理解CSS的逻辑属性和值, 感谢原作者分享。

发表评论