Good practices for handling a CDN in a CSS

Question

h'm setting up a CDN on my website, and I have a question for which I couldn't find any answer.

I've CSS sprites, for instance (in my CSS file)

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

The thing is, I would like to have the sprite served by the CDN. Thus, I changed the url.

My problem is that I want to keep it as it is currently in local, but have it automatically switched to the CDN url when deployed.

So, what is the best practice ?

• Two files, I deploy one on my production server, and I use the other for development. It seems problematic ; when I want to change something, I have to doit two times.
• One dynamic file : not sure how to do it actually in CSS
• Other ?

Thanks

Answer 1

One way to deal with a thing like that, I have myself be doing a long time.

I serve my css file like this:

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

Then, within the server side code, I do several replacements based on what version passed as argument, some browser sniffing whether to embed data in url's, like url(data:image/png;base64,...) and so on.

For your needs, you could mark your css values like this

background:url('/cdn_img/sprite_social.png')

and then it will be easy to do the replacement and change the "/cdn_" to "cdn.domain.com" or whatever you need.

I also use this solution to merge many css together into one, where I save a lot of callbacks to the server, one otherwise get with many link tags.

P.S. Using this, don't forget to set the ContentType to text/css