Introduction

I’ve noticed that the longer I write code, the more I bump into things I “already know” but never really understood. They work, I use them, and then one day a tiny behavior or detail makes me stop and dig deeper. Most of those discoveries never make it past a browser tab or a passing thought — which is a waste, because that’s where the real learning hides.

“Today I Learned” doesn’t always mean brand new. Sometimes it’s something I’ve used for years but never stopped to read the spec, question the behavior, or write it down properly. This series is my way of slowing down just enough to capture those quiet “oh, that’s why” moments — not because they’re groundbreaking, but because they’re worth remembering.

And of course, not everything here comes from experience. Some posts start with me realizing I actually don’t know how something works, then digging until it finally makes sense — and writing it down before I forget again.

Day 0

1. [CSS] accent-color

1
<div>
2
  <div>
3
    <input type="checkbox" checked />
4
  </div>
5
  <div>
6
    <input type="radio" checked />
7
  </div>
8
  <div>
9
    <input type="range" />
10
  </div>
11
  <div>
12
    <progress></progress>
13
  </div>
14
</div>

1
  input[type="checkbox"],
2
  input[type="radio"],
3
  input[type="range"],
4
  progress {
5
    accent-color: #ff5a00;
6
  }

Browsers that support accent-color currently apply it to the following HTML elements:

• <input type="checkbox">
• <input type="radio">
• <input type="range">
• <progress>

2. [CSS] :active, :focus, :focus-visible, :focus-within

1
<div>
2
  <fieldset>
3
    <legend>:focus-within</legend>
4
    <button>click here then press <strong>Tab</strong></button>
5
    <div class="focus-within">
6
      <input type="checkbox" />
7
      <label>focus-within</label>
8
    </div>
9
  </fieldset>
10
</div>

1
.focus-within:focus-within {
2
  font-weight: bold;
3
}
4
.focus-within:not(:focus-within) label:after {
5
  content: ': false'
6
}
7
.focus-within:focus-within label:after {
8
  content: ': true'
9
}

• The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)

1
<div>
2
  <fieldset>
3
    <legend>:active, :focus, :focus-visible</legend>
4
    <div class="pseudo_input">
5
      <input type="text" class="pseudo_input-input" placeholder="try me"/>
6
      <span class="pseudo_input-span pseudo_input-span--active">active</span>
7
      <span class="pseudo_input-span pseudo_input-span--focus">focus</span>
8
      <span class="pseudo_input-span pseudo_input-span--focus-visible">focus-visible</span>
9
    </div>
10
    <div class="pseudo_btn">
11
      <button class="pseudo_btn-btn">click or tab me</button>
12
      <span class="pseudo_btn-span pseudo_btn-span--active">active</span>
13
      <span class="pseudo_btn-span pseudo_btn-span--focus">focus</span>
14
      <span class="pseudo_btn-span pseudo_btn-span--focus-visible">focus-visible</span>
15
    </div>
16
  </fieldset>
17
</div>

1
.pseudo_input-span{
2
  display: none;
3
}
4
.pseudo_input-input:active ~ .pseudo_input-span--active,
5
.pseudo_input-input:focus ~ .pseudo_input-span--focus,
6
.pseudo_input-input:focus-visible ~ .pseudo_input-span--focus-visible{
7
  display:inline-block
8
}
9

10
.pseudo_btn-span {
11
  display: none;
12
}
13
.pseudo_btn-btn:active ~ .pseudo_btn-span--active,
14
.pseudo_btn-btn:focus ~ .pseudo_btn-span--focus,
15
.pseudo_btn-btn:focus-visible ~ .pseudo_btn-span--focus-visible {
16
  display:inline-block
17
}

• The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, “activation” typically starts when the user presses down the primary mouse button.

• The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard’s kbk>Tab key.

• The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element. (Many browsers show a “focus ring” by default in this case.)

• The difference between :focus and :focus-visible lies in intent, not capability. Both target elements that currently have focus, but :focus-visible activates only when the browser determines the user needs a visible cue—usually when navigating with a keyboard or assistive technology. In contrast, :focus triggers for any focused element, regardless of how it was reached. This means :focus is best for behavior and logic (like showing a dropdown when an input gains focus), while :focus-visible is for visual indicators that help non-mouse users track their position without cluttering the interface for pointer