Tutorials

CSS @media any-pointer Property

Posted in CSS Tutorial

Updated on Oct 06, 2024

By Mari Selvan

👁️ 14 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The @media any-pointer property in CSS is used to determine the types of pointing devices that are available to the user, such as a mouse, stylus, or touchscreen. Unlike the pointer property, which checks the primary pointing device, any-pointer checks all available pointing devices.

This property is especially useful for designing responsive websites that need to adapt to various input methods.

💡 Syntax

The @media any-pointer property is used within a media query to apply styles based on the pointer capabilities of the user's device.

Syntax

Copied

@media (any-pointer: fine) {
  /* Styles for devices with fine precision pointers (e.g., mouse) */
}

@media (any-pointer: coarse) {
  /* Styles for devices with coarse precision pointers (e.g., touchscreen) */
}

@media (any-pointer: none) {
  /* Styles for devices with no pointing device */
}

🏠 Property Values

fine: Indicates a device with a high-precision pointing device (such as a mouse or stylus) that allows for pixel-accurate interaction.
coarse: Indicates a device with a low-precision pointing device (such as a touchscreen) where interaction is less precise.
none: Indicates that no pointing device is available.

🎛️ Default Value

There is no default value for the @media any-pointer property, as it is used in media queries to check the available pointing devices on the user’s system.

📝 Example Usage

📜 Basic Usage

In this example, we'll change the button styles based on the type of pointing device available.

example.scss

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS @media any-pointer Example</title>
  <style>
    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }

    /* Styles for fine pointing devices (e.g., mouse) */
    @media (any-pointer: fine) {
      button {
        background-color: lightblue;
        border: 2px solid blue;
      }
    }

    /* Styles for coarse pointing devices (e.g., touchscreen) */
    @media (any-pointer: coarse) {
      button {
        background-color: lightgreen;
        border: 2px solid green;
      }
    }

    /* Styles for devices with no pointing device */
    @media (any-pointer: none) {
      button {
        background-color: lightgray;
        border: 2px solid gray;
      }
    }
  </style>
</head>
<body>
  <h1>Button Styling Based on Pointing Device</h1>
  <button>Click Me</button>
</body>
</html>

🖥️ Browser Compatibility

The @media any-pointer property is supported in most modern browsers, including Chrome, Firefox, Edge, and Safari. However, it is essential to test across different devices and browsers to ensure your design responds appropriately to various input methods.

🎉 Conclusion

The @media any-pointer property provides developers with a powerful tool for creating responsive designs that adapt to different input devices. Whether a user is navigating with a mouse, touchscreen, or no pointing device, you can tailor the experience accordingly. This property helps improve accessibility and usability for a wide range of users.