La caracteristica pointer
CSS comprueba si el usuario tiene un dispositivo de puntero (como el rat贸n), y si es as铆, cu谩n preciso es el dispositivo de puntero primario.
Nota: Si quieres comprobar la precisi贸n de cualquier dispositivo apuntador, usa any-pointer
en su lugar.
Sintaxis
La propiedad pointer
se especifica como un valor de palabra clave elegido de la lista que figura a continuaci贸n.
none
- El mecanismo de entrada principal no incluye un dispositivo apuntador.
coarse
- El mecanismo primario de entrada incluye un dispositivo de apuntamiento de precisi贸n limitada.
fine
- El mecanismo de entrada principal incluye un dispositivo de apuntamiento preciso.
Ejemplo
Este ejemplo crea una peque帽o checkbox para los usuarios con punteros primarios finos y un gran checkbox para los usuarios con punteros primarios gruesos.
HTML
<input id="test" type="checkbox" />
<label for="test">M铆rame!</label>
CSS
input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
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;
}
}
Resultado
Especificaci贸n
Especificaci贸n | Status | Comentario |
---|---|---|
Media Queries Level 4 La definici贸n de 'pointer' en esta especificaci贸n. |
Candidate Recommendation | Initial definition. |
Compatibilidad
BCD tables only load in the browser
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.