tech

Published 2022-02-28

By Steven Waterman

5 things you don't need Javascript for

Javascript can do a lot, but it's really over-used. HTML and CSS are surprisingly powerful on their own, so let's have a look at some of the things you can achieve without Javascript (or a backend) - from animated diagrams to dark mode.

This post has been updated. Expand for more details.

This post was updated 2022-03-04 based on discussions on Hacker News.

Warned about potential performance issues of complicated svg-based animations
If your accessibility settings indicate you prefer less motion on the page, the first example is now hidden by default with an explanation, rather than simply not animating
Sticky positioning example fixed to work on Safari - overflow must be set to a value other than auto
Indicated that checkbox-based dark mode is not a replacement for the CSS media query, and should be used in tandem
Added more discussion around progressive enhancement, and reinforced that these examples are not production-ready

You can also see the full commit history for this post.

Every day, I see people use Javascript to do things that are supported by default in good old HTML & CSS. That's usually a bad idea - it's much slower, can cause content to jump around the page after loading, and breaks your site for people with crappy browsers. I was determined to do better, and built this landing page and blog without any client-side Javascript.

Along the way, I discovered just how much CSS has to offer, and I'd love to share some of that with you today. I know a lot of people are a bit scared of CSS, and see it as black magic, so I won't be showing you anything too complicated. Instead, I'm just going to focus on simple techniques and overlooked features - things you could easily incorporate into your own sites.

1. Animating SVGs

You probably know that you can animate HTML elements with CSS. However, did you know that you can also animate SVGs, in exactly the same way? One of my favourite techniques is setting the stroke-dasharray property to a high value, then animating stroke-dashoffset. That results in the path being 'drawn' over time, or a line moving along a path, like in this animation of some fireworks:

Your accessibility settings indicate you are sensitive to animations and motion on the page, so this example is hidden by default.

Show anyway

Show the code

Animation.svelte

<Show 120 identical lines>
    1
        1
        <svg viewBox="0 0 100 100">
2
        2
          <path class="flight" d="M 0 100 C 35 92 49 76 50 50" />
3
        3
          <path
4
        4
            class="trail"
5
        5
            d="M 50 50 C 41 23 26 23 1 41"
6
        6
            style="stroke: yellowgreen"
7
        7
          />
8
        8
          <path
9
        9
            class="trail"
10
        10
            d="M 50 50 C 30 43 14 51 0 100"
11
        11
            style="stroke: turquoise"
12
        12
          />
13
        13
          <path
14
        14
            class="trail"
15
        15
            d="M 50 50 C 84 46 96 63 100 85"
16
        16
            style="stroke: goldenrod"
17
        17
          />
18
        18
          <path
19
        19
            class="trail"
20
        20
            d="M 50 50 C 71 31 95 43 100 63"
21
        21
            style="stroke: mediumorchid"
22
        22
          />
23
        23
          <path
24
        24
            class="trail"
25
        25
            d="M 50 50 C 61 -6 76 3 73 100"
26
        26
            style="stroke: firebrick"
27
        27
          />
28
        28
          <circle class="explosion" cx="50" cy="50" r="20" />
29
        29
        </svg>
30
        30
         
31
        31
        <style>
32
        32
          svg {
33
        33
            height: 20em;
34
        34
            width: 100%;
35
        35
            background-color: darkslategrey;
36
        36
            border-radius: 2em;
37
        37
          }
38
        38
         
39
        39
          svg :global(*) {
40
        40
            animation-iteration-count: infinite;
41
        41
            animation-timing-function: linear;
42
        42
            animation-duration: 10s;
43
        43
            fill: transparent;
44
        44
            stroke-linecap: round;
45
        45
            stroke-linejoin: round;
46
        46
          }
47
        47
         
48
        48
          .flight {
49
        49
            stroke: gold;
50
        50
            stroke-width: 2;
51
        51
            stroke-dasharray: 10 100;
52
        52
            stroke-dashoffset: 10;
53
        53
            animation-name: flight;
54
        54
            animation-timing-function: ease-in;
55
        55
          }
56
        56
         
57
        57
          @keyframes flight {
58
        58
            from {
59
        59
              stroke-dashoffset: 10;
60
        60
            }
61
        61
            21%,
62
        62
            to {
63
        63
              stroke-dashoffset: -80;
64
        64
            }
65
        65
          }
66
        66
         
67
        67
          .explosion {
68
        68
            fill: orangered;
69
        69
            opacity: 0.8;
70
        70
            filter: blur(1px);
71
        71
            transform-origin: center;
72
        72
            animation-name: explosion;
73
        73
          }
74
        74
         
75
        75
          @keyframes explosion {
76
        76
            from,
77
        77
            19% {
78
        78
              transform: scale(0);
79
        79
            }
80
        80
            20% {
81
        81
              transform: scale(1.5);
82
        82
            }
83
        83
            22% {
84
        84
              transform: scale(0.5);
85
        85
            }
86
        86
            23% {
87
        87
              transform: scale(0.8);
88
        88
            }
89
        89
            25% {
90
        90
              transform: scale(0.2);
91
        91
            }
92
        92
            26% {
93
        93
              transform: scale(0.4);
94
        94
            }
95
        95
            35%,
96
        96
            to {
97
        97
              transform: scale(0);
98
        98
            }
99
        99
          }
