Safari的HTML5兼容性需运行时检测而非UA判断：用'in'操作符、canPlayType等原生方法检测特性；注意行为差异如IntersectionObserver rootMargin百分比、fetch cookie策略、date输入校验缺失；dialog等仍需polyfill。
Safari 是苹果电脑默认浏览器，其 HTML5 兼容度整体很高，但不是所有 HTML5 特性都开箱即用——尤其在旧 macOS 版本或未更新 Safari 的设备上，部分新 API、CSS 属性或媒体行为会缺失或表现异常。
如何准确判断当前 Safari 是否支持某项 HTML5 特性
靠查“Safari 支持列表”容易过时，真实项目里必须运行时检测。UA 判断（比如 navigator.userAgent.includes('Safari')）完全不可靠，同一 Safari 版本在 macOS 和 iOS 上对 video 的 autoplay 策略都不同。
- 使用原生检测逻辑最稳妥：
if ('geolocation' in navigator) { /* 可用 */ } if (document.createElement('canvas').getContext) { /* Canvas OK */ } const vid = document.createElement('video'); if (vid.canPlayType('video/mp4')) { /* MP4 解码支持 */ } - 不要依赖全局变量是否存在来推断功能，例如
typeof MediaRecorder !== 'undefined'在 Safari 16.4+ 才返回true，之前版本即使有实验性开关也默认禁用 - 对于 IndexedDB，需注意 Safari 在无痕模式下会抛出
QuotaExceededError，而非静默失败
Safari 常见 HTML5 兼容陷阱与绕行方案
这些不是“不支持”，而是行为差异导致的线上问题：
-
IntersectionObserver在 Safari 12.1+ 才支持rootMargin百分比值（如'0% 0% -20%'），旧版只认像素值 -
fetch()默认不带 cookie，即使设置了credentials: 'include'，Safari 还要求服务端响应头包含SameSite=None; Secure，否则静默忽略 -
input[type="date"]在 macOS Safari 渲染为下拉选择器，但不支持min/max的格式校验（如2025-01-01格式合法，但用户选 2025/13/01 不报错） -
flexbox的gap属性在 Safari 14.1+ 才支持；此前必须用margin模拟，且要注意:first-child/:last-child的规避写法
哪些 HTML5 特性在 Safari 上仍需 polyfill 或降级处理
即使最新 Safari（截至 2026 年 1 月发布的 Safari 19.x），以下特性仍不能直接使用：
HTML5微信网页调用监控直播软件实现了微信远程监控的功能。本代码实现了HTML5方式调用监控摄像头的实时直播画面，支持微信网页直接调用，PC电脑、安卓手机、苹果手机。特性一：支持市面上95%以上的摄像头直接接入。网络摄像机需支持标准协议ONVIF（所有的主流摄像机均已支持），模拟摄像机经过网关设备转码后100%支持;特性二：在PC电脑网页浏览情况下FLASH优先，在安卓(android),IPh
立即学习“前端免费学习笔记（深入）”；
-
dialog元素：Safari 完全不支持，必须用div[role="dialog"]+ 手动管理焦点和 backdrop -
popoverAPI：仅 Safari 技术预览版启用，生产环境请勿启用 -
CSS :has()：虽已支持，但嵌套层级超过 2 层（如section:has(> div:has(> p))）在 Safari 18.0 中会失效，建议拆成 JS 判断 -
ResizeObserver对 SVG 元素监听不稳定，推荐改用svg.getBBox()+requestAnimationFrame轮询（仅当必要时）
苹果电脑的 HTML5 兼容性，本质是 Safari 引擎（WebKit）的演进节奏问题。它不慢，但更保守——很多特性要等标准进入 CR 阶段、并经过至少两个 Safari 技术预览周期才落地。真正麻烦的从来不是“有没有”，而是“有没有但半残”：比如 WebGL2 支持了，但某些扩展（OES_texture_float_linear）在 M1/M2 Mac 上默认关闭；比如 Web Audio API 支持了，但 AudioWorklet 的模块加载路径解析在 Safari 17.5 之前不支持 import.meta.url。这些细节，不跑真机测不出来。
