×

css · level 2 · unit 6 · 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

shows keyboard users where they are.

Many people move round a page with the Tab key instead of a mouse. The element that key presses go to has , and :focus picks it, whatever put it there.

:focus-visible is smarter. It picks the focused element only when a ring would help, such as after a Tab press, and not after every mouse click.

Style it with an : a line drawn outside the border that takes up no space. Never remove a focus ring without putting a better one in its place.

<button>Save</button>
<button>Share</button>
button {
  padding: 10px 16px;
}
button:focus-visible {
  outline: 3px solid darkorange;
  outline-offset: 2px;
}

Press show my page to see it here.

outline-offset adds a gap between the ring and the button. Click the preview, then press Tab.