100
        100
         
101
        101
          .trail {
102
        102
            stroke-width: 2;
103
        103
            stroke-dasharray: 1 10 5 10 10 5 30 150;
104
        104
            animation-name: trail;
105
        105
            animation-timing-function: ease-out;
106
        106
          }
107
        107
         
108
        108
          @keyframes trail {
109
        109
            from,
110
        110
            20% {
111
        111
              stroke-width: 3;
112
        112
              stroke-dashoffset: 80;
113
        113
            }
114
        114
            100%,
115
        115
            to {
116
        116
              stroke-width: 0.5;
117
        117
              stroke-dashoffset: -150;
118
        118
            }
119
        119
          }
120
        120
        </style>

1
  1
  <svg viewBox="0 0 100 100">
2
  2
    <path class="flight" d="M 0 100 C 35 92 49 76 50 50" />
3
  3
    <path
4
  4
      class="trail"
5
  5
      d="M 50 50 C 41 23 26 23 1 41"
6
  6
      style="stroke: yellowgreen"
7
  7
    />
8
  8
    <path
9
  9
      class="trail"
10
  10
      d="M 50 50 C 30 43 14 51 0 100"
11
  11
      style="stroke: turquoise"
12
  12
    />
13
  13
    <path
14
  14
      class="trail"
15
  15
      d="M 50 50 C 84 46 96 63 100 85"
16
  16
      style="stroke: goldenrod"
17
  17
    />
18
  18
    <path
19
  19
      class="trail"
20
  20
      d="M 50 50 C 71 31 95 43 100 63"
21
  21
      style="stroke: mediumorchid"
22
  22
    />
23
  23
    <path
24
  24
      class="trail"
25
  25
      d="M 50 50 C 61 -6 76 3 73 100"
26
  26
      style="stroke: firebrick"
27
  27
    />
28
  28
    <circle class="explosion" cx="50" cy="50" r="20" />
29
  29
  </svg>
30
  30
   
31
  31
  <style>
32
  32
    svg {
33
  33
      height: 20em;
34
  34
      width: 100%;
35
  35
      background-color: darkslategrey;
36
  36
      border-radius: 2em;
37
  37
    }
38
  38
   
39
  39
    svg :global(*) {
40
  40
      animation-iteration-count: infinite;
41
  41
      animation-timing-function: linear;
42
  42
      animation-duration: 10s;
43
  43
      fill: transparent;
44
  44
      stroke-linecap: round;
45
  45
      stroke-linejoin: round;
46
  46
    }
47
  47
   
48
  48
    .flight {
49
  49
      stroke: gold;
50
  50
      stroke-width: 2;
51
  51
      stroke-dasharray: 10 100;
52
  52
      stroke-dashoffset: 10;
53
  53
      animation-name: flight;
54
  54
      animation-timing-function: ease-in;
55
  55
    }
56
  56
   
57
  57
    @keyframes flight {
58
  58
      from {
59
  59
        stroke-dashoffset: 10;
60
  60
      }
61
  61
      21%,
62
  62
      to {
63
  63
        stroke-dashoffset: -80;
64
  64
      }
65
  65
    }
66
  66
   
67
  67
    .explosion {
68
  68
      fill: orangered;
69
  69
      opacity: 0.8;
70
  70
      filter: blur(1px);
71
  71
      transform-origin: center;
72
  72
      animation-name: explosion;
73
  73
    }
74
  74
   
75
  75
    @keyframes explosion {
76
  76
      from,
77
  77
      19% {
78
  78
        transform: scale(0);
79
  79
      }
80
  80
      20% {
81
  81
        transform: scale(1.5);
82
  82
      }
83
  83
      22% {
84
  84
        transform: scale(0.5);
85
  85
      }
86
  86
      23% {
87
  87
        transform: scale(0.8);
88
  88
      }
89
  89
      25% {
90
  90
        transform: scale(0.2);
91
  91
      }
92
  92
      26% {
93
  93
        transform: scale(0.4);
94
  94
      }
95
  95
      35%,
96
  96
      to {
97
  97
        transform: scale(0);
98
  98
      }
99
  99
    }
100
  100
   
101
  101
    .trail {
102
  102
      stroke-width: 2;
103
  103
      stroke-dasharray: 1 10 5 10 10 5 30 150;
104
  104
      animation-name: trail;
105
  105
      animation-timing-function: ease-out;
106
  106
    }
107
  107
   
108
  108
    @keyframes trail {
109
  109
      from,
110
  110
      20% {
111
  111
        stroke-width: 3;
112
  112
        stroke-dashoffset: 80;
113
  113
      }
114
  114
      100%,
115
  115
      to {
116
  116
        stroke-width: 0.5;
117
  117
        stroke-dashoffset: -150;
118
  118
      }
119
  119
    }
120
  120
  </style>

