CSS 這些你冷落的屬性，其實很好用能極大提升效率

個成功的Web App必須有良好的用戶體驗。當(dāng)我們談及改善用戶體驗時，你會想到什么？

其實，有一點(diǎn)是很容易被開發(fā)者忽視的，那就是CSS。我們可以使用一些CSS技巧來改善網(wǎng)頁的表現(xiàn)形式、交互細(xì)節(jié)和可訪問性。

而且這些技巧不需要花費(fèi)太多時間，也不需要消耗服務(wù)器資源。你只需要花兩個小時學(xué)習(xí)，然后就可以把它應(yīng)用到你所有的項目中，并永遠(yuǎn)改善用戶體驗。

可點(diǎn)擊區(qū)域

有時你的按鈕很小，這可能導(dǎo)致用戶無法準(zhǔn)確點(diǎn)擊按鈕。這種現(xiàn)象經(jīng)常發(fā)生在移動端上。如果用戶點(diǎn)擊次數(shù)太多，沒有點(diǎn)擊他們想要的按鈕，或者點(diǎn)擊錯誤的按鈕，會讓他們感到非常沮喪。

那么，如何解決這個問題呢？有些開發(fā)者可能會說：把按鈕做大點(diǎn)。

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

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

例如，這里有一個按鈕。

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

然后我們可以為它添加一個偽類。

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

這時，如果我們點(diǎn)擊按鈕周圍的區(qū)域，我們?nèi)匀豢梢杂|發(fā)按鈕的點(diǎn)擊事件。

事例地址：

https://codepen.io/bytefishmedium/pen/rNYNoRX

平滑滾動

當(dāng)頁面被#鏈接滾動時，默認(rèn)效果是這樣的。

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

事例地址：https://codepen.io/bytefishmedium/pen/NWwWoKL

選擇所有文本

我們的網(wǎng)頁經(jīng)常需要提供一些內(nèi)容供用戶選擇，如電話號碼、地址、標(biāo)題等。而這些文字應(yīng)該是一個整體，我們希望當(dāng)用戶點(diǎn)擊部分文字時，剩余的文字會被自動選擇。

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

事例地址：https://codepen.io/bytefishmedium/pen/xxPxMZO

如果你想在文本被選中后添加一些額外的樣式，你可以使用::selection 。::selection CSS偽元素將樣式應(yīng)用于文檔中被用戶突出顯示的部分（比如在文本上點(diǎn)擊和拖動鼠標(biāo)）。

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

color
background-color
text-decoration 及其相關(guān)屬性
text-shadow
stroke-color, fill-color 和 stroke-width

事例地址：https://codepen.io/bytefishmedium/pen/gOXOqMz

Cursor

在不同的場景下使用不同的鼠標(biāo)樣式可以幫助讀者感知頁面的當(dāng)前狀態(tài)，從而改善用戶的互動體驗。

cursor CSS屬性設(shè)置鼠標(biāo)指針在一個元素上時要顯示的鼠標(biāo)指針（如果有的話）。

光標(biāo)設(shè)置應(yīng)該告知用戶在當(dāng)前位置可以進(jìn)行的鼠標(biāo)操作，包括文本選擇、激活幫助或上下文菜單、復(fù)制內(nèi)容、調(diào)整表格大小，等等。你可以用一個關(guān)鍵詞來指定光標(biāo)的類型，或者加載一個特定的圖標(biāo)來使用（有可選的回退圖像和強(qiáng)制性的關(guān)鍵詞作為最后的回退）。

例如：

事例地址：https://codepen.io/bytefishmedium/pen/bGYGzRz

有很多光標(biāo)樣式，你可以在MDN文檔中找到它們。

Text Overflow

現(xiàn)在我們來看看 text-overflow 的問題。如果一個文本容器的內(nèi)容是從服務(wù)器返回的，或者是由用戶輸入的，那么就很難預(yù)測這個文本會有多長。

如果沒有任何預(yù)防措施，你可能會寫出這樣的代碼。

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

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

但如果有些用戶的簡介太長，就會導(dǎo)致文本溢出容器，使頁面看起來很糟糕。

在這一點(diǎn)上，我們可以將溢出的文本折疊起來。做到這一點(diǎn)就像添加三行CSS樣式一樣簡單。

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

white-space: nowrap; 可以使文本不被包起來。然后我們使用overflow: hidden來隱藏溢出的文本。最后，我們使用 text-overflow: ellipsis 在文本的末尾添加一個圓點(diǎn)，向用戶表明有一些隱藏的文本。

