Dynamic URLs in CSS/JS

Question

I\'m splitting up one of my larger apps and introducing a \'cdn\' url to house common objects like CSS, javascript, and images to avoid duplication. What I need to do, though, i

Answer 1

Just use domain-relative url's?

.cool-button { background-image: url('/images/button.png'); }

Then the browser will look under the current domain.

Answer 2

I've literally just been working on the same thing today and here's what I came up with.

Stick this in your .htaccess file in the root of your site. This obviously relies on Apache and Mod_rewrite.

RewriteEngine on
RewriteBase /

# Redirect content to the CDN

RewriteCond %{HTTP_HOST} !^cdn\.server\.com$    [NC]
RewriteRule .*\.(jpg|gif|png|flv|css|js|swf)$   http://cdn.server.com/$0    [R=301,L]

This will send requests for the file types in the brackets to your cdn and keep requests for other types on your primary server.

Answer 3

You can also have a build process and use templates to generate environment specific files

e.g. in a file called yoursite.template.css

.cool-button { background-image: url('@@URL@@/images/button.png'); }

create the yoursite.css file than replace @@URL@@ with the domain you want.