<svg viewBox="0 0 100 100">
  <path class="flight" d="M 0 100 C 35 92 49 76 50 50" />
  <path
    class="trail"
    d="M 50 50 C 41 23 26 23 1 41"
    style="stroke: yellowgreen"
  />
  <path
    class="trail"
    d="M 50 50 C 30 43 14 51 0 100"
    style="stroke: turquoise"
  />
  <path
    class="trail"
    d="M 50 50 C 84 46 96 63 100 85"
    style="stroke: goldenrod"
  />
  <path
    class="trail"
    d="M 50 50 C 71 31 95 43 100 63"
    style="stroke: mediumorchid"
  />
  <path
    class="trail"
    d="M 50 50 C 61 -6 76 3 73 100"
    style="stroke: firebrick"
  />
  <circle class="explosion" cx="50" cy="50" r="20" />
</svg>

<style>
  svg {
    height: 20em;
    width: 100%;
    background-color: darkslategrey;
    border-radius: 2em;
  }

  svg :global(*) {
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 10s;
    fill: transparent;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .flight {
    stroke: gold;
    stroke-width: 2;
    stroke-dasharray: 10 100;
    stroke-dashoffset: 10;
    animation-name: flight;
    animation-timing-function: ease-in;
  }

  @keyframes flight {
    from {
      stroke-dashoffset: 10;
    }
    21%,
    to {
      stroke-dashoffset: -80;
    }
  }

  .explosion {
    fill: orangered;
    opacity: 0.8;
    filter: blur(1px);
    transform-origin: center;
    animation-name: explosion;
  }

  @keyframes explosion {
    from,
    19% {
      transform: scale(0);
    }
    20% {
      transform: scale(1.5);
    }
    22% {
      transform: scale(0.5);
    }
    23% {
      transform: scale(0.8);
    }
    25% {
      transform: scale(0.2);
    }
    26% {
      transform: scale(0.4);
    }
    35%,
    to {
      transform: scale(0);
    }
  }

  .trail {
    stroke-width: 2;
    stroke-dasharray: 1 10 5 10 10 5 30 150;
    animation-name: trail;
    animation-timing-function: ease-out;
  }

  @keyframes trail {
    from,
    20% {
      stroke-width: 3;
      stroke-dashoffset: 80;
    }
    100%,
    to {
      stroke-width: 0.5;
      stroke-dashoffset: -150;
    }
  }
</style>

For another, more advanced example of how you can create animated diagrams with CSS, check out our landing page! The How it Works section contains a detailed animation. If you want to copy from it, Lexoral is open-source on GitHub.

Creating an animation like that is certainly more complicated than a simple video, and very detailed animations can cause hard-to-debug performance issues. However, there's plenty of reasons to prefer an animated SVG:

Negligible bandwidth use
Better device compatibility
Perfect quality at any resolution
Responsive & Scalable
Can be checked in to VCS

If you want to learn more about CSS animations, I can recommend starting with the MDN guide. To create the SVGs, either use a visual editor like Inkscape, or a more dev-oriented tool like this one. Often it's easier to just write the SVG markup by hand, in which case MDN has a great reference page.

2. Sidebars

You want a side navigation bar that hides when it's not in use. Put away that script file, we've got CSS for this. We'll use transform to move it off-screen by default, then override that when the user hovers over the element. Importantly, we should also show the menu when you use the Tab key to select one of the links in the menu - an important step towards keeping our site accessible:

← Hover

(or use tab)

Show the code

Sidebar.svelte

<Show 49 identical lines>
    1
        1
        <div class="container">
2
        2
          <nav>
3
        3
            <a href=".">Option 1</a>
4
        4
            <a href=".">Option 2</a>
5
        5
            <a href=".">Option 3</a>
6
        6
            <a href=".">Option 4</a>
7
        7
          </nav>
8
        8
         
9
        9
          <p>← Hover</p>
10
        10
          <p>(or use tab)</p>
11
        11
        </div>
12
        12
         
13
        13
        <style>
14
        14
          .container {
15
        15
            overflow: hidden;
16
        16
            position: relative;
17
        17
            height: 15em;
18
        18
            max-width: 25em;
19
        19
            margin: auto;
20
        20
            border: 0.2em solid black;
21
        21
          }
22
        22
         
23
        23
          nav {
24
        24
            display: flex;
25
        25
            flex-direction: column;
26
        26
            position: absolute;
27
        27
            right: 100%;
28
        28
            padding: 1em;
29
        29
            background-color: skyblue;
30
        30
         
31
        31
            transform: translateX(1em);
32
        32
            transition: 0.2s transform;
33
        33
          }
34
        34
         
35
        35
          nav:hover,
36
        36
          nav:focus-within {
37
        37
            transform: translateX(100%);
38
        38
          }
39
        39
         
40
        40
          a {
41
        41
            white-space: pre;
42
        42
            color: black;
43
        43
          }
44
        44
         
45
        45
          p {
46
        46
            font-size: 2em;
47
        47
            text-align: center;
48
        48
          }
49
        49
        </style>

1
  1
  <div class="container">
2
  2
    <nav>
3
  3
      <a href=".">Option 1</a>
4
  4
      <a href=".">Option 2</a>
5
  5
      <a href=".">Option 3</a>
6
  6
      <a href=".">Option 4</a>
7
  7
    </nav>
8
  8
   
9
  9
    <p>← Hover</p>
10
  10
    <p>(or use tab)</p>
11
  11
  </div>
12
  12
   
13
  13
  <style>
14
  14
    .container {
15
  15
      overflow: hidden;
16
  16
      position: relative;
17
  17
      height: 15em;
18
  18
      max-width: 25em;
19
  19
      margin: auto;
20
  20
      border: 0.2em solid black;
21
  21
    }
22
  22
   
23
  23
    nav {
24
  24
      display: flex;
25
  25
      flex-direction: column;
26
  26
      position: absolute;
27
  27
      right: 100%;
28
  28
      padding: 1em;
29
  29
      background-color: skyblue;
30
  30
   
31
  31
      transform: translateX(1em);
32
  32
      transition: 0.2s transform;
33
  33
    }
34
  34
   
35
  35
    nav:hover,
36
  36
    nav:focus-within {
37
  37
      transform: translateX(100%);
38
  38
    }
39
  39
   
40
  40
    a {
41
  41
      white-space: pre;
42
  42
      color: black;
43
  43
    }
44
  44
   
45
  45
    p {
46
  46
      font-size: 2em;
47
  47
      text-align: center;
48
  48
    }
49
  49
  </style>

<div class="container">
  <nav>
    <a href=".">Option 1</a>
    <a href=".">Option 2</a>
    <a href=".">Option 3</a>
    <a href=".">Option 4</a>
  </nav>

  <p>← Hover</p>
  <p>(or use tab)</p>
</div>

<style>
  .container {
    overflow: hidden;
    position: relative;
    height: 15em;
    max-width: 25em;
    margin: auto;
    border: 0.2em solid black;
  }

  nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 100%;
    padding: 1em;
    background-color: skyblue;

    transform: translateX(1em);
    transition: 0.2s transform;
  }

  nav:hover,
  nav:focus-within {
    transform: translateX(100%);
  }

  a {
    white-space: pre;
    color: black;
  }

  p {
    font-size: 2em;
    text-align: center;
  }
