CSS any-pointer Media Feature

What You’ll Learn

The any-pointer media feature detects whether any pointing device on the system is precise (mouse), imprecise (touch), or absent. Use it to size controls and layouts for real input capabilities.

Introduction

The @media any-pointer feature in CSS checks what kinds of pointing devices are available to the user — a mouse, stylus, touchscreen, or none at all. Unlike the pointer media feature, which looks at the primary input only, any-pointer evaluates all available pointing devices.

This is valuable for responsive design. A tablet in portrait mode might primarily use touch (coarse), but if the user connects a mouse, any-pointer: fine can match so you can offer tighter, desktop-style controls.

Definition and Usage

Wrap CSS rules in @media (any-pointer: fine), @media (any-pointer: coarse), or @media (any-pointer: none). The browser reports the best available pointer type across all inputs and applies matching styles.

📝 Syntax

Use any-pointer inside an @media rule to target different pointer precisions:

@media (any-pointer: fine) {
  /* High-precision pointer (mouse, stylus) */
}

@media (any-pointer: coarse) {
  /* Low-precision pointer (touchscreen) */
}

@media (any-pointer: none) {
  /* No pointing device available */
}

Accepted Values

• fine — A high-precision pointing device (mouse or stylus) that allows pixel-accurate interaction.
• coarse — A low-precision pointing device (finger on a touchscreen) where taps are less exact.
• none — No pointing device is available (keyboard-only or voice navigation).

Basic Example

button {
  padding: 0.65rem 1.25rem;
  cursor: pointer;
}

@media (any-pointer: fine) {
  button {
    background: #93c5fd;
    border: 2px solid #2563eb;
  }
}

@media (any-pointer: coarse) {
  button {
    background: #86efac;
    border: 2px solid #16a34a;
  }
}

any-pointer vs pointer Media Feature

Default Value

There is no CSS default for any-pointer. The browser evaluates the user’s actual hardware at runtime.

Syntax Rules

• Valid values are fine, coarse, and none only.
• Combine with other features: @media (any-pointer: coarse) and (max-width: 48rem).
• Works alongside any-hover for complete input adaptation.
• Prefer any-pointer over pointer when hybrid touch-and-mouse devices matter.
• Start with coarse-friendly sizes; enhance for fine pointers.

Related Topics

• any-hover — detect hover capability across all inputs
• :hover pseudo-class — pointer-over styling
• cursor property — change the mouse pointer icon

When to Use any-pointer

Use any-pointer when interaction precision affects usability:

• Touch target sizing — Enlarge buttons and links on coarse devices.
• Dense toolbars — Allow smaller icon buttons on fine devices only.
• Hybrid laptops — Enable mouse-precision UI when any fine pointer exists.
• Form controls — Increase checkbox/radio hit areas on touch screens.
• Game or canvas UIs — Adjust control density based on pointer accuracy.

Examples Gallery

Practice any-pointer with buttons, touch targets, toolbars, and media feature comparisons.

button {
  padding: 0.65rem 1.25rem;
  font-size: 1rem;
  cursor: pointer;
}

@media (any-pointer: fine) {
  button {
    background-color: #93c5fd;
  }
}

@media (any-pointer: coarse) and (not (any-pointer: fine)) {
  button {
    background-color: #86efac;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
}

@media (any-pointer: coarse) {
  .btn {
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.75rem 1.25rem;
    font-size: 1.0625rem;
  }
}

@media (any-pointer: fine) {
  .btn {
    min-height: 2rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.875rem;
  }
}

.toolbar {
  display: flex;
  gap: 0.5rem;
}

.toolbar button {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 0.35rem;
}

@media (any-pointer: fine) {
  .toolbar button {
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 0.875rem;
  }
}

@media (any-pointer: coarse) {
  .toolbar button {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.125rem;
  }
}

/* Primary input only */
@media (pointer: coarse) {
  .panel { padding: 1.5rem; }
}

/* Any available input — detects connected mouse */
@media (any-pointer: fine) {
  .panel--compact {
    padding: 0.75rem;
    font-size: 0.875rem;
  }
}

@media (any-pointer: coarse) and (pointer: coarse) {
  .panel { padding: 1.5rem; }
}

💬 Usage Tips

• Mobile-first sizing — Default to coarse-friendly sizes; tighten layout under any-pointer: fine.
• Pair with any-hover — Combine pointer precision and hover capability for complete input adaptation.
• 44 px minimum — Aim for at least 44×44 CSS pixels for tap targets on coarse devices.
• Do not use width alone — Large desktop screens can still be touch-only (kiosk, tablet).
• Test hybrid devices — Verify behavior with and without a connected mouse on touchscreen laptops.

⚠️ Common Pitfalls

• Tiny touch targets — Do not use fine-only sizing as the default; touch users will miss small buttons.
• Confusing with any-hover — any-pointer is about precision; any-hover is about hover capability. They complement each other.
• Assuming coarse = mobile — Some desktops have touch screens; some tablets have mice.
• Ignoring none — Keyboard-only users may match any-pointer: none; ensure focus navigation works.
• Over-nesting queries — Keep media query logic readable; extract shared base styles first.

♿ Accessibility

• Minimum target size — WCAG recommends at least 44×44 px for pointer inputs on coarse devices.
• Keyboard navigation — Users with any-pointer: none rely on Tab and Enter; provide visible :focus styles.
• Do not shrink on touch — Never make controls smaller on coarse devices than on fine devices.
• Spacing between targets — Add gap between adjacent tap targets to prevent mis-taps.
• Progressive enhancement — Core actions must work without fine pointer precision.

💡 Best Practices