案例研究：將尖端的CSS功能結合到'課程導航”組件中

本文介紹Jhey Tompkins設計的出色文章導航器，並將其改編成在線課程的“課程導航器”。我們將深入剖析其工作原理，無需JavaScript即可實現流暢的交互體驗。

該組件的主要功能包括：

• 鏈接所有課程內容；
• 平滑滾動到錨定的章節標題；
• 顯示當前章節的閱讀進度；
• 切換明暗模式；
• 固定在底部，並支持滾動時折疊。

我們將使用最新的CSS特性實現這些功能，這些特性目前在Chrome瀏覽器中得到最佳支持。

HTML結構

我們使用<details></details>元素創建一個可展開的組件，並將其固定在頁面底部。課程內容包含在<article></article>元素中，章節標題帶有ID用於頁面內錨點鏈接。點擊<summary></summary>元素可切換課程導航，導航內容則包裹在::details-content content偽元素中。導航鏈接到其他章節，並可滾動到當前章節的標題。<summary></summary>元素包含一個標籤（用作切換按鈕）、當前章節名稱、滾動距離和暗模式切換開關。

示例代碼如下：

<details><summary>
    <label></label>
  </summary></details>
<h1 id="Section-A">Section A</h1>
<p>...</p>
<h2 id="Section-B">Section B</h2>
<p>...</p>
<h2 id="Section-C">Section C</h2>
<p>...</p>

定位

使用position: fixed和inset屬性將<details></details>元素固定在頁面底部：

 details {
  position: fixed;
  inset: 24px; /* 用作邊距*/
  place-self: end center; /* yx */
}

純CSS暗模式

為了提高長篇內容的可讀性，我們實現CSS暗模式。

HTML結構中，我們使用一個隱藏的複選框<input type="checkbox">，以及一個<i></i>元素作為樣式化的複選框，和一個<label></label>元素作為標籤。所有這些都包裹在<summary></summary>元素中，並使用<div>元素添加間距。<pre class="brush:php;toolbar:false">&lt;details&gt;&lt;summary&gt;&lt;label aria-label=&quot;Dark mode&quot;&gt; &lt;i&gt;&lt;/i&gt; Dark mode &lt;/label&gt; &lt;/summary&gt;&lt;/details&gt;</pre> <p>使用Font Awesome CSS屬性實現圖標切換：</p> <pre class="brush:php;toolbar:false"> /* 從Font Awesome CSS複製*/ i::before { font-style: normal; font-family: &quot;Font Awesome 6 Free&quot;; display: inline-block; width: 1.25em; } /* 選中狀態*/ input[type=checkbox]:checked i::before { content: &quot;\f058&quot;; font-weight: 900; } /* 未選中狀態*/ input[type=checkbox]:not(:checked) i::before { content: &quot;\f111&quot;; font-weight: 400; }</pre> <p>使用<code>:root選擇器和:has偽類實現明暗模式切換：

 /* 暗模式*/
:root:has(input[type=checkbox]:checked) {
  color-scheme: dark;
}

/* 明模式*/
:root:not(:has(input[type=checkbox]:checked)) {
  color-scheme: light;
}

使用light-dark()函數設置顏色：

 color: light-dark(hsl(var(--hs) 90%), hsl(var(--hs) 10%));
background: light-dark(hsl(var(--hs) 10%), hsl(var(--hs) 90%));

顯示滾動進度

使用進度環和文本百分比顯示閱讀進度。

定義自定義屬性--percentage ：

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

使用scroll()動畫函數實現滾動驅動的動畫：

 @keyframes updatePercentage {
  to {
    --percentage: 100;
  }
}

:root {
  animation: updatePercentage;
  animation-timeline: scroll();
  counter-reset: percentage var(--percentage);
}

使用counter()函數顯示百分比：

 #progress-percentage::before {
  content: counter(percentage) "%";
  min-width: 40px;
  display: inline-block;
}

使用conic-gradient()函數創建進度環：

 #progress-pie {
  aspect-ratio: 1;
  background: conic-gradient(hsl(var(--hs) 50%) calc(var(--percentage) * 1%), light-dark(hsl(var(--hs) 90%), hsl(var(--hs) 10%)) 0%);
  border-radius: 50%;
  width: 17px;
}

創建課程導航

重置列表樣式：

 ol {
  padding-left: 0;
  list-style-position: inside;
}

ol ol li::marker {
  color: transparent;
}

使用:has和:not偽類淡化非當前章節的列表項：

 details {
  color: light-dark(hsl(var(--hs) 90%), hsl(var(--hs) 10%));
}

ol:has(ol) > li:not(.active) {
  color: light-dark(hsl(var(--hs) 80%), hsl(var(--hs) 20%));
}

a {
  color: inherit;
}

啟用平滑滾動：

 :root {
  scroll-behavior: smooth;
  scroll-padding-top: 20px;
}

<details></details>元素過渡效果

使用interpolate-size: allow-keywords和transition屬性實現平滑展開和折疊：

 :root {
  interpolate-size: allow-keywords;
}

details::details-content {
  overflow-y: clip;
}

/* ... (details:not([open])::details-content 和details[open]::details-content 的樣式代碼) ... */

<summary></summary>元素樣式

添加標籤和圖標：

<details><summary aria-label="Navigate course">
    <i></i>
    Navigate course
  </summary></details>

使用display: flex和gap屬性設置佈局：

 /* ... (i::before 的樣式代碼) ... */

summary::-webkit-details-marker {
  display: none;
}

summary {
  cursor: pointer;
}

label {
  cursor: inherit;
}

自動關閉機制(可選的JavaScript)

使用JavaScript實現鼠標離開時自動關閉：

 document.querySelector("details").addEventListener("mouseleave", e => e.target.removeAttribute("open"));

自動設置顏色方案(可選的JavaScript)

使用JavaScript檢測用戶偏好顏色方案並自動設置：

 if (window.matchMedia("prefers-color-scheme: dark").matches) {
  document.querySelector("input[type=checkbox]").checked = true;
}

總結

本文展示瞭如何使用一系列尖端的CSS特性創建一個功能強大的課程導航組件，包括滾動驅動的動畫、 interpolate-size屬性、 light-dark()函數、 conic-gradient()函數以及對::details-content偽元素的樣式設置。感謝Jhey Tompkins的靈感啟發！