隨著 WWW（萬(wàn)維網(wǎng)）的發(fā)明，一個(gè)新的數(shù)字時(shí)代誕生了。早期的 WWW 僅包含純 HTML 文檔，這些文檔使用語(yǔ)義 HTML 標(biāo)簽來(lái)區(qū)分網(wǎng)頁(yè)元素之間的基本樣式。后來(lái)，CSS 作為一種基于鍵值的簡(jiǎn)單樣式語(yǔ)言被引入，用于為語(yǔ)義 HTML 標(biāo)簽設(shè)置樣式。CSS 不斷演進(jìn)，現(xiàn)如今，網(wǎng)頁(yè)設(shè)計(jì)師可以使用 CSS 創(chuàng)建現(xiàn)代風(fēng)格、動(dòng)畫(huà)、響應(yīng)式元素和圖像濾鏡，且語(yǔ)法對(duì)開(kāi)發(fā)者友好。

現(xiàn)代 CSS 標(biāo)準(zhǔn)不僅僅是基本的鍵值語(yǔ)法，還提供了函數(shù)和嵌套塊（如 at-rules）。此外，現(xiàn)代 CSS 語(yǔ)法支持偽元素、偽類(lèi)和選擇器組合。這些 CSS 特性旨在提高開(kāi)發(fā)者的生產(chǎn)力，幫助他們構(gòu)建可用的現(xiàn)代網(wǎng)站，這些網(wǎng)站在標(biāo)準(zhǔn)網(wǎng)頁(yè)瀏覽器上運(yùn)行流暢。

以下是一些大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站時(shí)不常用的 CSS 特性。掌握這些鮮為人知的 CSS 特性，以充分利用 CSS 的潛力，根據(jù)高質(zhì)量的設(shè)計(jì)需求，優(yōu)化選擇 CSS 特性來(lái)高效設(shè)計(jì)網(wǎng)站！

使用數(shù)學(xué)和網(wǎng)格函數(shù)進(jìn)行流體設(shè)計(jì)

傳統(tǒng)的響應(yīng)式設(shè)計(jì)概念鼓勵(lì)開(kāi)發(fā)者根據(jù)設(shè)備視口大小調(diào)整網(wǎng)站布局。而流體設(shè)計(jì)概念則建議使用相對(duì)單位和 CSS 數(shù)學(xué)函數(shù)，根據(jù)視口大小動(dòng)態(tài)調(diào)整整個(gè)網(wǎng)站元素。

假設(shè)你需要根據(jù)視口寬度動(dòng)態(tài)調(diào)整標(biāo)題字體大小，使用最小和最大字體大小邊界。你可以使用 CSS 的 clamp() 函數(shù)實(shí)現(xiàn)一行解決方案：

<style>
  h1 { font-size: clamp(2.2em, 3vw + 1em, 2.5em) }
</style>

<h1>CSS math functions</h1>

上述 clamp 函數(shù)調(diào)用使用 3vw + 1em 表達(dá)式動(dòng)態(tài)設(shè)置字體大小，但防止字體大小超出 2.2em 和 2.5em 的邊界。

同樣，你可以使用 min() 和 max() 函數(shù)僅設(shè)置一個(gè)邊界的動(dòng)態(tài)計(jì)算數(shù)值 CSS 值。例如，以下 CSS 代碼片段去除了前一個(gè) clamp() 函數(shù)示例的上限邊界：

h1 { font-size: max(2.2em, 3vw + 1em) }

你可以使用這些 CSS 數(shù)學(xué)函數(shù)根據(jù)流體設(shè)計(jì)原則調(diào)整布局元素的間距和尺寸。此外，現(xiàn)代 CSS 提供了幾個(gè)以網(wǎng)格為重點(diǎn)的函數(shù)，通過(guò)不使用媒體查詢(xún)實(shí)現(xiàn)流體設(shè)計(jì)以提高響應(yīng)性。

看一下以下的 HTML 代碼片段：

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
    grid-gap: 1em;
    justify-self: center;

    > div {
      background: #ddd;
      padding: calc(2vw + 0.5em);
      font-size: calc(1vw + 1em); 
      font-weight: bold;
      text-align: center;
      border-radius: 0.5em;
    }
  }