</style>

This example is just clever use of pseudo-classes in CSS. You probably skipped that link, but go back and click it. Even if you think you know everything about CSS, click it and read down that list pseudo-classes. Look how many there are. Think about how you could use them.

It's too easy to see :hover and assume it's just for styling hyperlinks. We've just seen it used to create a sidebar, but here's 9 more ways you could use it:

Dropdown menus
Tooltips
Showing Video Thumbnails
Scaling up an image preview
Showing a preview of the link destination like on Wikipedia
Highlighting the important parts of a complex interface
Styling the hovered row in a table
Previewing what will happen if you click a button
Making the 'Reject Cookies' button move out of the way when people try to click it

That last one was a joke. Please don't do that. I'm serious. I refuse to take responsibility if you do that. Please.

A few of those ideas would need a delay before the hover effect activated - it would be quite hard to use Wikipedia if a popup obscured half the screen every time you moused over a link. You might have to fall back to using Javascript in that case, but try the transition-delay property first.

3. Sticky Positioning

PSA: position: sticky; exists now. Please stop reimplementing it with Javascript. Some of you are confused why I'm mentioning such a basic feature. If that's you, skip to the next section.

Some of you have no idea what I'm talking about, and are feeling pretty self-concious. When you want an HTML element to move down the page as you scroll, you can do that with plain CSS! Not only that, it actually works way better than a Javascript version:

Scroll down the page

And watch the blue square 🡖

The blue square follows you

As you scroll past it

And if you scroll back up

It goes back where it was

Show the code

StickyPositioning.svelte

<Show 35 identical lines>
    1
        1
        <div class="scroller">
2
        2
          <p>Scroll down the page</p>
3
        3
          <p>And watch the blue square 🡖</p>
4
        4
          <div class="square" />
5
        5
          <p>The blue square follows you</p>
6
        6
          <p>As you scroll past it</p>
7
        7
          <p>And if you scroll back up</p>
8
        8
          <p>It goes back where it was</p>
9
        9
        </div>
10
        10
         
11
        11
        <style>
12
        12
          .scroller {
13
        13
            max-width: 25em;
14
        14
            height: 10em;
15
        15
            margin: auto;
16
        16
            padding: 1em;
17
        17
            border: 0.2em solid black;
18
        18
            overflow-x: hidden;
19
        19
            overflow-y: scroll;
20
        20
          }
21
        21
         
22
        22
          p {
23
        23
            height: 5em;
24
        24
          }
25
        25
         
26
        26
          .square {
27
        27
            height: 5em;
28
        28
            width: 5em;
29
        29
            background-color: lightskyblue;
30
        30
            margin-left: auto;
31
        31
         
32
        32
            position: sticky;
33
        33
            top: 2em;
34
        34
          }
35
        35
        </style>

1
  1
  <div class="scroller">
2
  2
    <p>Scroll down the page</p>
3
  3
    <p>And watch the blue square 🡖</p>
4
  4
    <div class="square" />
5
  5
    <p>The blue square follows you</p>
6
  6
    <p>As you scroll past it</p>
7
  7
    <p>And if you scroll back up</p>
