我总结了几个初学前端们可能很少接触的几个 css 属性，一旦你学会了他们，身价倍儿长，专业度迅速提升～
touch-action
touch-action 用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)。常见的几个属性值如下：
| 属性 | 说明 |
|---|---|
| auto | 由浏览器来决定进行哪些操作 |
| none | 不进行任何操作 |
| pan-x | 单指水平平移手势 |
| pan-y | 单指垂直平移手势 |
那这个属性我们可以用来干什么呢？开发过可水平滑动的Swiper的同学，可能有经历过在手机默认浏览器中水平滑动卡顿或不生效的问题，“右滑过快，啪～回退了”（速度还很快）
但是这个问题在 Chrome、Safari 浏览器中却不能复现，而且还异常流畅，QA 同学也没办法只能发起致命催改。
怎么肥事呢，这就涉及到浏览器的默认行为处理了，我们在手机默认浏览器多次点击网页中的链接，实际上会开好几个子页面，为了提升用户体验，浏览器当发现是左右滑动手势的时候就会触发相应回退和前进操作。
要解决这个问题，我们就要抓住问题的关键点：浏览器默认行为，我们只需要在Swiper根容器添加 css 属性 touch-action: pan-y;，奇迹就发生了，bug修复了！！！
pan-y 就是告诉浏览器只需要处理垂直方向的默认行为（滚动）就行了，其他的你别管我。
这个地方一定要注意别写成 touch-action: none;，否则你没法滚动了🙄️
pointer-events
pointer-events 属性用于指定在什么情况下 (如果有) 某个特定的元素可以成为指针事件的target，没错就是指针事件对象（鼠标点击、触摸点击等）中的 target 属性值。常见的属性值如下：
| 属性 | 说明 |
|---|---|
| auto | 与属性未指定时的表现效果相同 |
| none | 元素永远不会成为指针事件的target |
根据属性说明，我们可以推测出用途了，当我们实现一个 cancas 画布覆盖在整个页面上，飘着樱花的时候，当然不希望页面里的点击事件不能响应，我们就可以给 canvas 设置 css 属性 pointer-events: none; ，我们的点击就能穿透 canvas 精确触发下层元素的点击事件。
当然，pointer-events还有其他的属性，主要是用于 SVG 元素的处理，如果你感兴趣，可以深入探索一下，实现异形形状的点击事件，也是非常有意思的呢。
user-select
user-select 属性用于控制用户能否选中文本。常用的属性值如下：
| 属性 | 说明 |
|---|---|
| all | 当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中 |
| none | 元素及其子元素的文本不可选中 |
属性值 user-select: all; 用于提升用户体验特别的有用，比如有这样的片段:
<div>电话：<em>010-</em><span>1234567890</span></div>
我们希望双击到 <span>1234567890</span>也能全选到前面的<em>010-</em>的时候，我们可以嵌套一下:
<div>电话：<span style="user-select:all;"><em>010-</em><span>1234567890</span></span></div>
这样就能完美的全选中整个电话号码了。
属性值 user-select: none; 主要用于防止用户选中复制内容，或者避免多次点击按钮出现蓝色选区的问题。
当我们在做富交互的H5动画页的时候，在 CSS 文件中加入魔法代码：
*:not(input,textarea) {
-webkit-touch-callout: none;
user-select: none;
}
可以大大提升整个页面的操作质感～
-webkit-overflow-scrolling
-webkit-overflow-scrolling 这个属性目前只在 safari 中有支持，控制元素在移动设备上是否使用滚动回弹效果。在支持滚动的元素上指定-webkit-overflow-scrolling: touch; 会让浏览器对这个滚动容器进行特殊的服务加持，因此滚动体验会大大提升。但是好属性不要贪杯，在复杂嵌套滚动的时候要慎重使用，否则会有出现难以理解的bug。
currentColor
这是一个特殊的属性值，也许是最早的css变量，这是我最喜欢用的属性值之一，特别是在有父子嵌套，且多处设置同一个颜色的时候。看名字可以推测出它是颜色值color的引用，也就是说currentColor的值跟color的值是一致的。看下面的例子：
<input style="color:red;border:1px solid currentColor;">
上面的代码就能实现 input 的边框和文字颜一致，我们可以在调试面板随意的调整 color，你会发现边框的颜色会跟着一起变化，用来做动画也十分的方便。
好了，这几个属性学废融汇贯通之后，相信你也会更自信💪
点个赞再走？
