CSS Media Features - Pointer

CSS media feature pointer checks if the user has a pointing device they can use to point and click, such as a mouse or touchscreen.

Possible Values

  • none − This value indicates that the user does not have a pointing device, such as a mouse or touchscreen.

  • coarse − This value indicates that the user has a pointing device that is not very accurate, such as a finger on a touchscreen.

  • fine − This value indicates that the user has a pointing device that is very accurate, such as a mouse.

Syntax

pointer: none|coarse|fine;
CSS media feature any-pointer can be used to test the accuracy of any pointing device.

CSS pointer - coarse Value

The following example demonstrates how to use the CSS media feature pointer: coarse to change the style of a paragraph element on devices with coarse pointing devices, such as touchscreens −

Test the example on mobile or touchscreen device.
<html>
<head>
<style>
   p {
      background-color: pink;
   }
   @media (pointer: coarse) {
      p:hover {
         background-color: yellow; 
         border: 2px solid red;
      }
   }
</style>
</head>
<body>
   <p>CSS pointer: coarse Example</p>
</body>
</html>

CSS pointer - fine Value

The following example demonstrates the use of media feature pointer: fine to change the appearance of an element when the user hovers over the pelement with a fine pointing device, the background color will change to yellow and a red border will be added.

<html>
<head>
<style>
   p {
      background-color: pink;
   }
   @media (pointer: fine) {
      p:hover {
         background-color: yellow; 
         border: 2px solid red;
      }
   }
</style>
</head>
<body>
   <p>CSS pointer: fine Example</p>
</body>
</html>
Advertisements