Safari自定义样式表局限性分析：本地资源引用问题

本文探讨Safari浏览器自定义样式表在不同网页环境下表现差异的原因。 笔者尝试使用一段简单的CSS代码修改网页背景：

body {
    background-image: url("/Users/luxury/Desktop/wallhaven-o5762l.png") !important;
}

测试结果显示：该样式表在本地文件（file协议）加载的网页上生效，但在通过http协议加载的网页（例如百度）上失效。

造成此现象的原因在于资源访问路径和协议的差异。本地文件使用file协议，可以直接访问本地文件系统；而http协议加载的网页则受限于服务器资源。 尝试在http协议网页上使用本地文件路径(/Users/luxury/Desktop/wallhaven-o5762l.png)作为背景图片，浏览器无法访问该路径，导致图片加载失败（404错误），这可以在浏览器开发者工具的网络面板中验证。

CDP浏览器大师

CDP浏览器大师：通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务，解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。

下载

在实际网页开发中，不建议使用file协议访问项目，更不应直接引用本地文件路径作为资源地址。因为部署到服务器后，浏览器会将相对路径解析为服务器根目录下的路径，而服务器上通常不存在这些本地文件。

Safari的自定义样式表功能可能对本地文件引用有特殊处理，允许在特定情况下访问本地资源。 建议尝试修改CSS代码，例如：

body {
    background: #ffbebe url("/Users/luxury/Desktop/wallhaven-o5762l.png") !important;
}

这可以帮助判断问题是否与图片加载方式有关。 总而言之，自定义样式表中的资源路径必须与网页加载环境相匹配，才能保证样式的正确应用。 使用绝对URL或服务器可访问的相对路径是最佳实践。