杂七杂八的部分css新特性记录

发表于 | 分类于 |

最近这两周被部门没啥事 上周两个会 一个D2 一个 CSS Conf 网上找了一些其他人写的东西看了下 学到了几个东西 有没有用就不知道了 也不是都是新的特性 有几个存在都很久了 但是用的不多 实际上可能还挺好用的 也记录一下

1. 长度单位: vm, vh, vmin, vmax

这个在移动端非常有用, 感受一下这个相应式排版 看到的时候相当震惊

2. css函数: counter, calc, attr

attr 暂时没啥用 之直接获取元素的属性 支持度也不高 而且这个属性有点不伦不类 估计我应该不会用

conter 一般和counter-reset属性一起用 用处也不大

calc 这个很早之前就知道了 之前只知道可以做左边固定宽度，右边填满容器的布局 但是这个和css变量一起 就相当牛比了

这里还有过题外 很久很久之前 有个学长还是谁和我说 不要用calc 忘了啥原因了 然后我就一直对这个函数很抵触 这几天看了好几天资料都还没能缓过来 现在想来是不是被那个学长坑惨了 说不定人家只是随便一说 就完全改变了对一个技术的看法 说不定这个函数功能其实还挺强大

3. css变量

我用sass的几个原因中 自定义变量是一个非常重要的原因 这个真的太重要了 我之前对原生css变量的印象还是留在sass变量 用来统一配置什么的 那种层面 结果这两天看了资料 我擦泪 好牛比 一个例子

这东西把css里面涉及到的各种参数和样式完全分离开了 留出css变量作为对外的接口 给js或者其他样式进行处理

一个好处是方便js中通过修改css变量来修改样式

css中 

1
2
3
4
5
6
7
8
::root {
    --dialogBg: #fff;
    --dialogWidth: 30;
}
.dialog{
    backgroud-color: var(--dialogBg);
    width: calc(var(--dialogWidth) * 1px);
}

js中

1
2
3
// with css variables
dialog.style.setProperty("--dialogBg", "#f00");
dialog.style.setProperty("--dialogWidth", 40);

还有这个例子 css里只留了一个 --value的变量 js中也只对这个变量进行操作

另外一个好处是 公共的样式可以更加容易维护 只要修改公共类暴露出来的 变量即可 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
::root{
    --dialogBg: #fff;
}

.dialog{
    backgroud-color: var(--dialogBg);
}

.dialog.error{
    --dialogBg: #f00;
}

.dialog.warning{
    --dialogBg: #ff0;
}

还有这个例子

我超级想在项目中用上css变量了已经

4. offset-path, offset-distance

才修改了属性 设置路径 指定元素位置位于路径上某个地方 主要配合animation使用 做指定路径的动画 这个做运动类型的动画简直太方便了 任何曲线都没有问题 不连续的都没有问题 这个例子

5. @import，@apply, at-rule

import 不多说这个了 目前褒贬不一 主要缺点会中断网络请求 对我来说 这个缺点大于优点了 这个已经存在很久了

apply 使用过sass less之类的肯定都有接触 差不多就是这个 但是我没咋用过 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/** 
 *   with apply
 *   <div class="alert"></div> 
 */
 ::root{
     --dialog: {
        /* base css*/
     }
 }
.alert{
    @apply --dialog;
    background: red;
}

/** 
 *   without apply
 *   <div class="dialog confirm"></div> 
 */
.dialog{
    /* some css*/
}
.confirm{
    background: red;
}

at-rule 是一类规则 这个 包括@import在内的好多都是属于这个的

6. Web Animations API

控制css动画 MDN上的例子 接口实现上也和css动画非常的像

1
2
3
4
5
6
7
8
9
10
11
// auto play
var animateObj = document.getElementById("tunnel").animate([
    { transform: 'translate3D(0, 0, 0)' }, 
    { transform: 'translate3D(0, -300px, 0)' }
], {
    duration: 1000,
    iterations: Infinity
});

// pause
animateObj.pause()

7. clip-path

元素的剪裁范围 ？？？ 我解释不出来这个什么意思 还挺有用的

8. shape-outside

设置元素非矩形边界 例子 有非文本的插入时的文本排版很有用

9. base-shape

CSS 函数 inset, circle, ellipse, polygon, 定义各种形状可以用在clip-path, shape-outside

感觉好多的东西都是从各个其他地方衍生过来的 不是说语言上 而是比如svg里的延伸到css里的过来的各种特性的这种