聊一聊 CSS 的十個技巧和竅門

作者：佚名 2024-07-24 11:40:33

Web 開發人員使用 CSS 樣式語言為語義 HTML 文檔添加動態、富有創意且用戶友好的樣式。

剛接觸 CSS 的 Web 開發人員通過練習基本的 CSS 選擇器語法、屬性、@ 規則和偽類/元素來開始學習樣式。

了解這些 CSS 功能足以構建一個易于訪問、美觀、用戶友好的現代網站，但要了解 CSS 的全部潛力，還有很多東西需要學習。

當 Web 開發人員廣泛使用 CSS 設計網站前端并嘗試使用 CSS 時，他們經常會發現新功能、解決方法和技術，這些功能、解決方法和技術可以幫助他們提高工作效率并提高 CSS 技能。

這些技巧和竅門可幫助每個人高效地實施快速、有吸引力的 CSS 純解決方案來解決設計問題，而無需編寫基于 JavaScript、SVG 和 HTML Canvas 的實現。例如，現在 Web 開發人員無需編寫一行 JavaScript 代碼即可創建快速、輕量級的倒計時器。

在本文中，我將介紹10個 CSS 技巧和竅門，幫助您充分利用 CSS，高效地構建現代 Web 界面，而無需使用 JavaScript、SVG、HTML Canvas 或集成繁重的第三方 UI 工具包和庫。練習這些技巧可以擴展您的 CSS 掌握能力！

1. 讓元素居中的最簡單方法

正確放置 UI 元素是設計高質量界面的必備條件。在大多數情況下，Web 開發人員必須將子元素垂直和水平居中。由于布局系統和定位功能不同，CSS 無法提供單一屬性來讓任何元素居中。

在響應式設計流行之前，Web 開發人員使用負邊距技巧來讓 HTML 元素居中——現在，您會發現使用各種現代和舊 CSS 屬性讓元素居中的無數方法，但在 CSS 中讓元素居中的最簡單方法是什么？

現代 CSS 網格功能支持使用 place-items 簡寫屬性讓網格塊居中，因此我們可以使用它來讓子元素居中，如下所示：

<div>
  <button>A centered button</button>
</div>


<style>
  div {
    height: 100vh;
    display: grid;
    place-items: center;
  }
</style>

2. 使用 CSS 邊框創建三角形

內置 SVG 實現通常提供功能齊全的方法來生成任何高級自定義形狀。

因此，標準 HTML 實現不提供內置標簽來使用標準 DOM 元素創建任意形狀，但我們可以使用標準 CSS 屬性將 div 元素轉換為各種幾何形狀，即使用邊框半徑創建圓形。

默認 div 元素中邊框渲染的行為在流行的瀏覽器中是相同的，它允許我們按如下方式創建三角形：

<div></div>


<style>
  div {
    border-right: 20px solid transparent;
    border-bottom: 20px solid darkcyan;
    border-left: 20px solid transparent;
  }
</style>

您可以通過對不同邊框邊使用可見顏色以及改變邊框粗細來創建各種三角形。

3. 純 CSS 倒計時

過去的 Web 開發人員通常使用 JavaScript 在網頁上創建哪怕是簡單的倒計時器。CSS 動畫功能可幫助 Web 開發人員動態更新 DOM 元素視覺效果，而無需編寫 JavaScript 代碼。

因此，現在我們可以通過定義多個關鍵幀來創建標準的 CSS 動畫創建方法來創建倒計時。

我們可以使用 @property at-rule、CSS 變量和 CSS 計數器，以創紀錄的時間用純 CSS 創建靈活、可自定義的倒計時，而無需自己創建那么多關鍵幀：

<div></div>
<style>


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


  @keyframes timer {
    from { --c: 10 }
    to   { --c: 0 }
  }


  :root { animation: timer 5s linear }


  div::after {
    counter-reset: c var(--c);
    content: counter(c, decimal-leading-zero);
  }
</style>

上面的 CSS 代碼片段使用 @property at-rule、變量和具有 CSS 動畫功能的計數器創建了一個計時器。即使沒有使用那么多動畫關鍵幀定義，它也會使用 counter-reset 屬性為每個動畫幀呈現一個動態值：

您可以通過使用 calc() 和 mod() CSS 數學函數調整全局計時器變量的結束值來創建顯示分鐘、秒和毫秒的倒計時器。

4. 不使用 JavaScript 自定義原生表單控件

瀏覽器將 DOM 元素渲染為瀏覽器視口邊界內的可視 UI 元素。

但是，HTML 表單元素通常會打開在標準 DOM 視口之外渲染的原生 UI 元素，因此沒有跨瀏覽器的解決方案來自定義原生表單元素的平臺特定、瀏覽器特定的彈出元素。

例如，我們無法自定義 HTML 選擇元素的下拉彈出窗口，但我們可以使用 CSS 在所有瀏覽器中自定義選擇框的初始視圖，因為初始表單控件視圖在 DOM 內渲染：

