純 CSS 工具提示

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

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

非常簡單明了，對吧？當然，還需要更多代碼來實際設置工具提示的樣式，但不用擔心，有一個很棒的純 CSS 庫，專門用於此目的，名為 Hint.css。

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

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

<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ù)顯示標題和說明：

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

這是一個帶有懸停顯示動畫標題的縮略圖的工作示例：[CodePen 示例鏈接](假設此處應插入 CodePen 鏈接)

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

CSS 計數(shù)器

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

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

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

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

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

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

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

使用 HTML 元素作為背景圖像

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

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

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

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

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

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

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

這是一個示例：[CodePen 示例鏈接](假設此處應插入 CodePen 鏈接)

使用 cubic-bezier() 進行動畫

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

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

老實說，我會選擇後者。