本文介紹Jhey Tompkins設(shè)計(jì)的出色文章導(dǎo)航器，並將其改編成在線課程的“課程導(dǎo)航器”。我們將深入剖析其工作原理，無需JavaScript即可實(shí)現(xiàn)流暢的交互體驗(yàn)。

該組件的主要功能包括：

• 鏈接所有課程內(nèi)容；
• 平滑滾動(dòng)到錨定的章節(jié)標(biāo)題；
• 顯示當(dāng)前章節(jié)的閱讀進(jìn)度；
• 切換明暗模式；
• 固定在底部，並支持滾動(dòng)時(shí)折疊。

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

HTML結(jié)構(gòu)

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

示例代碼如下：

<details><summary>
    <label></label>
  </summary></details>
<h1>Section A</h1>
<p>...</p>
<h2>Section B</h2>
<p>...</p>
<h2>Section C</h2>
<p>...</p>

定位

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

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

純CSS暗模式

為了提高長篇內(nèi)容的可讀性，我們實(shí)現(xiàn)CSS暗模式。

HTML結(jié)構(gòu)中，我們使用一個(gè)隱藏的複選框<input type="checkbox">，以及一個(gè)<i></i>元素作為樣式化的複選框，和一個(gè)<label></label>元素作為標(biāo)籤。所有這些都包裹在<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屬性實(shí)現(xiàn)圖標(biāo)切換：</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; } /* 選中狀態(tài)*/ input[type=checkbox]:checked i::before { content: &quot;\f058&quot;; font-weight: 900; } /* 未選中狀態(tài)*/ input[type=checkbox]:not(:checked) i::before { content: &quot;\f111&quot;; font-weight: 400; }</pre> <p>使用<code>:root選擇器和:has偽類實(shí)現(xiàn)明暗模式切換：

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

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

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

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

顯示滾動(dòng)進(jìn)度

使用進(jìn)度環(huán)和文本百分比顯示閱讀進(jìn)度。

定義自定義屬性--percentage ：

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

使用scroll()動(dòng)畫函數(shù)實(shí)現(xiàn)滾動(dòng)驅(qū)動(dòng)的動(dòng)畫：

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

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

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

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

使用conic-gradient()函數(shù)創(chuàng)建進(jìn)度環(huán)：

 #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;
}

創(chuàng)建課程導(dǎo)航

重置列表樣式：

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

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

使用:has和:not偽類淡化非當(dāng)前章節(jié)的列表項(xiàng)：

 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;
}

啟用平滑滾動(dòng)：

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

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

使用interpolate-size: allow-keywords和transition屬性實(shí)現(xiàn)平滑展開和折疊：

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

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

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

<summary></summary>元素樣式

添加標(biāo)籤和圖標(biāo)：

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

使用display: flex和gap屬性設(shè)置佈局：

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

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

summary {
  cursor: pointer;
}

label {
  cursor: inherit;
}

自動(dòng)關(guān)閉機(jī)制(可選的JavaScript)

使用JavaScript實(shí)現(xiàn)鼠標(biāo)離開時(shí)自動(dòng)關(guān)閉：

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

自動(dòng)設(shè)置顏色方案(可選的JavaScript)

使用JavaScript檢測用戶偏好顏色方案並自動(dòng)設(shè)置：

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

總結(jié)

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