奇技指南
今天,和大家聊一个很简单但很重要的东西:逻辑属性和逻辑值。
说它“简单”,是因为概念上简单;说它“重要”,是因为思路上重要。
本文来自奇舞周刊,作者安佳,360搜索事业部的前端开发工程师,W3C CSS 工作组成员。
什么是逻辑属性和逻辑值?
先来看个例子。这是一段 HTML 代码:
第一章
本章介绍了逻辑属性和逻辑值,这是一个演示示例。
要实现下面的效果:
需要编写 CSS:
section { text-align: left;}h2 { border-left: .3em solid #ccc; padding-left: .5em;}
现在把中文换成阿拉伯语,因为阿拉伯语是从右至左书写的,所以预期的效果是这样的:
基于上面的 CSS,我们要做如下修改:
section { text-align: right; /* left -> right */}h2 { border-right: .3em solid #ccc; /* border-left -> border-right */ padding-right: .5em; /* padding-left -> padding-right */}
那么,问题来了:同一个页面,在遇到不同的书写模式时,却要维护不同的代码。成本有点高。
逻辑属性和逻辑值的引入就是来解决这种问题的。我们可以只写一组 CSS 就能完美适应不同的书写模式。完整代码如下:
第一章
本章介绍了逻辑属性和逻辑值,这是一个演示示例。
الفصل الأول
يقدم هذا الفصل القيم المنطقية والمنطقية ، والتي هي مثال توضيحي.
在上面的 CSS 代码中:
- text-align: start 中的 start 就是逻辑值
- border-inline-start: .3em solid #ccc; 中的 border-inline-start 就是逻辑属性
- padding-inline-start: .5em; 中的 padding-inline-start 也是逻辑属性
坦白讲,逻辑属性和逻辑值并没有引入新的 CSS 特性,它只是提供了一种控制布局的新方式。
哪些属性新增了逻辑值?
现有的 CSS 属性新增的逻辑值text-alignstart endfloat clearinline-start inline-endcaption-sideinline-start inline-endresizeblock inline
CSS 属性值,有这两大类:
- 物理值,是相对页面的。包括 left right top bottom
- 逻辑值(下文也称“流相对值”),是相对内容流的。包括:
- start end
- inline-start inline-end inline
- block-start block-end block
新增了哪些逻辑属性?
有这 6 个逻辑属性组:
以上表格包括单属性(longhand sub-properties)和简写属性(shorthand property)
如何计算逻辑属性和逻辑值?
- 首先,将逻辑值按照一定的规则,映射到物理值上
- 然后,逻辑属性和物理属性一起,根据 CSS 级联 的规则计算出最终的计算值(computed value)
在第一步做映射的时候,有一张表格可供参考,如下:
特别说明,逻辑属性具体映射到哪个物理属性上,这取决于元素自身的书写模式。书写模式是由这三个属性 writing-mode,direction和text-orientation 共同决定的,详见 CSS Writing Modes Level 4。
小结
本文介绍了:
- 什么是逻辑属性和逻辑值,以及它解决的主要问题
- 哪些属性新增了逻辑值
- 新增了哪些逻辑属性
- 如何计算逻辑属性和逻辑值
主要参考
https://www.w3.org/TR/2018/WD-css-logical-1-20180827