10個CSS技巧，極大提升使用者體驗

前端小智發表於2022-02-15
CSS
作者：Shadeed
譯者：前端小智
來源：medium

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

一個成功的Web App必須有良好的使用者體驗。當我們談及改善使用者體驗時，你會想到什麼？

其實，有一點是很容易被開發者忽視的，那就是CSS。我們可以使用一些CSS技巧來改善網頁的表現形式、互動細節和可訪問性。

而且這些技巧不需要花費太多時間，也不需要消耗伺服器資源。你只需要花兩個小時學習，然後就可以把它應用到你所有的專案中，並永遠改善使用者體驗。

可點選區域

有時你的按鈕很小，這可能導致使用者無法準確點選按鈕。這種現象經常發生在移動端上。如果使用者點選次數太多，沒有點選他們想要的按鈕，或者點選錯誤的按鈕，會讓他們感到非常沮喪。

那麼，如何解決這個問題呢？有些開發者可能會說：把按鈕做大點。

但網頁中元素的大小往往是固定的，我們不能輕易調整一個元素的大小。而且如果按鈕太大，感覺很奇怪。

一個更好的解決方案是在不改變按鈕原始尺寸的情況下增加其可點選區域。具體來說：我們可以使用偽元素來增加一個元素的可點選區域。

例如，這裡有一個按鈕。

<button id="btn">btn</button>

然後我們可以為它新增一個偽類。

#btn::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
}

這時，如果我們點選按鈕周圍的區域，我們仍然可以觸發按鈕的點選事件。

事例地址：

https://codepen.io/bytefishme...

平滑滾動

當頁面被#連結滾動時，預設效果是這樣的。

這種突然的跳躍會讓人感到不舒服。為了解決這個問題，我們可以使用這個CSS樣式：sroll-behavior: smooth。

事例地址：https://codepen.io/bytefishme...

選擇所有文字

我們的網頁經常需要提供一些內容供使用者選擇，如電話號碼、地址、標題等。而這些文字應該是一個整體，我們希望當使用者點選部分文字時，剩餘的文字會被自動選擇。

要實現這種效果非常簡單，只需使用這個CSS樣式：user-select: all 。使用者選擇的CSS屬性控制使用者是否可以選擇文字。如果它的值是 all，意味著一個元素的所有內容都將被原子化地選擇。

事例地址：https://codepen.io/bytefishme...

如果你想在文字被選中後新增一些額外的樣式，你可以使用::selection 。::selection CSS偽元素將樣式應用於文件中被使用者突出顯示的部分（比如在文字上點選和拖動滑鼠）。

但要記住。只有某些CSS屬性可以和::selection一起使用。

  • color
  • background-color
  • text-decoration 及其相關屬性
  • text-shadow
  • stroke-color, fill-color 和 stroke-width

事例地址：https://codepen.io/bytefishme...

Cursor

在不同的場景下使用不同的滑鼠樣式可以幫助讀者感知頁面的當前狀態，從而改善使用者的互動體驗。

cursor CSS屬性設定滑鼠指標在一個元素上時要顯示的滑鼠指標（如果有的話）。

游標設定應該告知使用者在當前位置可以進行的滑鼠操作，包括文字選擇、啟用幫助或上下文選單、複製內容、調整表格大小，等等。你可以用一個關鍵詞來指定游標的型別，或者載入一個特定的圖示來使用（有可選的回退影像和強制性的關鍵詞作為最後的回退）。

例如：

事例地址：https://codepen.io/bytefishme...

有很多游標樣式，你可以在MDN文件中找到它們。

Text Overflow

現在我們來看看 text-overflow 的問題。如果一個文字容器的內容是從伺服器返回的，或者是由使用者輸入的，那麼就很難預測這個文字會有多長。

如果沒有任何預防措施，你可能會寫出這樣的程式碼。

