提升前端专业认可度的几个CSS属性

avatar
前端切图仔 @豌豆公主

我总结了几个初学前端们可能很少接触的几个 css 属性,一旦你学会了他们,身价倍儿长,专业度迅速提升~

touch-action

touch-action 用于设置触摸屏用户如何操纵元素的区域(例如,浏览器内置的缩放功能)。常见的几个属性值如下:

属性说明
auto由浏览器来决定进行哪些操作
none不进行任何操作
pan-x单指水平平移手势
pan-y单指垂直平移手势

那这个属性我们可以用来干什么呢?开发过可水平滑动的Swiper的同学,可能有经历过在手机默认浏览器中水平滑动卡顿或不生效的问题,“右滑过快,啪~回退了”(速度还很快)

81e3b23408c74d68ad89bd7a58458eed.jpg

但是这个问题在 ChromeSafari 浏览器中却不能复现,而且还异常流畅,QA 同学也没办法只能发起致命催改。

C59324E4605D52CC8C53FC9CB10C05F8.gif

怎么肥事呢,这就涉及到浏览器的默认行为处理了,我们在手机默认浏览器多次点击网页中的链接,实际上会开好几个子页面,为了提升用户体验,浏览器当发现是左右滑动手势的时候就会触发相应回退前进操作。

要解决这个问题,我们就要抓住问题的关键点:浏览器默认行为,我们只需要在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 精确触发下层元素的点击事件。

src=http___c-ssl.duitang.com_uploads_item_201711_20_20171120210628_uKNHM.thumb.400_0.jpeg&refer=http___c-ssl.duitang.jpeg

当然,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;
}

可以大大提升整个页面的操作质感~

u=849842246,2129996819&fm=26&gp=0.jpeg

-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,你会发现边框的颜色会跟着一起变化,用来做动画也十分的方便。

好了,这几个属性学废融汇贯通之后,相信你也会更自信💪

点个赞再走?

1883E654A617504CA45D56A5A9252938.gif