现代浏览器对date、color、range类型支持非二值化：date强制iso格式且min/max在旧safari失效；color值恒为小写7位十六进制且无透明度；range值为字符串需手动转换，step属性需数字字符串。
input type="date"、type="color" 和 type="range" 在现代浏览器中基本可用，但支持程度和行为差异远比文档写的复杂——不是“支持/不支持”二值判断，而是“支持哪部分、在哪种上下文、有什么隐藏限制”。
date 类型：value 格式强制 ISO 8601，但 UI 和事件行为割裂
你填 <input type="date" value="2023-12-25"> 没问题；但填 value="25/12/2023" 或 "2023-12-25T00:00"，input.value 会直接变为空字符串。这是规范强制的，不是 bug。
- min/max 属性在 iOS Safari 14.5 之前完全失效，且年份滚动异常（比如选 2025 年可能跳到 2005）
- Safari 直到 16.4 才有原生日历 UI；Firefox 至今不提供任何日历控件，只做基础格式校验（
:valid伪类仍可用） - IE 全系列降级为纯文本框，且不触发
change事件——别指望靠它做实时校验 - 移动端虽然显示原生键盘（数字+分隔符），但用户仍可手动粘贴非法格式，必须用 JS 补充校验
color 类型：UI 一致但 value 始终是小写 7 位十六进制
input.type = "color" 在 Chrome、Edge、Safari（16.4+）、Firefox 中都渲染为色块+拾色器，没有 fallback 降级风险。但 value 值永远是 "#rrggbb" 格式，哪怕用户选的是 "#abc" 或 rgb(255,0,0)，JS 读出来都是 "#ff0000"。
- 不支持透明度（alpha），
rgba()或#rrggbbaa会被截断或忽略 - 无法通过
min/max限定色域，也没有 step 控制精度 - 监听
input事件比change更稳妥，因为用户拖拽调色盘时会连续触发
range 类型：滑块行为稳定，但数值类型和步进逻辑易踩坑
input.type = "range" 是三者中兼容性最好、行为最可控的，Chrome、Firefox、Safari、Edge 全支持 UI 和事件。但它的值始终是字符串，不是数字。
- 必须用
parseInt(input.value)或parseFloat(input.value)转换，否则参与计算会出错（比如"50" + 1 === "501"） -
min、max、step必须写成数字字符串（如min="0"），写成min=0（无引号）或min="0.0"可能导致整个控件退化为文本框 -
step="any"允许任意精度输入，但 Safari 对它支持不稳定，建议显式写step="0.01"等固定值 - 移动端滑动响应快，但没有键盘方向键支持——别指望用户能用键盘微调
检测与降级不能只靠 feature detection
仅用 document.createElement('input').type = 'date' 判断是否支持，会漏掉 iOS Safari 14.5 这类“支持 type 但不支持 min/max”的中间状态。真正要保底，得组合判断：
- 先检查
input.type是否仍为"date" - 再动态设置
input.min = "2000-01-01"，然后读回input.min，看是否被正确解析（iOS 14.4 会返回空字符串） - 对
range和color，更关键的是验证事件是否按预期触发，而不是只看渲染
最麻烦的点不在“有没有”，而在“有没有但不可靠”——比如 Safari 的 date 输入框能点开日历，但 change 事件在某些场景下根本不触发，这种细节比兼容性列表难 debug 多了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
