杂七杂八的部分css新特性记录
最近这两周被部门没啥事 上周两个会 一个D2 一个 CSS Conf 网上找了一些其他人写的东西看了下 学到了几个东西 有没有用就不知道了 也不是都是新的特性 有几个存在都很久了 但是用的不多 实际上可能还挺好用的 也记录一下
### 1\. 长度单位: vm, vh, vmin, vmax
这个在移动端非常有用, 感受一下这个[相应式排版](http://codepen.io/airen/pen/Mbwveq) 看到的时候相当震惊
### 2\. css函数: counter, calc, attr
`attr` 暂时没啥用 之直接获取元素的属性 支持度也不高 而且这个属性有点不伦不类 估计我应该不会用
`conter` 一般和`counter-reset`属性一起用 用处也不大
`calc` 这个很早之前就知道了 之前只知道可以做`左边固定宽度，右边填满容器的布局` 但是这个和css变量一起 就相当牛比了
这里还有过题外 很久很久之前 有个学长还是谁和我说 不要用`calc` 忘了啥原因了 然后我就一直对这个函数很抵触 这几天看了好几天资料都还没能缓过来 现在想来是不是被那个学长坑惨了 说不定人家只是随便一说 就完全改变了对一个技术的看法 说不定这个函数功能其实还挺强大
### 3\. css变量
我用sass的几个原因中 自定义变量是一个非常重要的原因 这个真的太重要了 我之前对原生css变量的印象还是留在sass变量 用来统一配置什么的 那种层面 结果这两天看了资料 我擦泪 好牛比 [一个例子](http://codepen.io/airen/pen/rWVGXm)
这东西把css里面涉及到的各种参数和样式完全分离开了 留出css变量作为对外的接口 给js或者其他样式进行处理
一个好处是方便js中通过修改css变量来修改样式
css中
```css
::root {
--dialogBg: #fff;
--dialogWidth: 30;
}
.dialog{
backgroud-color: var(--dialogBg);
width: calc(var(--dialogWidth) * 1px);
}
```
js中
```js
// with css variables
dialog.style.setProperty("--dialogBg", "#f00");
dialog.style.setProperty("--dialogWidth", 40);
```
还有[这个例子](https://codepen.io/enxaneta/pen/ZBXMPx) css里只留了一个 `--value`的变量 js中也只对这个变量进行操作
另外一个好处是 公共的样式可以更加容易维护 只要修改公共类暴露出来的 变量即可
```css
::root{
--dialogBg: #fff;
}
.dialog{
backgroud-color: var(--dialogBg);
}
.dialog.error{
--dialogBg: #f00;
}
.dialog.warning{
--dialogBg: #ff0;
}
```
还有[这个例子](https://codepen.io/jasesmith/pen/qqgvZe)
我超级想在项目中用上css变量了已经
### 4\. offset-path, offset-distance
才修改了属性 设置路径 指定元素位置位于路径上某个地方 主要配合`animation`使用 做指定路径的动画 这个做运动类型的动画简直太方便了 任何曲线都没有问题 不连续的都没有问题 [这个例子](http://codepen.io/danwilson/pen/NRzGwV)
### 5\. @import，@apply, at-rule
`import` 不多说这个了 目前褒贬不一 主要缺点会中断网络请求 对我来说 这个缺点大于优点了 这个已经存在很久了
`apply` 使用过sass less之类的肯定都有接触 差不多就是这个 但是我没咋用过
```css
/**
* with apply
*
*/
::root{
--dialog: {
/* base css*/
}
}
.alert{
@apply --dialog;
background: red;
}
/**
* without apply
*
*/
.dialog{
/* some css*/
}
.confirm{
background: red;
}
```
`at-rule` 是一类规则 [这个](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) 包括`@import`在内的好多都是属于这个的
### 6\. Web Animations API
控制css动画 [MDN上的例子](http://codepen.io/rachelnabors/pen/rxpmJL) 接口实现上也和css动画非常的像
```js
// 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
设置元素非矩形边界 [例子](http://codepen.io/SitePoint/pen/BDqLe) 有非文本的插入时的文本排版很有用
### 9\. base-shape
CSS 函数 `inset`, `circle`, `ellipse`, `polygon`, 定义各种形状可以用在`clip-path`, `shape-outside`
感觉好多的东西都是从各个其他地方衍生过来的 不是说语言上 而是比如`svg`里的延伸到css里的过来的各种特性的这种
- Post link: https://xjp.in/2016/12/22/杂七杂八的部分css新特性记录/
- Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 3.0 unless stating additionally.