Case Examine: Combining Reducing-Edge CSS Options Right into a “Course Navigation” Element

  

    
    
      
    
      
      1. LessonA
      
    
        
    

  
    
  
    

What we want is to show the proportion and permit it to “rely” because the scroll place adjustments. Usually, that is squarely in JavaScript territory. However now that we are able to outline our personal customized properties, we are able to set up a variable referred to as --percentage that’s formatted as an integer that defaults to a worth of 0. This gives CSS with the context it must learn and interpolate the worth between 0 and 100, which is the utmost worth we wish to help.

So, first, we outline the variable as a customized property:

@property --percentage {
  syntax: "";
  inherits: true;
  initial-value: 0;
}

Then we outline the animation in keyframes in order that the worth of --percentage is up to date from 0 to 100:

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

And, lastly, we apply the animation on the foundation factor:

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

Discover what we’re doing right here: this can be a scroll-driven animation! By setting the animation-timeline to scroll(), we’re not operating the animation based mostly on the doc’s timeline however as a substitute based mostly on the consumer’s scroll place. You’ll be able to dig deeper into scroll timelines within the CSS-Tips Almanac.

Since we’re coping with an integer, we are able to goal the ::earlier than pseudo-element and place the proportion worth within it utilizing the content material property and a little bit counter() hacking (adopted by the proportion image):

#progress-percentage::earlier than {
  content material: counter(share) "%";
  min-width: 40px; show: inline-block; /* Prevents content material shift */
}

The progress pie is simply as simple. It’s a conic gradient made up of two colours which might be positioned utilizing 0% and the scroll share! Which means that you’ll want that --percentage variable as an precise share, however you may convert it into such by multiplying it by 1% (calc(var(--percentage) * 1%))!

#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%; /* Make it a circle */
  width: 17px; /* Similar dimensions because the icons */
}

Making a (good) course navigation

Now for the desk contents containing the nested lists of lesson sections inside them, beginning with some resets. Whereas there are extra resets within the demo and extra traces of code total, two particular resets are very important to the UX of this part.

First, right here’s an instance of how the nested lists are marked up:

  

    
  
  
  

    

      LessonA
      

        
SectionA
        
SectionB
        
SectionC
      
    
    
LessonB
    
LessonC
  
    

Let’s reset the listing spacing in CSS:

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

padding-left: 0 ensures that the mum or dad listing and all nested lists snap to the left aspect of the disclosure, minus any padding you may wish to add. Don’t fear in regards to the indentation of nested lists — we’ve got one thing deliberate for these. list-style-position: inside ensures that the listing markers snap to the aspect, fairly than the textual content, inflicting the markers to overflow.

After that, we slap colour: clear on the ::markers of nested

ol ol li::marker {
  colour: clear;
}

particulars {
  /* The default colour */
  colour: light-dark(hsl(var(--hs) 90%), hsl(var(--hs) 10%));
}

/* 
s with out .lively that’re direct descendants of the mum or dad 
 */
ol:has(ol) > li:not(.lively) {
  /* A much less intense colour */
  colour: light-dark(hsl(var(--hs) 80%), hsl(var(--hs) 20%));
}

/* Additionally */
a {
  colour: inherit;
}

:root {
  scroll-behavior: easy; /* Clean anchor scrolling */
  scroll-padding-top: 20px; /* A scroll offset, mainly */
}

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

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

particulars:not([open])::details-content {
  peak: 0;
  opacity: 0;
  padding: 0 42px;
  filter: blur(10px);
  border-top: 0 stable light-dark(hsl(var(--hs) 30%), hsl(var(--hs) 70%));
  transition:
    peak 300ms 300ms, 
    padding-top 300ms 300ms, 
    padding-bottom 300ms 300ms, 
    content-visibility 300ms 300ms allow-discrete, 
    filter 300ms 0ms, 
    opacity 300ms 0ms;
}

particulars[open]::details-content {
  peak: auto;
  opacity: 1;
  padding: 42px;
  filter: blur(0);
  border-top: 1px stable light-dark(hsl(var(--hs) 30%), hsl(var(--hs) 70%));
  transition: 
    peak 300ms 0ms, 
    padding-top 300ms 0ms, 
    padding-bottom 300ms 0ms, 
    content-visibility 300ms 0ms allow-discrete, 
    filter 300ms 300ms, 
    opacity 300ms 300ms;
}

  

    
      
      Navigate course
    
    
    

  

  
  

i::earlier than {
  width: 1.25em;
  font-style: regular;
  show: inline-block;
  font-family: "Font Superior 6 Free";
}

particulars i::earlier than {
  content material: "f0cb"; /* fa-list-ol */
}

particulars[open] i::earlier than {
  content material: "f00d"; /* fa-xmark */
}


/* For older Safari */
abstract::-webkit-details-marker {
   show: none;
}

abstract {
  cursor: pointer;
}

label {
  cursor: inherit;
}

doc.querySelector("particulars").addEventListener("mouseleave", e => e.goal.removeAttribute("open"));

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