CSS @media 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 rule in CSS allows developers to apply styles based on the characteristics of the device or viewport, such as its width, height, or resolution.

The pointer media feature within the @media rule provides information about the user's primary input mechanism. This can be useful for tailoring the user interface based on whether the user is using a mouse, touch screen, or other pointing device.

💡 Syntax

The @media pointer feature can be used within media queries to apply styles based on the type of pointer device. It typically takes one of the following values:

Syntax

Copied

@media (pointer: value) {
  /* CSS rules here */
}

🏠 Property Values

none: Indicates that no pointing device is available, which may be relevant for devices that rely solely on keyboard input or other non-pointer interfaces.
coarse: Indicates a pointing device with limited accuracy, such as a touch screen. This value is typically used to apply styles suited for touch interactions.
fine: Indicates a pointing device with high accuracy, such as a mouse or trackpad. This value is used for devices that support precise pointing and clicking.

🎛️ Default Value

The @media pointer feature does not have a default value in the CSS specification. Instead, it is based on the type of device being used to access the website. If no media query is applied, the default behavior will depend on the device's input method.

📝 Example Usage

📜 Using pointer: coarse for Touch Screens

In this example, we'll apply different styles for touch screens to improve usability on devices with coarse pointers.

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 pointer Example</title>
  <style>
    /* Styles for all devices */
    button {
      padding: 10px 20px;
      font-size: 16px;
    }
    
    /* Styles specifically for touch screens (coarse pointer) */
    @media (pointer: coarse) {
      button {
        padding: 20px 40px;
        font-size: 18px;
      }
    }
    
    /* Styles specifically for devices with a fine pointer (e.g., mouse) */
    @media (pointer: fine) {
      button:hover {
        background-color: #007bff;
        color: white;
      }
    }
  </style>
</head>
<body>
  <h1>Button with Different Styles Based on Pointer Device</h1>
  <button>Click Me</button>
</body>
</html>

🖥️ Browser Compatibility

The pointer media feature is supported in most modern browsers. It’s a good idea to test your website across different devices and browsers to ensure that your styles work as intended for all users.

🎉 Conclusion

The @media pointer property is a valuable tool for creating responsive designs that adapt to different input methods.

By using this feature, you can enhance user experience by tailoring your styles to accommodate the precision of the user's pointing device. Experiment with different pointer values to see how they can improve the accessibility and usability of your web projects.