pointer
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.
The pointer
CSS media feature tests whether the user has a pointing device (such as a mouse), and if so, how accurate the primary pointing device is.
Note:
If you want to test the accuracy of any pointing device, use any-pointer
instead.
Syntax
The pointer
feature is specified as a keyword value chosen from the list below.
Examples
This example creates a small checkbox for users with fine primary pointers and a large checkbox for users with coarse primary pointers.
HTML
html
<input id="test" type="checkbox" /> <label for="test">Look at me!</label>
CSS
css
input[type="checkbox"] {
appearance: none;
border: solid;
margin: 0;
}
input[type="checkbox"]:checked {
background: gray;
}
@media (pointer: fine) {
input[type="checkbox"] {
width: 15px;
height: 15px;
border-width: 1px;
border-color: blue;
}
}
@media (pointer: coarse) {
input[type="checkbox"] {
width: 30px;
height: 30px;
border-width: 2px;
border-color: red;
}
}
Result
Specifications
Specification |
---|
Media Queries Level 4 # pointer |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
pointer media feature |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.