<div>
  <select>
    <option>React</option>
    <option>Angular</option>
    <option>Svelte</option>
    <option>Vue</option>
    <option>Lit</option>
  </select>
</div>


<style>
  div {
    position: relative;
    min-width: 200px;
  }


  select {
    appearance: none;
    padding: 6px;
    font-size: 14px;
    border-radius: 4px;
    width: 100%;
    border: 2px solid #ccc; 
    outline: none;
  }


  select:focus { border: 2px solid #aaa; }


  div::after {
    border-right: 6px solid transparent;
    border-top: 6px solid #333;
    border-left: 6px solid transparent;
    position: absolute;
    top: 42%;
    right: 12px;
    content: "";
    pointer-events: none;
  }
</style>

上述 CSS 定義通過添加自定義圖標和邊框來定制 HTML 選擇元素的初始視圖的瀏覽器特定外觀，如下面的預覽所示：

使用相同的技術，您可以覆蓋用戶代理樣式表中的默認樣式，以自定義其他本機表單控件并向其添加額外的子元素，而無需使用 JavaScript 嵌入元素。

5. 使用漸變填充創建花式框角

眾所周知的 border-radius CSS 屬性可幫助我們為矩形 DOM 元素創建圓形或橢圓形邊緣。

此外，使用 clip-path 屬性，我們可以創建漂亮的花式角。您知道我們可以使用漸變填充創建創意花式角嗎？

通過為元素填充徑向漸變背景，可以創建一個完美、尖銳的圓圈。如果我們使生成的圓圈透明，將其用作蒙版，然后移動到角落，它會切開所有四個角，從而創建類似相框的角：

<div></div>


<style>
  div {
    width: 200px;
    height: 100px;
    background: darkcyan;
    mask: radial-gradient(14px at 40px 40px, transparent 98%, black) -40px -40px;
  }
</style>

該網絡應用程序允許您通過動態調整幾個參數來生成這些類型的角落。

6. 在屬性選擇器中使用模式匹配

Web 開發人員通常使用類和標識符來為語義 HTML 元素應用樣式。CSS 標準還支持具有模式匹配的屬性選擇器，因此我們可以使用它們為元素編寫全局樣式。一個簡單的示例是編寫以下選擇器來為所有本機文本輸入添加全局樣式：

input[type="text"] {
   /* ... */
}

屬性選擇器可與任何標準 HTML 屬性和自定義屬性（即數據屬性）配合使用。屬性選擇器語法還支持模式匹配，因此我們可以使用此技術編寫簡寫選擇器，以便為無法編輯的 HTML 文檔編寫通用樣式（即為第三方 HTML 文檔或 CMS 頁面模板設置樣式）：

<div>
  <button class="ok-btn">Ok</button>
  <button class="re-try-btn">Retry</button>
  <button class="cancel-btn">Cancel</button>
</div>


<style>
  button[class$="-btn"] {
    min-width: 6em;
  }
</style>

上述選擇器為所有類名以 -btn 結尾的按鈕元素添加樣式。

這是另一個示例，它使用屬性模式匹配為 Wikipedia 超鏈接添加不同的樣式：

a[href*=".wikipedia.org"] {
  color: darkcyan;
}

7. 創建自定義列表樣式類型

HTML 標準提供了 <ol> 和 <ul> 語義標簽來在網頁上創建列表。這些標簽帶有默認列表樣式，但您可以使用 list-style-type 屬性覆蓋這些默認列表樣式。例如，以下 CSS 定義激活小寫羅馬數字系統：

ol {
  list-style-type: lower-roman;
}

@counter-style @ 規則允許您使用預包含的列表樣式或從頭創建新的樣式來為 list-style-type 屬性創建自定義樣式定義。

以下 HTML 文檔使用表情符號創建的自定義列表樣式：

<div>
  <ul>
    <li>React</li>
    <li>Angular</li>
    <li>Svelte</li>
    <li>Vue</li>
    <li>Lit</li>
  </ul>
</div>


<style>


  @counter-style emojis {
    system: cyclic;
    symbols: "\1F449\1F3FD";
    suffix: " ";
  }


  ul { list-style-type: emojis }
</style>

此 CSS at-rule 可讓您擴展現有列表計數器并創建自定義計數器。

例如，以下樣式定義在每個有序列表項前呈現帶有連字符 (-) 的數字括號：

@counter-style custom-roman {
    system: extends lower-roman;
    prefix: "[";
    suffix: "] - ";
  }


  ol { list-style-type: custom-roman }

8. 為英雄部分創建藝術背景

現代網站設計包含一個大型介紹部分，稱為英雄部分，用于介紹網站并放置幾個主要操作按鈕。

Web 開發人員通常使用創意背景圖像創建這些英雄部分?，F在，由于內置的 CSS 過濾器和混合模式，我們無需編輯原始源圖像即可為英雄部分創建創意背景圖像。

我們可以使用 ::after 偽元素將各種過濾器應用于其背景圖像來創建英雄部分，如下所示：

<div>
  <h1>Hero section</h1>
</div>


<style>
  div {
    height: calc(100vh - 16px);
    position: relative;
    display: grid;
    place-items: center;
    color: white;
    overflow: auto;
  }


  div::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(https://raw.githubusercontent.com/codezri/static-media/main/unsplash-img1.jpg);
    background-size: cover;
    background-position: center;
    z-index: -1;
    filter: blur(4px) brightness(0.65) sepia(90%);
  }
</style>

同時，mix-blend-mode 屬性可以通過為基于背景顏色的背景圖像添加顏色混合效果來幫助我們創建有創意的英雄部分，如以下示例所示：

div {
    background-image: url(https://raw.githubusercontent.com/codezri/static-media/main/unsplash-img1.jpg);
    background-size: cover;
    background-position: center;
    isolation: isolate;
    height: calc(100vh - 16px);
    position: relative;
    display: grid;
    place-items: center;
    color: white;
  }


  div::after {
    content: "";
    position: absolute;
    background: #594100;
    inset: 0;
    z-index: -1;
    mix-blend-mode: multiply;
  }

您還可以使用 BACKGROUND-filter CSS 屬性創建藝術英雄部分，但它并沒有得到所有流行的標準瀏覽器中實現。

9. 使用 CSS 添加用戶友好、吸引人的滾動行為

您還記得過去的 JQuery 時代嗎？當時我們使用 .scrollTo() 函數通過 JavaScript/JQuery 實現平滑滾動動畫？現在，Web 開發人員可以更改滾動行為并使用純 CSS 激活平滑滾動！

查看以下激活平滑滾動的 CSS 定義：

<a href="#target1">[1]</a>
<a href="#target2">[2]</a>


<div id="target1"></div>
<div id="target2"></div>


<style>
  div {
    height: 100vh;
    border-bottom: solid 40px #aaa;
    background-color: #ccc;
  }


  :root { scroll-behavior: smooth }
</style>

通過此 CSS 定義，瀏覽器甚至可以為后退按鈕激活平滑滾動，如下面的預覽所示：

CSS 滾動捕捉模塊提供了一組 CSS 屬性，用于提高可滾動容器的可用性和可訪問性。

例如，以下代碼片段會自動在主要部分停止滾動，并避免在部分部分停止：

<section style="background: #ccc">1</section>
<section style="background: #aaa">2</section>
<section style="background: #ccc">3</section>
<section style="background: #aaa">4</section>


<style>
  section {
    height: 100vh;
    scroll-snap-align: start;
    display: grid;
    place-items: center;
    font-size: 7em;
  }


  :root {
    background-color: #eee;
    scroll-snap-type: y mandatory;
  }
</style>

CSS 滾動捕捉功能可幫助我們為移動應用中支持滑動的界面實現無 JavaScript、極簡的純 CSS 解決方案

10. 無類 CSS 樣式技術

每個 Web 開發人員都有使用類開始樣式的習慣。使用組織良好的類無疑是創建干凈、易于管理的網頁的良好做法。

但是，創建類對于創建極簡網頁來說并不是強制性的——無類 Web 設計概念激勵我們使用語義 HTML 標簽來編寫 CSS：

nav {}
ul {}
ul li {}
summary {}

:not()、:has() 和 :is() 等功能選擇器（以偽類形式實現）可幫助我們避免在無類樣式表中選擇器中出現重復片段，從而編寫簡潔的代碼。

例如，以下代碼片段使用 :not() 為導航菜單項（最后一個除外）添加了顏色樣式：

<nav>
  <ul>
    <li>Home</li>
    <li>Services</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>


<style>
  nav ul {
    display: flex;
    list-style: none;
    gap: 1em;
    background: #eee;
    padding: 1em;


    :not(li:last-child) {
      color: darkcyan;
    }
  }
</style>

假設您需要為呈現 SVG 圖標的菜單項添加自定義樣式。然后，您可以使用 :has() 功能選擇器選擇這些菜單項，如下所示：

li:has(svg) {
  /* ... */
}

:has() 偽類可以與屬性選擇器和 CSS 變量結合使用，實現交互式主題更改：

<div>
  <label><input type="radio" value="t1" name="t" checked>Theme 1</label>
  <label><input type="radio" value="t2" name="t">Theme 2</label>
</div>


<style>
  body { 
    background-color: var(--background-color);
    color: var(--text-color);
    transition: all 0.5s;
  }


  :root:has(input[value="t1"]:checked) {
    --background-color: darkcyan;
    --text-color: white;
  } 


  :root:has(input[value="t2"]:checked) {
    --background-color: skyblue;
    --text-color: black;
  }   
</style>

:is() 功能選擇器幫助我們為逗號分隔的長選擇器編寫替代的簡寫選擇器：

/* old-fashioned */
section h1, 
section h2, 
section h3, 
section h4, 
section h5, 
section h6 {
  color: darkcyan;
}


/* modern */
section :is(h1, h2, h3, h4, h5, h6) {
  color: darkcyan;
}

總結

以上就是我今天想與你分享的全部內容，希望這些技能可以幫助您編寫更簡潔、更高效的CSS代碼。

責任編輯：華軒來源： web前端開發