Entry 02

Hover styles only where hover exists

Use it on every :hover rule, so a tap on a touch screen does not leave the hover state stuck.

With a mouse the button changes on hover. On a touch screen, or with a stylus, the readout says the query does not match and a tap leaves nothing stuck.

Code CSS · 3 lines

@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--primary-hover); }
}

Why it works, the rules and the credits 2 reasons · 2 rules · support · credits

Why it works

Touch browsers apply :hover on tap and keep it until the next tap elsewhere. hover: hover asks whether the primary input can hover.
pointer: fine asks whether it is precise, like a mouse. It rules out styluses and the Android devices that claim hover support.

Rules

Tailwind v4's hover: variant wraps itself in (hover: hover) only. Write the full query by hand everywhere else.
Touch users still need feedback on press. Give it with :active, which works for every input.

Support

Chrome: 38
Firefox: 64
Safari: 9

Credits

Borrowed from: Emil Kowalski, mobile-native skill and emil-design-eng skill · Rauno Freiberg, Web Interface Guidelines