<head>
  <style>
    .container{
      border: 2px solid red;
      width: 200px;
      height: 60px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="username">bytefish</div>
    <p class="profile">FE, UX Designer</p>
  </div>
</body>

image.png

這個容器有一個固定的寬度和高度，包裹著名字和介紹。

但如果有些使用者的簡介太長，就會導致文字溢位容器，使頁面看起來很糟糕。

image.png

在這一點上，我們可以將溢位的文字摺疊起來。做到這一點就像新增三行CSS樣式一樣簡單。

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

white-space: nowrap; 可以使文字不被包起來。然後我們使用overflow: hidden來隱藏溢位的文字。最後，我們使用 text-overflow: ellipsis 在文字的末尾新增一個圓點，向使用者表明有一些隱藏的文字。

image.png

事例地址：https://codepen.io/bytefishme...

Image

現在我們來討論一下圖片的風格。網路應用中使用的圖片一般由後端提供。你可能已經與後端開發者達成協議，將圖片保持在一個固定的尺寸。然後你寫下這樣的程式碼。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .img-list {
      display: flex;
      flex-direction: row;
      list-style: none;
    }
  </style>
</head>

<body>
  <ul class="img-list">
    <li>
      <img src="https://miro.medium.com/fit/c/128/128/1*TyRLQdZO7NdPATwSeut8gg.png">
    </li>
    <li>
      <img src="https://miro.medium.com/fit/c/128/128/1*pKOfOAOvx-fWzfITATgGRg.jpeg">
    </li>
    <li>
      <img src="https://miro.medium.com/fit/c/128/128/1*mXOVdfMwS0IEcjPXiikJkg.png">
    </li>
  </ul>

</body>

</html>

而網頁看起來是這樣的。

image.png

圖片的排列與我們所期望的一樣。

通常情況下是沒有問題的。但是當我們寫程式碼時，我們不能假設一切都會按照我們的預期發展。我們需要做好充分的準備。如果後端返回的圖片不正常，不符合預期的尺寸，可能大也可能小，那麼佈局就會被打亂。

你可以用這個替換其中一張圖片的連結。

https://miro.medium.com/max/1400/0*zQaS0awtSTOO-JYa.jpg

你會發現，頁面突然變得雜亂無章。

image.png

為了防止這個問題，使我們的頁面更加健壯，我們可以設定圖片的寬度和高度。這樣，我們就不必擔心後端返回的圖片的大小。

img {
  width: 128px;
  height: 128px;
}

image.png

但上述寫法有一個缺點：如果影像本身的長寬比與我們設定的長寬比不一致，影像將被壓縮或拉伸。

為了保持影像的原始長寬比，我們可以使用 object-fit: cover 。

img {
  width: 128px;
  height: 128px;
  object-fit: cover;
}

object-fit 的CSS屬性設定一個被替換的元素的內容，如<img>或<video>，應該如何調整大小以適合其容器。

如果該值是 cover，那麼被替換的內容的大小將保持其長寬比，同時填充元素的整個內容框。如果物件的長寬比與它的盒子的長寬比不一致，那麼該物件將被剪掉以適配。

image.png

無圖片

我們之前討論的情況都是建立在我們能夠得到圖片的前提下。但是，在實際應用中，可能由於後端服務的不穩定，或者使用者自身的網路訊號不好，我們的網頁可能無法正確載入圖片。

當圖片缺失時，瀏覽器的預設樣式是不優雅的，這裡我們可以優化它。

我們可以給 img元素新增一個 onerror 事件。如果在載入圖片時出現了錯誤，那麼我們可以通過 onerror事件給該元素新增一個樣式，並使用404圖片。

img 元素:

<img src="https://miro.medium.com/xxx.jpg" alt='fireworks picture' onerror="this.classList.add('error');">

假設這就是我們的404影像:

https://cdn-images-1.medium.com/max/1600/1*we8wfyztsdo12e2Cww6oVA.jpeg

image.png

下面是 css 程式碼

img.error {
      display: inline-block;
      transform: scale(1);
      content: '';
      color: transparent;
    }
img.error::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #f5f5f5 url('https://cdn-images-1.medium.com/max/1600/1*we8wfyztsdo12e2Cww6oVA.jpeg') no-repeat center / 100% 100%;
    }

這樣，當 img 元素中的圖片連結無法載入圖片時，我們的404圖片將被使用。

image.png

這裡還有一點需要優化。在這種情況下，如果原始圖片沒有被正確載入，使用者就不知道這個圖片應該是什麼。為了方便使用者理解，我們可以將 img 元素的 alt 屬性顯示在頁面上。

img.error::after {
      content: attr(alt);
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      line-height: 2;
      background-color: rgba(0, 0, 0, .5);
      color: white;
      font-size: 12px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

假設img的 alt 屬性是這樣的。

<img src="https://miro.medium.com/xxx.jpg" alt='Log of Medium' >

image.png

事例地址：https://codepen.io/bytefishme...

色彩對比度

當你在設計顏色組合時，你是否考慮過頁面的顏色對比？

你需要知道，世界上有很多色盲和色弱使用者。如果你的頁面的對比度低，可能會導致他們無法正常使用你的產品。無論是出於人文關懷，還是出於留住客戶的考慮，你都應該設計出合適的對比度。

WCAG AA規範指出，所有重要的內容需要有4.5:1以上的色彩對比度。

這裡有一個對比度檢查器的工具。

https://webaim.org/resources/...

事例：

image.png

我們也可以使用Chrome DevTool來檢查一個元素的顏色對比。然後我們可以發現，Medium的網頁也在實踐這一原則。

image.png

image.png

總結

俗話說得好，細節決定成敗。如果你的專案有很多可以改善使用者體驗的細節，你就可以讓使用者感到舒服，你就有更高的成功概率。

~完，我是刷碗智，新的一年我們一起刷刷刷！

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://betterprogramming.pub...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章