</style>   
<div class="container">
  <div>Block 1</div>
  <div>Block 2</div>
  <div>Block 3</div>
  <div>Block 4</div>
</div>

使用 CSS 數(shù)學(xué)階梯值函數(shù)

每種通用編程語(yǔ)言通常提供十進(jìn)制舍入函數(shù)和內(nèi)置余數(shù)/取模運(yùn)算符，以實(shí)現(xiàn)一些通用的數(shù)學(xué)算法。CSS 規(guī)范在流行的舊 calc() 函數(shù)后開(kāi)始引入更多數(shù)學(xué)函數(shù)。自 2024 年起，每個(gè)流行的網(wǎng)絡(luò)瀏覽器都最終在其 CSS 引擎中添加了 round()、rem() 和 mod() 階梯值函數(shù)。

假設(shè)你使用 --width CSS 變量發(fā)送 1 到 1000 之間的任何像素值，但你需要使用最接近的 10 而不使用 JavaScript。以下 CSS 代碼片段可以實(shí)現(xiàn)這一目標(biāo)：

<style>
  :root { --width: 527px }
  .container {
    background: #aaa;
    width: round(var(--width), 25px);
    height: 2em;
  }
</style>   

<div class="container"></div>

在瀏覽器上運(yùn)行上述 HTML 片段并增加 --width 變量。容器寬度只會(huì)更新為可以被 25 整除的像素值，如下預(yù)覽所示：

round() 函數(shù)還允許開(kāi)發(fā)者自定義舍入策略，如官方 MDN 文檔所述。

rem() 函數(shù)讓你在 CSS 中使用 JavaScript 的 % 運(yùn)算符，并幫助你找到特定被除數(shù)-除數(shù)對(duì)的余數(shù)，如下面的 CSS 片段所示：

:root {
  --width: 50em;
  --block: 15em;
  --extra: rem(var(--width), var(--block));  /* --extra: 5em */
}

mod() 函數(shù)的行為與 rem() 函數(shù)相似，但其結(jié)果總是取除數(shù)的符號(hào)。

使用媒體查詢(xún)超越傳統(tǒng)響應(yīng)式設(shè)計(jì)

過(guò)去，大多數(shù)網(wǎng)站使用固定寬度，有些甚至標(biāo)明用戶需要特定的屏幕分辨率才能獲得更好的可用性。響應(yīng)式設(shè)計(jì)概念引入了一種使用 CSS 媒體查詢(xún)?yōu)椴煌聊讳秩靖呖捎眯跃W(wǎng)站布局的方法。我們都知道媒體查詢(xún)的響應(yīng)式設(shè)計(jì)技巧，但媒體查詢(xún)不僅僅是為響應(yīng)式設(shè)計(jì)實(shí)現(xiàn)的——它們還解決了一些其他關(guān)鍵用例。

例如，你可以使用媒體查詢(xún)?yōu)榇蛴∥臋n提供自定義樣式：

@media print {
  header, footer {
    display: none;
  }
}

打印預(yù)覽窗口可以幫助測(cè)試打印媒體類(lèi)型，因此將上述 CSS 片段添加到現(xiàn)代網(wǎng)頁(yè)中，然后按 Ctrl + P 鍵組合。

可以使用 display-mode 媒體查詢(xún)功能來(lái)調(diào)整網(wǎng)頁(yè)全屏模式的樣式，如下所示：

@media (display-mode: fullscreen) {
  body {
    margin: 0;
    padding: 2em;
    border: 0.5em solid #aaa;
  }
}

上述 CSS 片段僅在全屏模式下應(yīng)用邊框。還可以使用 aspect-ratio 媒體查詢(xún)功能檢查設(shè)備的縱橫比：

@media (aspect-ratio: 16 / 9) {
  body { background: darkcyan }
}

Chrome 設(shè)備模式可以幫助我們測(cè)試上述代碼片段，如下圖預(yù)覽所示：

媒體查詢(xún)還提供各種媒體功能，以檢查設(shè)備方向、系統(tǒng)顏色主題設(shè)置、JavaScript 是否啟用/禁用、屏幕 DPI（每英寸點(diǎn)數(shù)）值等。請(qǐng)從官方 MDN 文檔查看所有支持的媒體功能。