8
  8
    <p>It goes back where it was</p>
9
  9
  </div>
10
  10
   
11
  11
  <style>
12
  12
    .scroller {
13
  13
      max-width: 25em;
14
  14
      height: 10em;
15
  15
      margin: auto;
16
  16
      padding: 1em;
17
  17
      border: 0.2em solid black;
18
  18
      overflow-x: hidden;
19
  19
      overflow-y: scroll;
20
  20
    }
21
  21
   
22
  22
    p {
23
  23
      height: 5em;
24
  24
    }
25
  25
   
26
  26
    .square {
27
  27
      height: 5em;
28
  28
      width: 5em;
29
  29
      background-color: lightskyblue;
30
  30
      margin-left: auto;
31
  31
   
32
  32
      position: sticky;
33
  33
      top: 2em;
34
  34
    }
35
  35
  </style>

<div class="scroller">
  <p>Scroll down the page</p>
  <p>And watch the blue square 🡖</p>
  <div class="square" />
  <p>The blue square follows you</p>
  <p>As you scroll past it</p>
  <p>And if you scroll back up</p>
  <p>It goes back where it was</p>
</div>

<style>
  .scroller {
    max-width: 25em;
    height: 10em;
    margin: auto;
    padding: 1em;
    border: 0.2em solid black;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  p {
    height: 5em;
  }

  .square {
    height: 5em;
    width: 5em;
    background-color: lightskyblue;
    margin-left: auto;

    position: sticky;
    top: 2em;
  }
</style>

Notice how when you scroll down, the blue square is always in exactly the same position. It's easy to tell when someone has tried to DIY their sticky positioning, because the element always lags one frame behind when scrolling. The faster you scroll down, the higher up the screen it would be. Then, when you stop scrolling, it jumps to the correct position.

Sticky positioning is a combination of relative and fixed positioning. It's mostly used for navigation menus that should follow you as you scroll down the page. It's used on this page too, if you are viewing it on a large landscape screen. The panel to the right with my face on it uses sticky positioning, meaning I'm always staring at you as you read my blogs.

To use sticky positioning, first you need to set position: sticky and provide distances for some (usually only one) of top, right, bottom, and left. When the element is scrolled past that position on the screen, it swaps to fixed positioning, and starts following you. If you scroll back, it returns to its original position and stays there. They don't follow you forever though - a sticky element will never move outside of its containing element.

It's a little difficult to wrap your head around, but I'd recommend reading through the MDN article on the position attribute. I use position all the time, so I think it's worth having a good understanding of all the possible values and what they do.

4. Accordion Menus

Accordion Menus are commonly used for FAQs, where you have a list of headers and each one can be expanded to show the content inside. This is another case of me telling you about a fairly basic feature of HTML+CSS, but <details> exists:

FAQ

Why is it called an accordion menu?

Because each part of it can expand and contract, like in an accordion. If you don't know what an accordion is, just imagine a cute fluffy cat. You still won't know what it is, but at least you'll feel better about not knowing.

Huh?

Huh.

If I use an accordion menu will it make me cool?

No, not unless you're designing a MySpace profile. The <details> element is cool though, and you can use that for a lot of things. I'm using it on this page right below here, to show the code for each example!

Show the code

Accordion.svelte

<Show 51 identical lines>
    1
        1
        <div class="container">
2
        2
          <h3>FAQ</h3>
3
        3
         
4
        4
          <details>
5
        5
            <summary>Why is it called an accordion menu?</summary>
6
        6
            <hr />
7
        7
            <p>
8
        8
              Because each part of it can expand and contract, like in an accordion. If
9
        9
              you don't know what an accordion is, just imagine a cute fluffy cat. You
10
        10
              still won't know what it is, but at least you'll feel better about not
11
        11
              knowing.
12
        12
            </p>
13
        13
          </details>
14
        14
         
15
        15
          <details>
16
        16
            <summary>Huh?</summary>
17
        17
            <hr />
18
        18
            <p>Huh.</p>
19
        19
          </details>
20
        20
         
21
        21
          <details>
22
        22
            <summary>If I use an accordion menu will it make me cool?</summary>
23
        23
            <hr />
24
        24
            <p>
25
        25
              No, not unless you're designing a MySpace profile. The <code
26
        26
                >{"<details>"}</code
27
        27
              > element is cool though, and you can use that for a lot of things. I'm using
28
        28
              it on this page right below here, to show the code for each example!
29
        29
            </p>
30
        30
          </details>
31
        31
        </div>
32
        32
         
33
        33
        <style>
34
        34
          .container {
35
        35
            padding: 1em 2em;
36
        36
            border: 0.2em solid black;
37
        37
            border-radius: 2em;
38
        38
          }
39
        39
         
40
        40
          details {
41
        41
            border: 0.1em solid black;
42
        42
            padding: 1em;
43
        43
            margin-bottom: 1em;
44
        44
            border-radius: 1em;
45
        45
          }
46
        46
         
47
        47
          summary {
48
        48
            font-size: 1.2em;
49
        49
            cursor: pointer;
50
        50
          }
51
        51
        </style>

1
  1
  <div class="container">
2
  2
    <h3>FAQ</h3>
3
  3
   
4
  4
    <details>
5
  5
      <summary>Why is it called an accordion menu?</summary>
6
  6
      <hr />
7
  7
      <p>
8
  8
        Because each part of it can expand and contract, like in an accordion. If
9
  9
        you don't know what an accordion is, just imagine a cute fluffy cat. You
10
  10
        still won't know what it is, but at least you'll feel better about not
11
  11
        knowing.
12
  12
      </p>
13
  13
    </details>
14
  14
   
15
  15
    <details>
16
  16
      <summary>Huh?</summary>
17
  17
      <hr />
18
  18
      <p>Huh.</p>
19
  19
    </details>
20
  20
   
21
  21
    <details>
22
  22
      <summary>If I use an accordion menu will it make me cool?</summary>
23
  23
      <hr />
24
  24
      <p>
25
  25
        No, not unless you're designing a MySpace profile. The <code
26
  26
          >{"<details>"}</code
27
  27
        > element is cool though, and you can use that for a lot of things. I'm using
28
  28
        it on this page right below here, to show the code for each example!
29
  29
      </p>
30
  30
    </details>
31
  31
  </div>
32
  32
   
33
  33
  <style>
34
  34
    .container {
35
  35
      padding: 1em 2em;
36
  36
      border: 0.2em solid black;
37
  37
      border-radius: 2em;
38
  38
    }
39
  39
   
40
  40
    details {
41
  41
      border: 0.1em solid black;
42
  42
      padding: 1em;
43
  43
      margin-bottom: 1em;
44
  44
      border-radius: 1em;
45
  45
    }
46
  46
   
47
  47
    summary {
48
  48
      font-size: 1.2em;
49
  49
      cursor: pointer;
50
  50
    }
51
  51
  </style>

<div class="container">
  <h3>FAQ</h3>

  <details>
    <summary>Why is it called an accordion menu?</summary>
    <hr />
    <p>
      Because each part of it can expand and contract, like in an accordion. If
      you don't know what an accordion is, just imagine a cute fluffy cat. You
      still won't know what it is, but at least you'll feel better about not
      knowing.
    </p>
  </details>

  <details>
    <summary>Huh?</summary>
    <hr />
    <p>Huh.</p>
  </details>

  <details>
    <summary>If I use an accordion menu will it make me cool?</summary>
    <hr />
    <p>
      No, not unless you're designing a MySpace profile. The <code
        >{"<details>"}</code
      > element is cool though, and you can use that for a lot of things. I'm using
      it on this page right below here, to show the code for each example!
    </p>
  </details>
</div>

<style>
  .container {
    padding: 1em 2em;
    border: 0.2em solid black;
    border-radius: 2em;
  }

  details {
    border: 0.1em solid black;
    padding: 1em;
    margin-bottom: 1em;
    border-radius: 1em;
  }

  summary {
    font-size: 1.2em;
    cursor: pointer;
  }
</style>

It's not always a good idea to use accordion menus due to them having a lot of usability issues. However, the <details> element is super useful when you want to hide some content from the user, especially if it's very long and most users won't want to read it. For example, I used one just above here to hide the source code for the example.

If you're not sure whether to use a details element, try reading the NHS service manual for it. They've done way more usability testing than you ever will, and have some decent guidelines for when it's appropriate to use.

One downside of a pure-CSS approach here is that details is tricky to animate without Javascript. It's possible to animate the box opening using transition, as long as you know the height of the box when open. Currently, browsers don't natively support animating the element being closed, so you'll have to restort to Javascript or a custom in/out animation.

5. Dark Mode

You can have an entirely functional dark mode on your website without any Javascript, cookies, or separate URLs - all in the browser. There's 2 components to this. First, you should be using the prefers-color-scheme media query. This allows you to automatically display a light-mode or dark-mode version of the site, based on the user's preferences.

However, the best way to make your website accessible is to give the user choice. Maybe they like dark mode usually, but on your website they would prefer light mode. We can make use of :checked - a CSS selector that only matches checked checkboxes. You might be able to see where this is going:

Light Mode Dark Mode

My Website

This is some text

This is my website where I put my text. I hope you like it. I have now used up my entire text budget and I have none left, goodbye.

Show the code

DarkMode.svelte

<Show 103 identical lines>
    1
        1
        <div class="container">
2
        2
          <input class="lightOverride" id="lightModeCheckbox" type="checkbox" />
3
        3
          <label class="lightOverride" for="lightModeCheckbox">Light Mode</label>
4
        4
         
5
        5
          <input class="darkOverride" id="darkModeCheckbox" type="checkbox" />
6
        6
          <label class="darkOverride" for="darkModeCheckbox">Dark Mode</label>
7
        7
         
8
        8
          <div class="body">
9
        9
            <h3 class="title">My Website</h3>
10
        10
         
11
        11
            <p>This is some text</p>
12
        12
            <p>
13
        13
              This is my website where I put my text. I hope you like it. I have now
14
        14
              used up my entire text budget and I have none left, goodbye.
15
        15
            </p>
16
        16
          </div>
17
        17
        </div>
18
        18
         
19
        19
        <style>
20
        20
          .container {
21
        21
            position: relative;
22
        22
            border: 0.2em solid black;
23
        23
            max-width: 25em;
24
        24
            margin: auto;
25
        25
          }
26
        26
         
27
        27
          .body {
28
        28
            padding: 1em;
29
        29
          }
30
        30
         
31
        31
          input,
32
        32
          label {
33
        33
            position: absolute;
34
        34
            top: 0.5em;
35
        35
            right: 0.5em;
36
        36
            height: 1.8em;
37
        37
          }
38
        38
         
39
        39
          label {
40
        40
            padding-right: 1.2em;
41
        41
            user-select: none;
42
        42
          }
43
        43
         
44
        44
          .title {
45
        45
            margin: 0;
46
        46
          }
47
        47
         
48
        48
          .darkOverride {
49
        49
            color: black;
50
        50
          }
51
        51
         
52
        52
          #darkModeCheckbox:checked {
53
        53
            color: whitesmoke;
54
        54
          }
