Dynamic URLs in CSS/JS
Solution 1
Use relative paths, not absolute paths. When inside a CSS file, the path is relative to the CSS file and not the HTML page.
If your CSS file is here
http://cdn.example.com/css/style.css
And your class is
.cool-button { background-image: url('../images/button.png'); }
Then the browser will attempt to load the image from
http://cdn.example.com/images/button.png
Solution 2
Just use domain-relative url's?
.cool-button { background-image: url('/images/button.png'); }
Then the browser will look under the current domain.
Solution 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.
Solution 4
Depending on your server configuration, you can also append the .php-extension to your filenames and have them treated as PHP scripts too:
I.E.: style.css.php would contain:
.cool-button { background-image url(<?php echo $bgImgUrl;?>); }
This also works for JavaScript-files.
Solution 5
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.
dragonmantank
Love to program in PHP, starting to look into Python and C# as well.
Updated on July 02, 2022Comments
-
dragonmantank almost 2 years
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, is have separate URLs for our dev environments, so I may have:
http://cdn-dev.example.com http://cdn-qua.example.com http://cdn.example.com
depending on what environment we're working in. I can get this to work for things that are generated by our PHP code, but I'm at a loss for the .css and .js files that will be called. For example, how do I make something like:
.cool-button { background-image: url('http://cdn.example.com/images/button.png'); }
switch between the different domains?
What's the best way to deal with that?
[EDIT]
Just so everyone is clear, the CDN address is a different domain that the site. So, the dev site might be http://www-dev.domain.com which would use http://cdn-dev.domain.com
-
Khai Nguyen about 15 yearsUsually I'll put the images folder under a CSS theme folder, though, as it allows me to use image names that aren't specific to a particular stylesheet document. I would be able to have a button.png under /this_theme/ and the same file name under /that_theme/ and the class definition could remain the same.
-
Gumbo about 15 yearsDon’t confuse relative/absolute URI paths with absolute/relative URIs. Because
/css/style.css
is an absolute URI path but a relative URI. Andhttp://cdn.example.com/css/style.css
(beginning withhttp://
) is an absolute URI but not an URI path (it just contains a URI path). -
Sikshya Maharjan about 15 yearsand domain-relative urls would, probably, be far prettier and more useful. My suggestion, I guess, is more useful for linking to otherwise private information (I tend to use this kinda thing for db passwords and such for web apps).
-
davr about 15 yearsDoesn't that defeat the purpose of the CDN? It means the client has to still contact your server for every request to the CDN, versus hitting the CDN directly.
-
Greg B about 15 yearsTrue, but the content will not ne served from your server. So instead of a 5Mb FLV being delivered from your server. It will be redirected to the CDN where the actual download will happen. This configuration allows you to easily swap from a single server development environment to your live environment without any changes. I'm not advocating this as the way to do it. It works for me and the miniscule roundtrip for the 301 is worth it.
-
dragonmantank about 15 yearsHow would this work if you had some files on the CDN and others locally?
-
Greg B about 15 yearsIt wouldn't. This is just one example that worked in my situation
-
travis-146 about 15 yearsOf course, this only works if you host the css file on the exact same domain as the images, which is often not the case
-
Khai Nguyen about 15 yearsWhy bother hosting stylesheet-related images on a CDN and not the stylesheet itself?
-
TWilly almost 10 yearsi like this the best, thanks for the tip. using this with sass should be pretty easy.