CSS Media features - any-pointer

CSS media feature any-pointer is used to detect the presence of any available input mechanism for pointing at elements, such as a mouse, stylus, or touchscreen. It allows you to apply different styles or behaviors to elements based on the type of pointing device that the user is using.

This is useful for creating responsive designs that adapt to the user's input methods.

Possible Values

  • none − This value indicates that there is no pointing device available. In other words, the user's device doesn't have any input mechanism for pointing, which is quite rare.

  • coarse − This indicates that the device has at least one input mechanism capable of pointing to elements, but it might not be very accurate, such as a touchscreen. Coarse devices typically lack the precision of a mouse or stylus.

  • fine − This value indicates that there is a pointing device available, and it is a fine device with higher precision, such as a mouse or stylus.

Syntax

any-hover: none|coarse|fine;

CSS any-pointer - none Value

The following example demonstrates that any-pointer: none media query will not change the cursor when the user hovers over the button −

<html>
<head>
<style>
   button{
      padding: 5px;
      background-color: yellow;
      border: none
   }
   @media (any-pointer: none) {
      button:hover {
         background-color: pink; 
         border: 2px solid red;
         cursor: pointer;
      }
   }
</style>
</head>
<body>
   <p>When the user hovers over the paragraph the cursor will not change.</p>
   <button>any-pointer: none</p>
</body>
</html>

CSS any-pointer - coarse Value

The following example demonstrates how to use the any-pointer: coarse media feature to style a paragraph differently on devices such as, touch screens −

<html>
<head>
<style>
   .content {
      padding: 5px;
      background-color: yellow;
   }
   @media (any-pointer: coarse) {
      .content:hover {
         background-color: pink; 
         border: 2px solid red;
         cursor: pointer;
      }
   }
</style>
</head>
<body>
   <div class="content">
      <h3>any-pointer: coarse Example</h3>
      <p>When the user hovers over the paragraph the cursor will change.</p>
   </div>
</body>
</html>

CSS any-pointer - fine Value

The following example demonstrates that any-pointer: fine media query will change the cursor when the user hovers over the parargraph −

<html>
<head>
<style>
   .content {
      padding: 5px;
      background-color: yellow;
   }
   @media (any-pointer: fine) {
      .content:hover {
         background-color: pink; 
         border: 2px solid red;
         cursor: pointer;
      }
   }
</style>
</head>
<body>
   <div class="content">
      <h3>any-pointer: fine Example</h3>
      <p>When the user hovers over the paragraph the cursor will change.</p>
   </div>
</body>
</html>
Advertisements