事例地址：https://codepen.io/bytefishmedium/pen/VwrwgdQ

Image

現(xiàn)在我們來討論一下圖片的風(fēng)格。網(wǎng)絡(luò)應(yīng)用中使用的圖片一般由后端提供。你可能已經(jīng)與后端開發(fā)者達(dá)成協(xié)議，將圖片保持在一個固定的尺寸。然后你寫下這樣的代碼。

<!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>

而網(wǎng)頁看起來是這樣的。

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

通常情況下是沒有問題的。但是當(dāng)我們寫代碼時，我們不能假設(shè)一切都會按照我們的預(yù)期發(fā)展。我們需要做好充分的準(zhǔn)備。如果后端返回的圖片不正常，不符合預(yù)期的尺寸，可能大也可能小，那么布局就會被打亂。

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

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

你會發(fā)現(xiàn)，頁面突然變得雜亂無章。

為了防止這個問題，使我們的頁面更加健壯，我們可以設(shè)置圖片的寬度和高度。這樣，我們就不必?fù)?dān)心后端返回的圖片的大小。

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

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

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

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

object-fit 的CSS屬性設(shè)置一個被替換的元素的內(nèi)容，如<img>或<video>，應(yīng)該如何調(diào)整大小以適合其容器。

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

無圖片

我們之前討論的情況都是建立在我們能夠得到圖片的前提下。但是，在實際應(yīng)用中，可能由于后端服務(wù)的不穩(wěn)定，或者用戶自身的網(wǎng)絡(luò)信號不好，我們的網(wǎng)頁可能無法正確加載圖片。

當(dāng)圖片缺失時，瀏覽器的默認(rèn)樣式是不優(yōu)雅的，這里我們可以優(yōu)化它。

我們可以給 img元素添加一個 onerror 事件。如果在加載圖片時出現(xiàn)了錯誤，那么我們可以通過 onerror事件給該元素添加一個樣式，并使用404圖片。

img 元素:

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

假設(shè)這就是我們的404圖像:

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

下面是 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%;
    }

這樣，當(dāng) img 元素中的圖片鏈接無法加載圖片時，我們的404圖片將被使用。

這里還有一點(diǎn)需要優(yōu)化。在這種情況下，如果原始圖片沒有被正確加載，用戶就不知道這個圖片應(yīng)該是什么。為了方便用戶理解，我們可以將 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;
    }

假設(shè)img的 alt 屬性是這樣的。

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

事例地址：https://codepen.io/bytefishmedium/pen/vYWYMxG

色彩對比度

當(dāng)你在設(shè)計顏色組合時，你是否考慮過頁面的顏色對比？

你需要知道，世界上有很多色盲和色弱用戶。如果你的頁面的對比度低，可能會導(dǎo)致他們無法正常使用你的產(chǎn)品。無論是出于人文關(guān)懷，還是出于留住客戶的考慮，你都應(yīng)該設(shè)計出合適的對比度。

WCAG AA規(guī)范指出，所有重要的內(nèi)容需要有4.5:1以上的色彩對比度。

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

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

事例：

我們也可以使用Chrome DevTool來檢查一個元素的顏色對比。然后我們可以發(fā)現(xiàn)，Medium的網(wǎng)頁也在實踐這一原則。

總結(jié)

俗話說得好，細(xì)節(jié)決定成敗。如果你的項目有很多可以改善用戶體驗的細(xì)節(jié)，你就可以讓用戶感到舒服，你就有更高的成功概率。

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

作者：Shadeed 譯者：前端小智來源：medium 原文：https://betterprogramming.pub/10-css-tricks-that-greatly-improve-user-experience-5ee52886ca4b

頁編程之折疊標(biāo)簽。

HTML<details>標(biāo)簽，同學(xué)們好，這里是免費(fèi)少兒編程知識分享，每天一行代碼誰都能學(xué)會！今天分享的知識是創(chuàng)建一個可以折疊的元素，也就是說可以通過點(diǎn)擊來切換顯示和隱藏，通常用于詞語解釋或者對某些內(nèi)容進(jìn)行注解。

折疊的好處是在最開始的時候可以不用去占用網(wǎng)頁上的空間，不用的時候也可以像這樣收起來，不影響其他內(nèi)容的顯示。用到了HTML5新增的details標(biāo)簽和summary標(biāo)簽。

