Case Study: Combining Cutting-Edge CSS Features Into a 'Course Navigation” Component

This article introduces the excellent article navigator designed by Jhey Tompkins and adapts it into the "course navigator" for online courses. We will dig deep into how it works, enabling a smooth interactive experience without JavaScript.

The main functions of this component include:

• Links to all course content;
• Smoothly scroll to the anchored chapter title;
• Shows the reading progress of the current chapter;
• Toggle light and dark mode;
• Fixed to the bottom and supports folding when scrolling.

We will implement these features using the latest CSS features that are currently best supported in Chrome.

HTML structure

We use<details></details> The element creates an expandable component and pins it to the bottom of the page. Course content is included in<article></article> In the element, the chapter title is with an ID for the anchor link within the page. Click<summary></summary> Elements can switch course navigation, and the navigation content is wrapped in ::details-content pseudo-element. Navigate to links to other chapters and scroll to the title of the current chapter.<summary></summary> The element contains a label (used as a toggle button), current chapter name, scroll distance, and dark mode toggle switches.

The sample code is as follows:

<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

Using position: fixed and inset properties will<details></details> Elements are fixed at the bottom of the page:

 details {
  position: fixed;
  inset: 24px; /* used as margin*/
  place-self: end center; /* yx */
}

Pure CSS dark mode

In order to improve the readability of long-form content, we implement CSS dark mode.

In the HTML structure, we use a hidden checkbox<input type="checkbox"> , and a<i></i> Elements as styled checkboxes, and a<label></label> Elements as labels. All of this is wrapped in<summary></summary> In the element, and use<div> Add spacing to elements.<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>Icon switching is implemented using Font Awesome CSS attribute:</p> <pre class="brush:php;toolbar:false"> /* Copy from Font Awesome CSS*/ i::before { font-style: normal; font-family: &quot;Font Awesome 6 Free&quot;; display: inline-block; width: 1.25em; } /* Selected status*/ input[type=checkbox]:checked i::before { content: &quot;\f058&quot;; font-weight: 900; } /* Unselected status*/ input[type=checkbox]:not(:checked) i::before { content: &quot;\f111&quot;; font-weight: 400; }</pre> <p> Use <code>:root selector and :has pseudo-class to achieve light and dark mode switching:

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

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

Use the light-dark() function to set the color:

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

Show scrolling progress

Use progress loops and text percentages to display reading progress.

Define custom properties --percentage :

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

Use scroll() animation function to implement scroll-driven animation:

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

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

Use counter() function to display the percentage:

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

Use conic-gradient() function to create a progress ring:

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

Create a course navigation

Reset list style:

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

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

Use the :has and :not pseudo-classes to fade list items that are not current chapters:

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

Enable Smooth Scrolling:

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

<details></details> Element transition effect

Use interpolate-size: allow-keywords and transition properties to achieve smooth expansion and collapse:

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

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

/* ... (Style codes for details:not([open])::details-content and details[open]::details-content) ... */

<summary></summary> Element style

Add tags and icons:

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

Set the layout using display: flex and gap properties:

 /* ... (i::before style code) ... */

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

summary {
  cursor: pointer;
}

label {
  cursor: inherit;
}

Automatic shutdown mechanism (optional JavaScript)

Use JavaScript to achieve automatic closing of the mouse when leaving:

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

Automatic color scheme (optional JavaScript)

Use JavaScript to detect user preference color schemes and automatically set:

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

Summarize

This article shows how to use a range of cutting-edge CSS features to create a powerful course navigation component, including scroll-driven animations, interpolate-size attributes, light-dark() function, conic-gradient() function, and style settings for ::details-content pseudo-elements. Thanks to Jhey Tompkins for his inspiration!