Originally posted here!
To set styles to a webpage if the user's device has a mouse using only CSS, you can use the @media CSS rule and then use the pointer CSS media feature and set its value as fine. If the user's device or the browsing device has a mouse, the pointer: fine CSS media feature code block will be triggered where you can define the CSS styles to get applied for the mouse.
TL;DR
<!-- A simple webpage with a `button` HTML element -->
<html>
<style>
/* Using the `pointer: fine` CSS media feature to set styles for a mouse device */
@media (pointer: fine) {
button {
background-color: green;
color: white;
}
}
</style>
<body>
<button>Click Me</button>
</body>
</html>
For example, let's say we have a webpage with a button HTML element like this,
<!-- A simple webpage with a `button` HTML element -->
<html>
<body>
<button>Click Me</button>
</body>
</html>
The webpage looks like this,
The above webpage screenshot is from a desktop device. As you can see that the button has a white background color.
Now let's change the color of the button HTML element to a green color when the webpage is opened on a device with a mouse connected to it.
To do that first, we can add the @media CSS media rule with the pointer: fine CSS media feature.
It can be done like this,
<!-- A simple webpage with a `button` HTML element -->
<html>
<style>
/* Using the `pointer: fine` CSS media feature to set styles for a mouse device */
@media (pointer: fine) {
/* Styles for mouse device can be added here */
}
</style>
<body>
<button>Click Me</button>
</body>
</html>
Now to change the color of the button to green color, we can use the background-color CSS property and set its value to green color inside the pointer: fine CSS media feature.
It can be done like this,
<!-- A simple webpage with a `button` HTML element -->
<html>
<style>
/* Using the `pointer: fine` CSS media feature to set styles for a mouse device */
@media (pointer: fine) {
button {
background-color: green;
color: white;
}
}
</style>
<body>
<button>Click Me</button>
</body>
</html>
Now the button background color is changed to green color since the desktop device has a mouse connected to it.
This proves that the CSS media feature is working as expected.
See the above code live in codesandbox.
That's all 😃.
Top comments (0)