Safari自定义样式表：本地生效，远程失效？
本文分析Safari浏览器自定义样式表的一个常见问题：为何在本地网页生效的自定义CSS，在访问例如百度等远程网站时却失效？
一个前端开发者在Safari偏好设置中使用自定义样式表，尝试以下CSS代码：
body {
background-image: url("/Users/luxury/Desktop/wallhaven-o5762l.png") !important;
}
测试结果显示：本地网页(file协议)下样式生效，而百度网页(http协议)下样式失效。
问题的关键在于协议差异和资源路径。本地网页使用file协议，可以直接访问本地文件系统；而百度网页使用http协议，访问的是远程服务器。自定义样式表中url("/Users/luxury/Desktop/wallhaven-o5762l.png")尝试引用本地图片，这在远程网页环境下显然无法访问。
浏览器会根据当前网页的协议解析URL。在百度页面，浏览器会尝试访问http://www.baidu.com/Users/luxury/Desktop/wallhaven-o5762l.png，此路径不存在，导致图片加载失败，从而样式失效。虽然CSS规则本身可能被应用，但由于图片资源404，背景图片无法显示。开发者工具的网络面板可以验证这一点。
此外，Safari的自定义样式表（user style sheet）机制可能对本地文件路径的处理有所限制。 为进一步验证，建议尝试修改CSS代码，例如：
body {
background: #ffbebe url("/Users/luxury/Desktop/wallhaven-o5762l.png") !important;
}
这将设置一个默认背景色，即使图片加载失败，也能观察到样式是否应用。
总之，在自定义样式表中，避免使用file协议和本地绝对路径引用资源，特别是部署到服务器的项目。 正确的做法是使用相对路径或完整的网络路径引用资源。
