Safari 是新时代的 IE 吗？

Safari 的兼容性问题有多严重？

Safari 作为苹果设备的默认浏览器，市场份额不小，但前端开发者经常抱怨它的兼容性问题。从 CSS 特性支持到 JavaScript API 实现，Safari 的表现常常落后于 Chrome 和 Firefox。比如，直到 iOS 15.4 才支持 CSS 的 :has() 选择器，而其他主流浏览器早已实现。这种滞后性让开发者不得不编写大量兼容代码：

/* 其他浏览器 */
.container:has(.active) {
  background: #f00;
}

/* Safari 备用方案 */
.container.active-parent {
  background: #f00;
}

哪些 Web API 在 Safari 中表现异常？

Safari 对现代 Web API 的支持问题尤为突出。IndexedDB 的实现存在内存泄漏问题，WebRTC 的功能支持不完整，甚至最基本的 Web Components 支持也姗姗来迟。以下是一个典型的 IndexedDB 在 Safari 中可能崩溃的示例：

let db;
const request = indexedDB.open('testDB', 1);

request.onupgradeneeded = (event) => {
  // Safari 13 以下版本可能在此处抛出异常
  const db = event.target.result;
  db.createObjectStore('data', { keyPath: 'id' });
};

request.onsuccess = () => {
  db = request.result;
  // Safari 可能在此处出现内存泄漏
};

Safari 的渲染引擎有哪些独特行为？

WebKit 引擎在某些 CSS 属性和布局计算上有自己的一套逻辑。Flexbox 和 Grid 布局在 Safari 中的表现经常与其他浏览器不一致。例如，gap 属性在 Flex 布局中的支持就比其他浏览器晚了一年多。更令人头疼的是 Safari 对 position: sticky 的实现：

<style>
  .sticky {
    position: sticky;
    top: 0;
    /* Safari 需要添加这个前缀 */
    position: -webkit-sticky;
  }
</style>

为什么说 Safari 的调试工具不够用？

相比 Chrome DevTools，Safari 的 Web Inspector 功能有限。远程调试 iOS 设备需要 macOS 系统，而且工具响应速度慢。对于 Service Worker 和 Cache API 的调试支持也不完善。查看 CSS 网格布局时，缺乏可视化的网格覆盖图：

// 在 Safari 中调试 Service Worker 很困难
navigator.serviceWorker.register('/sw.js')
  .then(registration => {
    // Safari 的控制台日志经常丢失
    console.log('注册成功');
  });

Safari 的更新机制带来了哪些问题？

与 Chrome 的自动更新不同，Safari 更新通常与 macOS/iOS 系统更新绑定。这意味着用户可能长期使用旧版本浏览器。据统计，有超过 15% 的 iOS 用户仍在使用两年前的 Safari 版本。这种碎片化给开发者带来巨大挑战：

// 需要检测 Safari 版本来决定是否使用新特性
const isOldSafari = /Version\/[\d.]+.*Safari/.test(navigator.userAgent) && 
                    !navigator.userAgent.includes('Chrome');

if (isOldSafari) {
  // 加载 polyfill
  import('safari-polyfill');
}

苹果的封闭生态如何影响 Web 发展？

苹果对 PWA 的限制政策尤为明显。直到 2022 年，iOS 才勉强支持有限的 PWA 功能。推送通知、全屏体验等关键功能仍然缺失。Web App Manifest 的许多属性在 Safari 中被忽略：

// manifest.json
{
  "display": "standalone",  // 在 Safari 中可能无效
  "start_url": "/?standalone",
  "orientation": "portrait" // Safari 经常忽略此设置
}

开发者该如何应对 Safari 的特殊性？

虽然抱怨很多，但现实是必须支持 Safari。渐进增强和功能检测是关键策略。可以使用 Modernizr 或直接的特征检测：

// 检测特定功能支持
if (!CSS.supports('display: grid')) {
  // 加载备用样式
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'fallback.css';
  document.head.appendChild(link);
}

社区对 Safari 的态度正在改变吗？

越来越多的开发者公开批评苹果对 Web 标准的态度。WebKit 团队的响应速度有所提升，但根本问题仍未解决。一些项目开始考虑放弃对旧版 Safari 的支持：

// package.json 中 browserslist 配置
{
  "browserslist": [
    "> 1%",
    "not safari < 14",
    "not ios_saf < 14"
  ]
}

Safari 未来可能的改进方向

最近 WebKit 团队在加速实现新标准。CSS 容器查询、CSS 嵌套等现代特性已经或即将登陆 Safari。但要让开发者改变看法，苹果需要更开放的更新策略和更好的标准支持：

/* 即将支持的 CSS 嵌套 */
.parent {
  color: red;

  & .child {
    color: blue;
  }
}