Медиафункция CSS `pointer`

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на множестве устройств и в разных версиях браузеров. Она доступна во всех браузерах с декабря 2018 года.

pointer CSS медиафункция проверяет, есть ли у пользователя указывающее устройство (например, мышь), и, если есть, насколько точно работает основное указывающее устройство.

Примечание: Чтобы проверить точность любого указывающего устройства, используйте вместо этого any-pointer.

Синтаксис

Для медиафункции pointer задаётся ключевое слово из списка ниже.

none: Основной механизм ввода не включает указывающее устройство.
coarse: Основной механизм ввода включает указывающее устройство с низкой точностью, например палец на сенсорном экране.
fine: Основной механизм ввода включает точное указывающее устройство, например мышь.

Примеры

В этом примере для пользователей с точным основным указывающим устройством создаётся небольшой флажок, а для пользователей с основным указывающим устройством с низкой точностью — большой.

HTML

<input id="test" type="checkbox" /> <label for="test">Look at me!</label>

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;
  }
}

Результат

Спецификации

Спецификация
Медиа-запросы уровня 4 # pointer

Совместимость с браузерами

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`pointer`	41	12	64	28	9	50	64	28	9	5.0	41	9

См. также

Медиафункция any-pointer

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/pointer