:active和:hover在真实触摸设备上不可靠，因:active持续时间极短（ios约50ms）、:hover可能残留或不触发，伪类本身不匹配触控节奏；需用js通过data-pressing属性控制反馈，并结合css变量与color-mix()实现自适应、可测、可靠的交互状态。
为什么:active和:hover在真实设备上不可靠
触摸设备上:active持续时间极短（iOS约50ms），:hover则可能残留或根本不触发——尤其在Safari中，长按后移开手指，按钮仍保持悬停态。这不是CSS写得不够多的问题，而是伪类本身不匹配触控交互节奏。
常见错误是堆砌:active { transform: scale(0.95); }再加transition，结果用户根本感知不到反馈，或者在安卓WebView里完全失效。
- 真机测试必须覆盖：iOS Safari、Chrome on Android、微信内置浏览器
- 禁用
:hover不是妥协，而是必要选择；保留:focus-visible配合:active更符合可访问性逻辑 - 所有交互反馈应由JS控制生命周期：
mousedown/touchstart加类，mouseup/touchend移除
用data-属性驱动CSS变量实现按压反馈
直接操作style.setProperty太重，且无法批量响应；用data-pressing这类布尔属性+CSS变量才是轻量可控的方案。
JS只需：
element.addEventListener('touchstart', () => element.setAttribute('data-pressing', 'true'));
element.addEventListener('touchend', () => element.removeAttribute('data-pressing'));
CSS里这样映射：
[data-pressing="true"] {
--interaction-scale: 0.95;
--interaction-opacity: 0.8;
}
button {
transform: scale(var(--interaction-scale, 1));
opacity: var(--interaction-opacity, 1);
transition: transform 0.1s, opacity 0.1s;
}
-
data-pressing="true"必须带引号，否则Safari解析失败 - 变量默认值写在
var()里（如var(--interaction-scale, 1)），避免未设置时样式崩塌 - 不要用
pointer-events: none禁用按钮——它会切断touchstart事件，改用opacity: 0.6; cursor: not-allowed; tabindex="-1"
getComputedStyle读不到CSS变量原始声明，但能读到计算结果
你想判断当前是否处于按压态？别试getComputedStyle(el).getPropertyValue('--interaction-scale')——它返回的是"0.95"或"1"这种最终值，不是var(--interaction-scale)字符串，更没法区分是JS设的还是CSS默认的。
真正可靠的判断方式只有两种：
- 查
el.hasAttribute('data-pressing')（推荐，语义清晰） - 查
el.matches('[data-pressing="true"]')（兼容性更好）
如果非要读变量值做逻辑分支，记得加fallback：
const scale = getComputedStyle(el).getPropertyValue('--interaction-scale') || '1';
注意：getComputedStyle永远不返回var()字符串，只返回已计算的RGB、数值或空字符串。
暗色模式下交互反馈颜色怎么不翻车
很多人把--press-color直接设成#000，结果在暗色模式里按下去变成“更黑”，毫无反馈感。问题不在变量没切换，而在颜色本身缺乏上下文感知。
正确做法是用hsl()或color-mix()动态生成对比色：
:root {
--bg: #fff;
--text: #333;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--text: #f0f0f0;
}
}
button[data-pressing="true"] {
--press-overlay: color-mix(in srgb, var(--text) 20%, transparent);
background-color: color-mix(in srgb, var(--bg) 80%, var(--text) 20%);
}
- 别硬编码
#000或#fff，所有交互色必须基于--bg和--text动态计算 -
color-mix()在现代浏览器支持良好，Fallback可用hsl()手动调饱和度 - 暗色模式媒体查询里不要重复写
:root，否则旧版Safari解析失败
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
