我总结了几个初学前端们可能很少接触的几个 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
,你会发现边框的颜色会跟着一起变化,用来做动画也十分的方便。
好了,这几个属性学废融汇贯通之后,相信你也会更自信💪
点个赞再走?