any-pointer
Медійна можливість CSS any-pointer перевіряє, чи є у користувача будь-який вказівний пристрій (подібний до миші), і якщо так, то наскільки він точний.
[!NOTE] Якщо треба перевірити точність основного вказівного пристрою, використовуйте натомість
pointer.
Синтаксис
Можливість any-pointer задається як ключове слово, обране з наведеного нижче списку.
noneНемає доступних вказівних пристроїв.
coarseЩонайменше один механізм введення включає вказівний пристрій обмеженої точності.
fineЩонайменше один механізм введення включає точний вказівний пристрій.
[!NOTE] Може давати збіг більш ніж одне значення, якщо доступні пристрої мають різні характеристики, хоча
noneдає збіг лише тоді, коли жоден з них не є вказівним пристроєм.
Приклади
Цей приклад створює невелике поле для галочки для користувачів зі щонайменше одним точним вказівним пристроєм та велике поле для галочки для користувачів зі щонайменше одним обмежено точним вказівним пристроєм. Велике поле для галочки має пріоритет, оскільки воно оголошене після малого.
HTML
<input id="test" type="checkbox" /> <label for="test">Подивися на мене!</label>
CSS
input[type="checkbox"]:checked {
background: gray;
}
@media (any-pointer: fine) {
input[type="checkbox"] {
appearance: none;
width: 15px;
height: 15px;
border: 1px solid blue;
}
}
@media (any-pointer: coarse) {
input[type="checkbox"] {
appearance: none;
width: 30px;
height: 30px;
border: 2px solid red;
}
}
Результат
Специфікації
| Специфікація |
|---|
|
Media Queries Level 4 (Media Queries 4) # any-input |
Сумісність із браузерами
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
any-pointer media feature
|
Chrome Full support 41 | Edge Full support 12 | Firefox Full support 64 | Internet Explorer No support Ні | Opera Full support 28 | Safari Full support 9 | WebView Android Full support 41 | Chrome Android Full support 41 | Firefox for Android Full support 64 | Opera Android Full support 28 | Safari on iOS Full support 9 | Samsung Internet Full support 4.0 |