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);