55
        55
         
56
        56
          #darkModeCheckbox:checked ~ label {
57
        57
            color: whitesmoke;
58
        58
          }
59
        59
         
60
        60
          .lightOverride {
61
        61
            color: whitesmoke;
62
        62
          }
63
        63
         
64
        64
          #lightModeCheckbox:checked {
65
        65
            color: black;
66
        66
          }
67
        67
         
68
        68
          #lightModeCheckbox:checked ~ label {
69
        69
            color: black;
70
        70
          }
71
        71
         
72
        72
          @media (prefers-color-scheme: light) {
73
        73
            .lightOverride {
74
        74
              display: none;
75
        75
            }
76
        76
         
77
        77
            .body {
78
        78
              background-color: white;
79
        79
              color: black;
80
        80
            }
81
        81
         
82
        82
            #darkModeCheckbox:checked ~ .body {
83
        83
              background-color: darkslategrey;
84
        84
              color: whitesmoke;
85
        85
            }
86
        86
          }
87
        87
         
88
        88
          @media (prefers-color-scheme: dark) {
89
        89
            .darkOverride {
90
        90
              display: none;
91
        91
            }
92
        92
         
93
        93
            .body {
94
        94
              background-color: darkslategrey;
95
        95
              color: whitesmoke;
96
        96
            }
97
        97
         
98
        98
            #lightModeCheckbox:checked ~ .body {
99
        99
              background-color: white;
100
        100
              color: black;
101
        101
            }
