純 CSS 工具提示

許多網(wǎng)站仍然使用 JavaScript 創(chuàng)建工具提示，但實(shí)際上使用 CSS 更容易。最簡(jiǎn)單的解決方案是在 HTML 代碼中使用數(shù)據(jù)屬性提供工具提示文本，例如 data-tooltip="…"。有了這個(gè)標(biāo)記，您可以將以下內(nèi)容放入 CSS 中，以在 attr() 函數(shù)內(nèi)顯示工具提示文本：

.tooltip::after {
  content: attr(data-tooltip);
}

非常簡(jiǎn)單明了，對(duì)吧？當(dāng)然，還需要更多代碼來實(shí)際設(shè)置工具提示的樣式，但不用擔(dān)心，有一個(gè)很棒的純 CSS 庫(kù)，專門用於此目的，名為 Hint.css。

(濫用)自定義數(shù)據(jù)屬性和 attr() 函數(shù)

我們已經(jīng)將 attr() 用於工具提示，但它還有其他一些用例。結(jié)合數(shù)據(jù)屬性，您可以僅使用一行 HTML 代碼構(gòu)建帶有標(biāo)題和說明的縮略圖圖像：

<a class="caption" href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-title="禿鷲" data-description="...">
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174011191897662.jpg"  class="lazy" alt="8 Clever Tricks with CSS Functions " />
</a>

現(xiàn)在，您可以使用 attr() 函數(shù)顯示標(biāo)題和說明：

.caption::after {
  content: attr(data-title);
  ...
}

這是一個(gè)帶有懸停顯示動(dòng)畫標(biāo)題的縮略圖的工作示例：[CodePen 示例鏈接](假設(shè)此處應(yīng)插入 CodePen 鏈接)

注意：生成的內(nèi)容在無障礙方面可能存在問題。關(guān)於 CSS 生成內(nèi)容的輔助功能支持的這篇文章對(duì)此主題進(jìn)行了有用的解讀。

CSS 計(jì)數(shù)器

您可以使用 CSS 計(jì)數(shù)器，這似乎像是魔法。它不是最廣為人知的特性，大多數(shù)人可能認(rèn)為它支持得不是很好，但實(shí)際上，每個(gè)瀏覽器都支持CSS 計(jì)數(shù)器：[Can I Use css-counters?](假設(shè)此處應(yīng)插入Can I Use鏈接)

雖然您不應(yīng)將 CSS 計(jì)數(shù)器用於有序列表（<ol>），但計(jì)數(shù)器非常適合分頁(yè)或在圖庫(kù)中項(xiàng)目下方顯示數(shù)字。您還可以計(jì)算選中項(xiàng)目的數(shù)量，考慮到您需要的代碼很少（並且沒有 JavaScript），這非常令人印象深刻：[CodePen 示例鏈接](假設(shè)此處應(yīng)插入 CodePen 鏈接)。

CSS 計(jì)數(shù)器也非常適合動(dòng)態(tài)更改項(xiàng)目列表中的數(shù)字，這些數(shù)字可以通過拖放重新排序：[CodePen 示例鏈接](假設(shè)此處應(yīng)插入 CodePen 鏈接)。

與最後一個(gè)示例一樣，請(qǐng)記住——生成的內(nèi)容在無障礙方面可能存在問題。

使用 CSS 過濾器實(shí)現(xiàn)磨砂玻璃效果

隨著 iOS 7 的發(fā)布，Apple 為我們帶來了“磨砂玻璃”效果——半透明、模糊的元素，看起來像磨砂玻璃窗。受 Apple 實(shí)現(xiàn)的啟發(fā)，這種效果開始出現(xiàn)在許多地方。在有 CSS 過濾器之前，重現(xiàn)這種效果有點(diǎn)棘手，您必須使用模糊圖像來創(chuàng)建磨砂玻璃效果?，F(xiàn)在，幾乎所有主要瀏覽器都完全支持 CSS 過濾器，因此重現(xiàn)這種效果就容易得多。 [Can I Use css-filters?](假設(shè)此處應(yīng)插入 Can I Use 鏈接)

將來，我們可以使用 backdrop-filter 和 filter() 函數(shù)創(chuàng)建類似的效果，但這兩個(gè)函數(shù)目前僅受 Safari 支持。

使用 HTML 元素作為背景圖像

通常，您會(huì)指定 JPEG 或 PNG 文件作為背景圖像，或者可能是漸變。但您是否知道，使用 element() 函數(shù)，您還可以使用 <div> 作為背景圖像？目前，element() 函數(shù)僅受 Firefox 支持：[Can I Use css-element-function?](假設(shè)此處應(yīng)插入 Can I Use 鏈接)

可能性幾乎是無限的，這裡有一個(gè)來自 MDN 的示例。

使用 calc() 創(chuàng)建更智能的網(wǎng)格

流體網(wǎng)格是一件很棒的事情，但存在一些嚴(yán)重的問題。例如，不可能讓頂部和底部的間距與左側(cè)和右側(cè)的間距大小相同。此外，標(biāo)記非?；靵y，具體取決於您使用的網(wǎng)格系統(tǒng)。即使是 flexbox 本身也不是最終解決方案，但使用 calc() 函數(shù)（可以用作 CSS 中的值），網(wǎng)格可以變得更好。在本網(wǎng)站上的本教程中，George Martsoukos 展示了一些實(shí)際示例，例如具有完美間距的圖庫(kù)網(wǎng)格。使用 Sass 等 CSS 預(yù)處理器，構(gòu)建有創(chuàng)意的網(wǎng)格系統(tǒng)可以非常簡(jiǎn)單易於維護(hù)。由於瀏覽器的支持也幾乎完美，因此 calc() 是您絕對(duì)應(yīng)該使用的便捷功能。 [Can I Use calc?](假設(shè)此處應(yīng)插入 Can I Use 鏈接)

使用 CSS calc() 對(duì)齊 position:fixed 元素

calc() 函數(shù)的另一個(gè)用例是對(duì)齊具有固定位置的元素。例如，如果您有一個(gè)具有流體間距的左側(cè)和右側(cè)的內(nèi)容包裝器，並且您想精確地對(duì)齊該包裝器內(nèi)的固定元素——您將很難確定為“right”或“l(fā)eft”屬性選擇哪個(gè)值。使用 calc()，您可以組合相對(duì)值和絕對(duì)值以完美地對(duì)齊元素：

.tooltip::after {
  content: attr(data-tooltip);
}

這是一個(gè)示例：[CodePen 示例鏈接](假設(shè)此處應(yīng)插入 CodePen 鏈接)

使用 cubic-bezier() 進(jìn)行動(dòng)畫

為了使網(wǎng)站或應(yīng)用程序的 UI 更具吸引力，您可以使用動(dòng)畫，但標(biāo)準(zhǔn)的緩動(dòng)選項(xiàng)非常有限。例如，“l(fā)inear”或“ease-in-out”。像彈跳動(dòng)畫這樣的東西，甚至使用標(biāo)準(zhǔn)選項(xiàng)也不可能實(shí)現(xiàn)。使用 cubic-bezier() 函數(shù)，您可以按照自己的意願(yuàn)精確地設(shè)置元素動(dòng)畫。

有兩種方法可以使用 cubic-bezier()——理解其背後的數(shù)學(xué)原理並自己構(gòu)建它，或者使用 cubic-bezier 生成器。

老實(shí)說，我會(huì)選擇後者。