先來看看今天實例的運(yùn)行效果，網(wǎng)頁上有一個大大的H1標(biāo)簽，這只是為了排版效果，下方才是重點(diǎn)。可以看到有簡介，瀏覽器支持說明123，這些文字的前方無一例外的都有一個三角箭頭，點(diǎn)擊之后就可以展開和收起相應(yīng)的內(nèi)容。展開之后箭頭會變成向下的狀態(tài)，收起之后就會指向右方，隨便點(diǎn)擊看一看都是這樣的沒有問題。

效果各位同學(xué)都已經(jīng)看到了，來看看實現(xiàn)的代碼吧。首先要說明一下，details 和 summary 標(biāo)簽是必須要一起出現(xiàn)的，單獨(dú)出現(xiàn)是沒有任何效果的。summary 標(biāo)簽必須是在details標(biāo)簽內(nèi)部，F(xiàn)Pail向瀏覽器聲明了將在此插入一個可以折疊的元素。

而 TRair標(biāo)簽告訴了瀏覽器，這個折疊元素的標(biāo)題是什么，也就是剛才點(diǎn)擊的內(nèi)容部分是什么。在details標(biāo)簽中，但是沒有在summary標(biāo)簽中的內(nèi)容，就是可以被折疊的內(nèi)容本身。每一個 details 標(biāo)簽和 fully 標(biāo)簽必須一一對應(yīng)。

說人話就是一個details標(biāo)簽，里面只能出現(xiàn)一個 iTunes，samml，samml，samml，這個屁標(biāo)簽是可有可無的。如果說沒有，它內(nèi)容就會和標(biāo)題貼在一起。

為了美觀還是加上一個比較好

而有了這個標(biāo)簽之后也確實能減少很多重復(fù)的工作。

目前國內(nèi)大多數(shù)瀏覽器都支持極速模式，即采用Stot內(nèi)核，因此一般情況下它都能正常顯示。具體情況還需視個人情況而定。

今天的分享就到這里，希望各位同學(xué)能夠認(rèn)真練習(xí)三遍，即使不看視頻也能獨(dú)立完成。所有案例和相關(guān)文檔都可向我索取。下期再見，想學(xué)習(xí)編程，記得關(guān)注哦。

種3D盒子收起來的動畫效果是怎么實現(xiàn)的？1分鐘就可以教會你。

經(jīng)過前兩節(jié)課的學(xué)習(xí)，大家應(yīng)該都知道給容器設(shè)置3D屬性是編寫3D動畫的前提。

·首先給容器body設(shè)置3D動畫屬性。

·接下來肯定就是要寫盒子了，盒子一般有6個面，聰明的各位肯定能夠想到先寫6個面用來展示盒子的6個平面，這種思路肯定是沒有錯的。借助動畫的3D旋轉(zhuǎn)、3D位移等等屬性，肯定可以將6個面去組合組裝成一個盒子。但是想要讓6個DIV組成盒子進(jìn)行立體旋轉(zhuǎn)，沒有一個平面的支撐其實是白費(fèi)力氣。

·如果先寫一個div作為立方體盒子的參考平面，讓平面帶動6個面進(jìn)行旋轉(zhuǎn)位移，就變得非常簡單了。首先在盒子容器中添加6個div作為盒子6個面，但是記得把盒子的最后兩個面用同一個div包裹起來。至于為什么，一會來詳細(xì)講解。先看一下實現(xiàn)的效果，好像還不錯。

·然后去拆解剛才的動畫動作，通過代碼的旋轉(zhuǎn)位移實現(xiàn)一個正方體。利用動畫屬性將組成正方體的平面位移旋轉(zhuǎn)動作進(jìn)行拆解，利用@keyframes進(jìn)行逐幀延遲調(diào)用，這樣就能實現(xiàn)一個完整的動畫的演示。

·一個正方體的動畫折疊動作就已經(jīng)寫完了，回顧一下最后兩個面的折疊。如果想要讓兩個面變成一個協(xié)調(diào)的整體，是需要將最后兩個面一起產(chǎn)生折疊動作的，拆分開來去寫兩個平面，無法實現(xiàn)這種合并動畫的效果。

·最后給整個平面添加上隨機(jī)的角度旋轉(zhuǎn)和剛才的折疊動畫進(jìn)行組合，一個完整的盒子折疊動畫就完成了。

點(diǎn)贊&關(guān)注AUVWEB。

在線咨詢

上一篇：Web前端開發(fā)基礎(chǔ)知識，設(shè)置網(wǎng)頁背景圖，如何在網(wǎng)頁中插入圖片
下一篇：第12天 - 16天搞定前端，CSS的邊距，內(nèi)外有別？

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商