自定義原生表單控件的 CSS

基礎(chǔ)的 HTML 表單控件，如按鈕、文本輸入、單選按鈕和復(fù)選框，從早期的 HTML 規(guī)范開(kāi)始就可用。后來(lái)，HTML 規(guī)范引入了范圍滑塊、日期選擇器、顏色選擇器等控件，以構(gòu)建現(xiàn)代 Web 應(yīng)用程序。然而，大多數(shù)開(kāi)發(fā)者不喜歡這些原生表單控件，因?yàn)樗鼈兊目啥ㄖ菩詥?wèn)題。他們使用基于 CSS 的自定義表單控件，但現(xiàn)在 CSS 開(kāi)始引入新的屬性以自定義原生表單控件。

accent-color 屬性允許你更改原生表單控件的默認(rèn)配色方案：

<input type="checkbox" style="accent-color: cadetblue"/>
<input type="radio" style="accent-color: teal"/>
<input type="range" style="accent-color: hotpink"/><br/>
<progress style="accent-color: darkcyan"></progress>

上述代碼片段以不同的顏色方案渲染原生表單控件，如下預(yù)覽所示：

accent-color 屬性通過(guò)更新基于輸入顏色的所有原生表單控件的子元素來(lái)生成可訪問(wèn)的顏色方案。目前，此功能僅適用于上述示例中顯示的表單元素。

CSS 還提供了 color-scheme 屬性，可與 accent-color 屬性一起使用，以提高在明亮和暗黑的系統(tǒng)主題上的原生表單控制可見(jiàn)性：

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }

  input[type="checkbox"], 
  input[type="radio"], 
  input[type="range"],
  progress {
    accent-color: white;
    color-scheme: dark;
  }
}

上述媒體查詢(xún)按如下方式更改原生表單控制顏色方案：

在未來(lái)，CSS 將提供新的屬性來(lái)調(diào)整原生表單控件樣式，并擴(kuò)展 accent-color 對(duì)其他原生元素的支持，但你無(wú)疑可以使用現(xiàn)有的 CSS 功能來(lái)自定義文本輸入和按鈕。

使用 CSS 計(jì)數(shù)器和 @counter-style

CSS 計(jì)數(shù)器特性提供了一種創(chuàng)建計(jì)數(shù)器的方法，你可以在 CSS 選擇器中增加/減少計(jì)數(shù)器。我們可以將此功能應(yīng)用于各種用例。一個(gè)簡(jiǎn)單的用例是根據(jù)元素的出現(xiàn)次數(shù)顯示計(jì)數(shù)器值。

例如：

<style>
  :root { counter-reset: references }
  a[href]:empty { text-decoration: none }

  a[href]:empty::after {
    counter-increment: references;
    content: '[' counter(references) ']';
  }
</style>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in 
  eleifend dolor <a ></a>. Integer mauris 
  eros, posuere vitae ex feugiat, pretium ultrices 
  ex <a ></a>. Nulla et nibh feugiat, 
  pharetra ipsum vel, accumsan augue 
  <a ></a>.
</p>

以上 CSS 定義創(chuàng)建了一個(gè)名為 references 的計(jì)數(shù)器，并使用 CSS 計(jì)數(shù)器為空的超鏈接標(biāo)簽顯示 IEEE 引用格式。在這里，我們?cè)?nbsp;:root 選擇器中初始化計(jì)數(shù)器為 0，并通過(guò)每個(gè)空超鏈接的 ::after 偽類(lèi)增加它。最后，我們通過(guò)訪問(wèn) counter() 函數(shù)的計(jì)數(shù)器值使用 content 屬性渲染計(jì)數(shù)器值。以上 HTML 文檔渲染出以下結(jié)果：

