CSS any-pointer Media Feature

Definition and Usage

The any-pointer media feature tests whether any available pointing device exists, and how accurate it is.

Use @media (any-pointer: fine) when a mouse, trackpad, or stylus is present. Use @media (any-pointer: coarse) when a finger or other imprecise pointer is available. Use @media (any-pointer: none) when there is no pointing device. Unlike pointer, it is not limited to the primary input — useful on hybrid touch + mouse devices.

CSS Syntax

Always wrap the feature in parentheses. Invalid forms like @media any-pointer(fine) do not work.

Feature Values

How to Use any-pointer

Ship comfortable targets first, then enlarge for coarse pointers or tighten only when a fine pointer is available.

1. Size buttons and links so they work with a finger (about 44×44 px is a solid default).
2. Enlarge further with @media (any-pointer: coarse) when needed.
3. Optionally tighten spacing with @media (any-pointer: fine) for mouse-dense UIs.
4. Compare with pointer when only the primary device matters.

Live Preview

This device’s any-pointer result via matchMedia. The sample button grows when (any-pointer: coarse) matches.

CSS Examples

Each snippet focuses on the any-pointer media feature. Keep defaults touch-friendly, then adapt for precision. Use Try It Yourself for a live editor.

<style>
  button {
    background: #2563eb;
    color: #fff;
    border: 0;
    padding: 12px 16px;
    font: inherit;
  }

  @media (any-pointer: coarse) {
    button {
      padding: 18px 24px;
      min-height: 48px;
    }
  }
</style>

<button type="button">Save</button>

<style>
  button {
    background: #2563eb;
    color: #fff;
    border: 0;
    padding: 14px 18px;
    font: inherit;
  }

  @media (any-pointer: fine) {
    button {
      padding: 8px 12px;
    }
  }
</style>

<button type="button">Edit</button>

<style>
  .box {
    padding: 12px;
    border: 1px solid #64748b;
  }

  .primary::after { content: " — unknown"; }
  .any::after { content: " — unknown"; }

  @media (pointer: fine) {
    .primary::after { content: " — fine"; }
  }
  @media (pointer: coarse) {
    .primary::after { content: " — coarse"; }
  }
  @media (pointer: none) {
    .primary::after { content: " — none"; }
  }

  @media (any-pointer: fine) {
    .any::after { content: " — fine"; }
  }
  @media (any-pointer: coarse) {
    .any::after { content: " — coarse"; }
  }
  @media (any-pointer: none) {
    .any::after { content: " — none"; }
  }
</style>

<p class="box primary">pointer (primary)</p>
<p class="box any">any-pointer (any)</p>

Key Takeaways