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 😃.