在 CSS 中处理 CDN 的良好实践

Question

我正在我的网站上设置 CDN，但我有一个问题找不到任何答案。

例如，我有 CSS 精灵（在我的 CSS 文件中）

.social-icon-email_icon{ background: url('/img/sprite_social.png') no-repeat top left; background-position: 0 0; width: 32px; height: 32px; } 

问题是，我希望 CDN 提供 sprite。因此，我更改了网址。

我的问题是我想保持它目前在本地，但在部署时让它自动切换到 CDN url。

那么，最佳做法是什么？

• 两个文件，我在生产服务器上部署一个，另一个用于开发。似乎有问题；当我想改变某些东西时，我必须做两次。
• 一个动态文件：不确定如何在 CSS 中实际执行此操作
• 其他？

谢谢

Answer 1

处理这样的事情的一种方法，我自己做了很长时间。

我这样提供我的 css 文件：

<link rel="stylesheet" type="text/css" href="css.php?ver=2">

然后，在服务器端代码中，我根据作为参数传递的版本进行了几次替换，一些浏览器嗅探是否在 url 中嵌入数据，例如 url(data:image/png;base64,...) 等等开。

根据您的需要，您可以像这样标记您的 css 值

背景：url('/cdn_img/sprite_social.png')

然后很容易进行替换并将“/cdn_”更改为“cdn.domain.com”或您需要的任何内容。

我也使用这个解决方案将许多 css 合并为一个，在那里我将大量回调保存到服务器，否则会得到许多链接标签。

附：使用这个，不要忘记将ContentType 设置为text/css