CSS pointer Media Feature

What You’ll Learn

The pointer media feature detects the primary pointing device — mouse, touchscreen, or none. Adapt button sizes, spacing, and hover behavior for how users mainly interact with your page.

Introduction

Not every visitor uses a mouse. Phones rely on fingers, some users navigate with keyboards only, and hybrid laptops offer both touch and trackpad. The @media (pointer) feature tells CSS which primary pointing device is in use.

This is different from any-pointer, which checks all available pointing devices. The pointer feature focuses on the main input method only.

Definition and Usage

Wrap rules in @media (pointer: fine), @media (pointer: coarse), or @media (pointer: none). Enlarge tap targets on coarse, enable hover-rich UI on fine, and keep keyboard navigation clear when none matches.

📝 Syntax

Use fine, coarse, or none inside an @media rule:

@media (pointer: fine) {
  /* Mouse or trackpad is primary */
}

@media (pointer: coarse) {
  /* Touchscreen is primary */
}

@media (pointer: none) {
  /* No pointing device (keyboard only) */
}

Accepted Values

• fine — High-precision pointer such as a mouse, trackpad, or stylus (small targets work well).
• coarse — Low-precision pointer such as a finger on a touchscreen (use larger tap targets).
• none — No pointing device; user relies on keyboard or other non-pointer input.

pointer vs any-pointer

pointer vs :hover Selector

Basic Example

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

@media (pointer: coarse) {
  button {
    padding: 1rem 1.75rem;
    font-size: 1.125rem;
  }
}

@media (pointer: fine) {
  button:hover {
    background: #2563eb;
    color: #fff;
  }
}

Default Value

There is no CSS default for pointer. The browser evaluates the primary input device at runtime.

Syntax Rules

• Use keyword values only: fine, coarse, none.
• Pair with hover for hover-capable fine pointers: @media (pointer: fine) and (hover: hover).
• Use any-pointer when hybrid devices with multiple inputs matter.
• Default to touch-friendly sizes; tighten under pointer: fine.
• Never hide essential actions behind hover-only UI without a keyboard alternative.

Related Topics

• any-pointer — all available pointing devices
• hover — primary hover capability
• :hover selector — element hover styling

When to Use pointer

Reach for pointer when the primary input method drives the design:

• Touch-primary phones — Enlarge buttons and links when coarse matches.
• Desktop mouse UI — Compact controls and hover states when fine matches.
• Keyboard-only users — Ensure focus styles and skip links when none matches.
• Form controls — Increase checkbox and radio hit areas on touch-primary devices.
• Navigation density — Tighter menus on fine pointers, spaced menus on coarse.

Examples Gallery

Practice pointer with touch-sized buttons, hover effects, touch targets, and any-pointer comparisons.

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

@media (pointer: coarse) {
  button {
    padding: 1.25rem 2.5rem;
    font-size: 1.125rem;
  }
}

button {
  padding: 0.65rem 1.25rem;
  background: #e2e8f0;
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
}

@media (pointer: fine) {
  button:hover {
    background: #2563eb;
    color: #fff;
  }
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.35rem;
  background: #fff;
  cursor: pointer;
}

@media (pointer: coarse) {
  .icon-btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

.panel {
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.4rem;
  margin-bottom: 0.75rem;
}

@media (pointer: coarse) {
  .panel--primary {
    background: #fef3c7;
    border-color: #fcd34d;
  }
}

@media (any-pointer: fine) {
  .panel--any {
    background: #dbeafe;
    border-color: #93c5fd;
  }
}

🛠 Usage Tips

• Mobile-first sizing — Default to coarse-friendly sizes; tighten under pointer: fine.
• Pair with hover — Use (pointer: fine) and (hover: hover) for reliable hover UI.
• Hybrid devices — Consider any-pointer when a mouse may be connected to a touchscreen.
• Focus styles — Always provide visible :focus for pointer: none users.
• Test real devices — Emulators help, but phones and tablets give the true coarse result.

⚠️ Common Pitfalls

• Confusing with any-pointer — pointer is primary only; any-pointer checks all devices.
• Hover-only actions — Never hide essential features behind hover without keyboard alternatives.
• Tiny touch targets — Do not use fine-pointer sizing as your only button style.
• Assuming coarse = phone — Touchscreen laptops also report coarse as primary.
• Ignoring pointer: none — Keyboard users need full tab navigation support.

♿ Accessibility

• 44×44px targets — Meet minimum touch size on pointer: coarse devices.
• Keyboard navigation — Users with pointer: none rely on Tab and Enter.
• Visible focus — Provide clear :focus-visible styles for all interactive elements.
• No hover-only content — Tooltips and menus must work without hovering.
• Spacing — Add margin between adjacent tap targets on coarse pointers.

💡 Best Practices

Related Topics