在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提供的精灵。因此，我改变了网址。

我的问题是我想保留它，因为它当前在本地，但在部署时自动切换到CDN URL。

那么，最佳做法是什么？

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

由于

Answer 1

处理类似事情的一种方法是，我自己要做很长时间。

我像这样提供我的css文件：

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

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

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

  

背景：网址（ '/ cdn_img / sprite_social.png'）

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

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

P.S。使用此功能时，请不要忘记将ContentType设置为text/css