102
        102
          }
103
        103
        </style>

1
  1
  <div class="container">
2
  2
    <input class="lightOverride" id="lightModeCheckbox" type="checkbox" />
3
  3
    <label class="lightOverride" for="lightModeCheckbox">Light Mode</label>
4
  4
   
5
  5
    <input class="darkOverride" id="darkModeCheckbox" type="checkbox" />
6
  6
    <label class="darkOverride" for="darkModeCheckbox">Dark Mode</label>
7
  7
   
8
  8
    <div class="body">
9
  9
      <h3 class="title">My Website</h3>
10
  10
   
11
  11
      <p>This is some text</p>
12
  12
      <p>
13
  13
        This is my website where I put my text. I hope you like it. I have now
14
  14
        used up my entire text budget and I have none left, goodbye.
15
  15
      </p>
16
  16
    </div>
17
  17
  </div>
18
  18
   
19
  19
  <style>
20
  20
    .container {
21
  21
      position: relative;
22
  22
      border: 0.2em solid black;
23
  23
      max-width: 25em;
24
  24
      margin: auto;
25
  25
    }
26
  26
   
27
  27
    .body {
28
  28
      padding: 1em;
29
  29
    }
30
  30
   
31
  31
    input,
32
  32
    label {
33
  33
      position: absolute;
34
  34
      top: 0.5em;
35
  35
      right: 0.5em;
36
  36
      height: 1.8em;
37
  37
    }
38
  38
   
39
  39
    label {
40
  40
      padding-right: 1.2em;
41
  41
      user-select: none;
42
  42
    }
43
  43
   
44
  44
    .title {
45
  45
      margin: 0;
46
  46
    }
47
  47
   
48
  48
    .darkOverride {
49
  49
      color: black;
50
  50
    }
51
  51
   
52
  52
    #darkModeCheckbox:checked {
53
  53
      color: whitesmoke;
54
  54
    }
55
  55
   
56
  56
    #darkModeCheckbox:checked ~ label {
57
  57
      color: whitesmoke;
58
  58
    }
59
  59
   
60
  60
    .lightOverride {
61
  61
      color: whitesmoke;
62
  62
    }
63
  63
   
64
  64
    #lightModeCheckbox:checked {
65
  65
      color: black;
66
  66
    }
67
  67
   
68
  68
    #lightModeCheckbox:checked ~ label {
69
  69
      color: black;
70
  70
    }
71
  71
   
72
  72
    @media (prefers-color-scheme: light) {
73
  73
      .lightOverride {
74
  74
        display: none;
75
  75
      }
76
  76
   
77
  77
      .body {
78
  78
        background-color: white;
79
  79
        color: black;
80
  80
      }
81
  81
   
82
  82
      #darkModeCheckbox:checked ~ .body {
83
  83
        background-color: darkslategrey;
84
  84
        color: whitesmoke;
85
  85
      }
