图解CSS:CSS逻辑属性

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

自Web诞生以来,我们一直习惯于物理CSS属性,比如我们都知道使用margin-topmargin-rightmargin-bottommargin-bottom来设置元素的外边距,但随着书写模式特性的出现,这些物理特性,比如上、右、下和左的概念已经失去了它们的意义。特别是随着越来越多的Web开发人员要处理国际化业务,那么以前的物理特性已经无法满足业务的需求。换句话说,为了具有不同编写模式的多种语言设计页面时,开发人员必须跨多个元素分别调整这些物理属性,这也成了Web开发者的噩梦。幸运的是,CSS的逻辑属性的出现,可以让开发者根据书写模式来维护布局的完整性。即,根据内容的语义顺序进行动态更新。今天这篇文章,我们将和大家一起来探讨CSS的逻辑属性。

什么是逻辑属性

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中来描述元素盒模型、位置等特性都是采用的物理属性(比如元素的尺寸,方向等),比如我们熟悉的元素位置会映射到toprightbottomleft。在盒模型中都以物理属性为中心,不管是marginpaddingborder还是positionfloat等。

除了toprightbottomleft之外的widthheight都是物理属性之一,比如我们描述一个盒子的大小,就是用widthheight为描述的。但是这些属性和书写模式有着很大的关系,因为书写模式可以直接改变其方向。假设你的网站上有一些从右到左(RTL)的内容,那么左边可能是物理上的右边,因此你要是设置了margin-left: 100px,你可能希望将其替换为margin-right: 100px。但是,如果同时使用从左到右(LTR)和从右到左(RTL)混合,则需要根据不同的CSS属性来设置左或右。如果你考虑垂直写作模式,也会遇到类似的问题,内容可能是物理上的顶部(top)或底部(bottom)。

但在逻辑属性中却不一样,在逻辑属性中没有方向性的概念,只有开始(start)和结束(end)、块(block)和内联(inline)的概念。比如说,在从左到右(LTR)中,startleft,但在从右到左(RTL),它是right。也就是说,逻辑属性更易于适应不同的书写模式。

书写模式

虽然说,在Web排版的时候,我们习惯了从左到右(LTR)的排版,但当你的业务要面对多语言的场景时,你会发现除了熟悉的从左到右的排版之外,你还需要处理从右到左(RTL),从上到下等排版。

在Web开发中,HTML的dir属性取值为ltr可以实现从左到右排版,rtl可以实现从右到左排版。在CSS中的direction属性和dir属性类似,可以定义内联内容在屏幕上的流动方式(排版方式),即ltr是从左到右排版,rtl是从右到左排版。除此之外,CSS中的writing-mode属性除了可以义定内联内容在屏幕上的排版方式之外,还可以定义块内容在屏幕上的排版方式。该属性可以取值:

  • horizontal-tb:定义了内容从左到右水平流动,从上到下垂直流动。下一条水平线位于上一条线下方
  • vertical-rl:定义了内容从上到下垂直流动,从右到左水平流动。下一条垂直线位于上一行的左侧
  • vertical-lr:定义了内容从上到下垂直流动,从左到右水平流动。下一条垂直线位于上一行的右侧
  • sideways-rl:定义了内容从上到下垂直流动,所有字形,甚至是垂直脚本中的字形,都设置在右侧
  • sideways-lr:内容从上到下垂直流动,所有字形,甚至是垂直脚本中的字形,都设置在左侧

就拿上面示例上的圆角来说,如果采用以前我们熟悉的物理属性来描述border-radius的值,那么在不同书写模式下,它的值将要根据不同的模式进行调整:

.card__heading {
    border-radius: 6px 6px 0 0;
}

[data-lang="Japanese"] .card__heading{
    border-radius: 0 6px 6px 0;
}

[data-lang="Mongolian"] .card__heading{
    border-radius: 6px 0 0 6px
}

这就是物理属性在多语言布局中带来的局限性,幸运的是,逻辑属性将彻底解决这一切烦恼。

逻辑属性与物理属性及逻辑值与物理值

CSS中布满了物理位置的关键词,比如我们熟悉的toprightbottomleft。在使用positionstatic值对元素盒子定位时,就要使用这些物理位置来描述元素盒子的偏移量。

另一个用到物理关键词的地方是使用text-align控制文本对齐方式,比如取值为right时文本会右对齐,这也是CSS中的物理属性。当我们为项目增加外边距(margin)、内边距(padding)和边框(border)时会使用像margin-leftpadding-left这样的物理属性。

把这些关键词称为物理属性,是因为它们与你看到屏幕紧密相关,左永远是左,不管文本流动的方向如何。

在开发有多种语言的网站时,如果其中包含了从右侧而不是从左侧开始书写的文字,物理属性就会成为一个问题。浏览器很擅长处理文本方向,不需要真的在一种 rtl (从右到左)的语言下开发,我们也可以一窥究竟。下面的例子里有两个段落,一个段落没有设置 text-align 属性,另一个段落的 text-align 设置为 left。在 html 元素上添加 dir="rtl" 声明,就会把书写模式从默认的 ltr (从左到右)的英语切换为 rtl (从右到左)的语言。我们可以看到,第一段仍然是从左到右显示,因为 text-align 的值为 left,但第二段把文字的流动方向切换成了从右到左。

这只是在使用物理属性和值时引起问题的一个非常简单的例子,它们阻止浏览器切换书写模式,因为这些物理属性和值已经假设文字的流动方向一定是从左到右、从上到下的。

逻辑属性和值不会预设文字方向,这也是为什么在网格布局中要实现对齐到容器的开始位置时使用 start 关键字的原因。对我来说,因为我使用英语工作,所以 start 就是左侧,不过它并不总是代表左侧,并不能根据 start 这个词推断出物理位置。

为什么需要逻辑属性

传统CSS根据屏幕的物理尺寸来定义元素的尺寸、位置,这些值都是物理尺寸。因此,我们使用CSS将元素(盒子)描述为具有宽度(width)和高度(height),用toprightbottomleft来描述元素的位置。而CSS逻辑属性和值定义了这些物理值到它们的逻辑或流相关的映射,例如用开始和结速来描述左和右,顶部和底部。

为什么需要这些映射呢?我们来看一个简单地示例:

<h2>City Lights in New York</h2>
<h2>أضواء المدينة في نيويورك</h2>

如果仅仅按物理属来给标题定义一个左边框以及内容距左边框内距,往往会这样来描述:

h2 {
    border-left: 6px double currentColor;
    padding-left: 5vh;
}

对阅读模式来说,上面的样式适合于英文排版,但对于阿拉伯语来说,上面的样式设置就不太适合,因为阿拉伯语阅读方式是从右向左,也就是左边框变成了右边框,左内距变成了右内距。在逻辑属性还未出现之前,往往我们需要针对阿拉伯语单独做样式处理:

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/css-logical-properties.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部