HTML 具有內(nèi)置的有序和無(wú)序列表樣式，但在某些情況下，我們必須從頭開(kāi)始或通過(guò)擴(kuò)展現(xiàn)有樣式來(lái)實(shí)現(xiàn)自定義樣式。 @counter-style at-rule 允許我們創(chuàng)建新的或擴(kuò)展的列表樣式。假設(shè)，需要通過(guò)添加周?chē)睦ㄌ?hào)并使用單零填充來(lái)自定義內(nèi)置的 decimal 列表樣式類(lèi)型。使用 CSS 計(jì)數(shù)器可以實(shí)現(xiàn)這個(gè)需求，但使用 @counter-style 可以減少你為此功能需要編寫(xiě)的 CSS 代碼：

<style>
  @counter-style modified-alpha {
    system: extends alpha;
    prefix: "[ ";
    suffix: " ] ";
    pad: 2 "0";
  }
  
  ol { list-style-type: modified-alpha }
</style>

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>TypeScript</li>
  <li>Bootstrap</li>
</ol>

上述 HTML 片段渲染了一個(gè)具有自定義列表樣式的有序列表，如下預(yù)覽所示：

不創(chuàng)建專(zhuān)用關(guān)鍵幀的 CSS 動(dòng)畫(huà)

在過(guò)去，網(wǎng)頁(yè)開(kāi)發(fā)者必須編寫(xiě) JavaScript 算法來(lái)實(shí)現(xiàn) DOM 元素的動(dòng)畫(huà)效果。現(xiàn)在，我們只需使用各種內(nèi)置的元素轉(zhuǎn)換算法和標(biāo)準(zhǔn)屬性，就可以?xún)H用 CSS 來(lái)實(shí)現(xiàn) DOM 元素的動(dòng)畫(huà)。眾所周知的 CSS 動(dòng)畫(huà)方法使用一組關(guān)鍵幀和 @keyframes at-rule。

最近發(fā)現(xiàn)了一篇有趣的文章，注我們可以在關(guān)鍵幀中更新 CSS 變量。這種技術(shù)讓我們可以使用動(dòng)態(tài)更新的 CSS 變量來(lái)動(dòng)畫(huà)化多個(gè)元素，而無(wú)需編寫(xiě)多個(gè)關(guān)鍵幀塊。

看一下以下的 CSS 代碼片段：

@property --t {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

@keyframes tick {
  from { --t: 0 }
  to   { --t: 100000 }
}

:root { animation: tick 86400s linear infinite }

以上的 CSS 片段定義了一個(gè)類(lèi)型化的自定義屬性（變量），并僅使用兩個(gè)全局關(guān)鍵幀進(jìn)行更新。然后，我們從 :root 選擇器啟動(dòng)動(dòng)畫(huà)，以循環(huán)更新 --t 變量。

可以使用 --t 變量作為動(dòng)畫(huà)時(shí)鐘，并使用 CSS 函數(shù)創(chuàng)建動(dòng)畫(huà)。在這里，我們不對(duì) DOM 元素進(jìn)行動(dòng)畫(huà)處理——我們只是啟動(dòng)一個(gè)全局動(dòng)畫(huà)時(shí)鐘，我們可以用它來(lái)處理任何 CSS 屬性！

以下代碼片段使用上述動(dòng)畫(huà)時(shí)鐘對(duì)兩個(gè) DOM 元素進(jìn)行動(dòng)畫(huà)處理，而無(wú)需使用動(dòng)畫(huà)關(guān)鍵幀：

<style>
  /* Previous CSS snippet goes here... */

  div > div {
    background: #555;
    width: 2em;
    height: 2em;
    margin-top: 2em;
    border-radius: 50%;
  }
  
  div > div:first-child { translate: calc(sin(var(--t)) * 200px + 200px) }
  div > div:last-child { translate: calc(cos(var(--t)) * 200px + 200px) }

</style>

<div>
  <div></div>
  <div></div>
</div>

在這里，我們甚至不使用緩動(dòng)算法，但由于最新的 CSS 三角函數(shù)，我們得到了如下的平滑動(dòng)畫(huà)：

結(jié)論

通過(guò)掌握這些鮮為人知的 CSS 特性，你可以根據(jù)高質(zhì)量設(shè)計(jì)需求，優(yōu)化選擇 CSS 特性，高效設(shè)計(jì)網(wǎng)站。希望這些小技巧能幫助你在網(wǎng)頁(yè)設(shè)計(jì)中更上一層樓！