86
  86
    }
87
  87
   
88
  88
    @media (prefers-color-scheme: dark) {
89
  89
      .darkOverride {
90
  90
        display: none;
91
  91
      }
92
  92
   
93
  93
      .body {
94
  94
        background-color: darkslategrey;
95
  95
        color: whitesmoke;
96
  96
      }
97
  97
   
98
  98
      #lightModeCheckbox:checked ~ .body {
99
  99
        background-color: white;
100
  100
        color: black;
101
  101
      }
102
  102
    }
103
  103
  </style>

<div class="container">
  <input class="lightOverride" id="lightModeCheckbox" type="checkbox" />
  <label class="lightOverride" for="lightModeCheckbox">Light Mode</label>

  <input class="darkOverride" id="darkModeCheckbox" type="checkbox" />
  <label class="darkOverride" for="darkModeCheckbox">Dark Mode</label>

  <div class="body">
    <h3 class="title">My Website</h3>

    <p>This is some text</p>
    <p>
      This is my website where I put my text. I hope you like it. I have now
      used up my entire text budget and I have none left, goodbye.
    </p>
  </div>
</div>

<style>
  .container {
    position: relative;
    border: 0.2em solid black;
    max-width: 25em;
    margin: auto;
  }

  .body {
    padding: 1em;
  }

  input,
  label {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    height: 1.8em;
  }

  label {
    padding-right: 1.2em;
    user-select: none;
  }

  .title {
    margin: 0;
  }

  .darkOverride {
    color: black;
  }

  #darkModeCheckbox:checked {
    color: whitesmoke;
  }

  #darkModeCheckbox:checked ~ label {
    color: whitesmoke;
  }

  .lightOverride {
    color: whitesmoke;
  }

  #lightModeCheckbox:checked {
    color: black;
  }

  #lightModeCheckbox:checked ~ label {
    color: black;
  }

  @media (prefers-color-scheme: light) {
    .lightOverride {
      display: none;
    }

    .body {
      background-color: white;
      color: black;
    }

    #darkModeCheckbox:checked ~ .body {
      background-color: darkslategrey;
      color: whitesmoke;
    }
  }

  @media (prefers-color-scheme: dark) {
    .darkOverride {
      display: none;
    }

    .body {
      background-color: darkslategrey;
      color: whitesmoke;
    }

    #lightModeCheckbox:checked ~ .body {
      background-color: white;
      color: black;
    }
  }
</style>

This is actually a more general technique, which works any time you want to let the user toggle between two different versions of an element, or two different styles. For example, I used it in my last blog post to toggle between different versions of a code snippet.

The trick is to combine the :checked pseudo-class with the ~ sibling combinator. A CSS rule like p ~ a applies to all <a> elements that have a <p> element sibling before them in the HTML document.

The actual rule used is #checkboxId:checked ~ .body - which applies some styles to the body class only when the checkbox is checked. Since the affected element must be a subsequent sibling, we can't put the dark mode checkbox inside the body element. Instead, we put it before the body element, then use position: absolute to position it inside.

This isn't just a toy example either. Most browsers will automatically remember the checkbox state, meaning you can save the user's preference for free - try ticking the box and refreshing this page! It won't always work, so you should probably include a little bit of JavaScript to store the user's preference in local storage.

Conclusion

It's daunting to learn the ins-and-outs of HTML/CSS. It can be frustrating when you know exactly what you want it to do but can't figure out how to tell the computer. However, it's easier now than ever before to make websites look great. CSS has had 20 years worth of development, and is full of new features to make life easier. If you want some further reading, check out:

Some of the things I've mentioned are reasonably new, meaning that if you need to support Internet Explorer, these techniques probably aren't for you. For example, position: sticky and :focus-within aren't supported in any version of IE. Hopefully you can forget that Internet Explorer ever existed, in which case everything I've used here has close to 100% support in browsers!

Despite that, it's still best to embrace progressive enhancement. You should assume that your users will be using the most barebones browser imaginable, and make your site work as well as possible. Then, assume they're using a slightly better browser, and add things that make it work even better for those people.

It's like when we were talking about dark mode. I recommended that you should include a small piece of JavaScript code to maintain the state of the user's override checkbox. If they didn't enable JavaScript, the website would still work fine, but you've used that code to make it slightly better when JS is available. A purely JS solution would be completely broken for anyone without JavaScript. And that's a lot of people.

Anyway, I think I've shown how powerful of a tool CSS can be when you really stretch yourself. The point of this post was never for you to just copy my example code, though you should feel free to do so. Instead, it's to give you some pointers towards the more useful parts of the language, and encourage you to explore what the more basic parts of web dev have on offer.

Send me a message if you make something cool!

5 things you don't need Javascript for

1. Animating SVGs

Animation.svelte

2. Sidebars

Sidebar.svelte

3. Sticky Positioning

StickyPositioning.svelte

4. Accordion Menus

FAQ

Accordion.svelte

5. Dark Mode

My Website

DarkMode.svelte

Conclusion

Steven Waterman

Get Started