CSS提高用户体验的那些事

1. 选择合适的鼠标光标

在有一些触摸屏上我们可能需要隐藏鼠标的光标，比如说播放器的屏幕上，这种情形下隐藏鼠标光标能带来性能方面的提升。

使用cursor: none;可以达到隐藏鼠标光标的效果。

对于一些旧的浏览器可能不支持这些新的光标关键字，可以通过使用老的方式，用一张1 * 1 的透明GIF图片，然后这样做：

video {
    cursor: url('transparent.gif');
}

最后我们生成隐藏鼠标光标的兼容各种情况的css代码如下：

video {
    cursor: url('transparent.gif');
    cursor: none;
}

2. 扩大按钮的可点击区域

可点击区域向外扩张往往也可以带来可用性的提升。没有人愿意对一个狭小的按钮尝
试点按很多次

比如把元素的热区在四个方向上各向外扩大10px，解决办法：

（1）给button增加border，代码如下：

button {
    padding: 20px;
    cursor: pointer;
    border: 10px solid transparent;
    background: #58a linear-gradient(#77a0bb, #58a);
    /* 
     * border会同时让按钮变大
     * 因为背景在默认情况下会蔓延到边框的下层
     * 使用 background-clip 属性可以把背景限制在原本的区域内
     */
    background-clip: padding-box;
}

效果如下：

这种解决方案并不是很好，边框会影响布局，并且有的场景并不能使用边框，另一种解决方案就是伪元素法，伪元素同样可以代替其宿主元素来响应鼠标交互。

（2）伪元素法：原理就是伪元素在四个方向都设置成比宿主大10px，基于伪元素的方法很灵活，基本上可以把热区设置为任何想要的尺寸、位置或形状，甚至可以脱离元素原有的位代码如下：

.button {
    position: relative;
    /*其他的样式*/
}
.button::after {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
}

3.自定义复选框的样式

复选框和单选框这两种控件在绝大多数浏览器中仍然是几乎或完全无法设置样式的，解决方法可以通过label元素来设置样式，然后把真正的复选框隐藏起来，代码如下：

html部分

<input type="checkbox" id="awesome" />
<label for="awesome">Awesome</label>

css部分

input[type="checkbox"] + label::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 4px;
    border-radius: 4px;
    background: silver;
    text-indent: 2px;
    line-height: 13px;
}

效果如下：

还可以设置各种状态的样式，checked、focus、disabled。

4.通过模糊弱化背景

将背景虚化来突出当前的文本内容

解决代码如下：

html部分

<div class="virtual-container">
    <div class="main">
      这是背景
    </div>
    <p class="alert">
      i am a dialog
    </p>
</div>

css部分

.virtual-container {
  width: 1000px;
  height: 500px;
  position: relative;
}
.main {
  width: 100%;
  height: 100%;
  transition: .6s filter;
  background: #ccc;
  
}

.virtual-container:hover .main {
  filter: blur(2px) contrast(.8) brightness(.8);
} 

.virtual-container .alert {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
    background: #fff;
}

效果对比图如下：

5.交互式的图片对比控件

对比两张图片的排布方式是经常出现的，为了突出图片反应的问题
比如这种的图片对比交互：

应用了一点jQuery，实现的代码如下：

html部分

<div class="image-slider">
    <img src="before.jpg" alt="Before" class="before"/>
    <img src="after.jpg" alt="After" />
</div>

css部分

.image-slider {
    position:relative;
    display: inline-block;
}
.image-slider > div {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 50%; /* 初始宽度 */
    overflow: hidden; /* 让它可以裁切图片 */
}
.image-slider img {
    display: block;
    user-select: none;
    width: 400px;
    height: 400px;
}
.image-slider input {
    position: absolute;
    left: 0;
    bottom: 10px;
    margin: 0;
    /*
     * 增加range的大小，提升用户的体验
     * 先减小它的宽度，在用变形将它放大
     */
    width: 50%;
    transform: scale(2);
    transform-origin: left bottom;
}

js部分

var slider = $('.image-slider');
var div = document.createElement('div');
$('.before').wrap('<div class="img-continer"/>');

var range = document.createElement('input');
range.type = 'range';
range.oninput = function() {
  $('.img-continer').width(this.value + '%');
}; 
slider.append(range);