CSS提高用戶體驗(yàn)的那些事

浠ラ箍發(fā)布于2019-08-29 12:20 / 991人閱讀

1. 選擇合適的鼠標(biāo)光標(biāo)

在有一些觸摸屏上我們可能需要隱藏鼠標(biāo)的光標(biāo)，比如說(shuō)播放器的屏幕上，這種情形下隱藏鼠標(biāo)光標(biāo)能帶來(lái)性能方面的提升。

使用cursor: none;可以達(dá)到隱藏鼠標(biāo)光標(biāo)的效果。

對(duì)于一些舊的瀏覽器可能不支持這些新的光標(biāo)關(guān)鍵字，可以通過(guò)使用老的方式，用一張1 * 1 的透明GIF圖片，然后這樣做：

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

最后我們生成隱藏鼠標(biāo)光標(biāo)的兼容各種情況的css代碼如下：

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

2. 擴(kuò)大按鈕的可點(diǎn)擊區(qū)域

可點(diǎn)擊區(qū)域向外擴(kuò)張往往也可以帶來(lái)可用性的提升。沒(méi)有人愿意對(duì)一個(gè)狹小的按鈕嘗
試點(diǎn)按很多次

比如把元素的熱區(qū)在四個(gè)方向上各向外擴(kuò)大10px，解決辦法：

（1）給button增加border，代碼如下：

button {
    padding: 20px;
    cursor: pointer;
    border: 10px solid transparent;
    background: #58a linear-gradient(#77a0bb, #58a);
    /* 
     * border會(huì)同時(shí)讓按鈕變大
     * 因?yàn)楸尘霸谀J(rèn)情況下會(huì)蔓延到邊框的下層
     * 使用 background-clip 屬性可以把背景限制在原本的區(qū)域內(nèi)
     */
    background-clip: padding-box;
}

效果如下：

這種解決方案并不是很好，邊框會(huì)影響布局，并且有的場(chǎng)景并不能使用邊框，另一種解決方案就是偽元素法，偽元素同樣可以代替其宿主元素來(lái)響應(yīng)鼠標(biāo)交互。

（2）偽元素法：原理就是偽元素在四個(gè)方向都設(shè)置成比宿主大10px，基于偽元素的方法很靈活，基本上可以把熱區(qū)設(shè)置為任何想要的尺寸、位置或形狀，甚至可以脫離元素原有的位代碼如下：

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

3.自定義復(fù)選框的樣式

復(fù)選框和單選框這兩種控件在絕大多數(shù)瀏覽器中仍然是幾乎或完全無(wú)法設(shè)置樣式的，解決方法可以通過(guò)label元素來(lái)設(shè)置樣式，然后把真正的復(fù)選框隱藏起來(lái)，代碼如下：

html部分


Awesome

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

效果如下：

還可以設(shè)置各種狀態(tài)的樣式，checked、focus、disabled。

4.通過(guò)模糊弱化背景

將背景虛化來(lái)突出當(dāng)前的文本內(nèi)容

解決代碼如下：

html部分


    
      這是背景
    
    
      i am a dialog

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

效果對(duì)比圖如下：

5.交互式的圖片對(duì)比控件

對(duì)比兩張圖片的排布方式是經(jīng)常出現(xiàn)的，為了突出圖片反應(yīng)的問(wèn)題
比如這種的圖片對(duì)比交互：

應(yīng)用了一點(diǎn)jQuery，實(shí)現(xiàn)的代碼如下：

html部分

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的大小，提升用戶的體驗(yàn)
     * 先減小它的寬度，在用變形將它放大
     */
    width: 50%;
    transform: scale(2);
    transform-origin: left bottom;
}

js部分

var slider = $(".image-slider");
var div = document.createElement("div");
$(".before").wrap("");

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