указатель

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

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

Свойство pointer CSS media feature проверяет, есть ли у пользователя устройство ввода указателя (такое как мышь) и, если есть, насколько точным является главное устройство указателя.

Примечание: Если вы хотите проверить точность любого устройства указателя, используйте 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;
  }
}

Результат

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

Спецификация
Media Queries Level 4 # pointer

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

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

См. также

Свойство any-pointer media feature

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