Skip to content
CSS·Intermediate·Coding·1 min read

How should responsive interfaces account for input capability?

Short interview answer

Do not infer touch from width. Use capability queries such as hover and pointer where enhancement depends on them, retain keyboard access, and never hide essential actions behind hover-only interactions.

Example

CSS
@media (hover: hover) and (pointer: fine) {  .row:hover .actions { opacity: 1; } /* progressive enhancement only */}/* touch users still reach .actions another way */

Key takeaway

Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.

← Back to Responsive design and container queries

Related questions