×

css · level 3 · unit 7 · lesson 3

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

Never hide focus: give it a clear ring from your tokens.

Many people use a keyboard, not a mouse: Tab moves between links and buttons. The shows where they are. The worst line in CSS is outline: none with nothing to replace it, because it leaves them lost.

Style the ring on :focus-visible, so it shows for keyboards but not for mouse clicks. Use outline, which takes up no space and never shifts the layout, plus for a small gap from the edge.

Make the ring colour a token, like --focus, so every component shares one ring and each theme can tune it.

<button class="btn">Save</button>
<a href="https://example.com/help">Help</a>
:root {
  --focus: #1d4ed8;
}
:is(a, button):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

Press show my page to see it here.

Click in the preview, then press Tab to watch the ring move from the button to the link.