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, 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

great_llama · Accepted Answer · 2009-05-13 16:01:05Z

26

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

answered May 13, 2009 at 16:01

great_llama

11.7k4 gold badges36 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

great_llama Over a year ago

Usually 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 Over a year ago

Don’t confuse relative/absolute URI paths with absolute/relative URIs. Because /css/style.css is an absolute URI path but a relative URI. And http://cdn.example.com/css/style.css (beginning with http://) is an absolute URI but not an URI path (it just contains a URI path).

travis-146 Over a year ago

Of course, this only works if you host the css file on the exact same domain as the images, which is often not the case

great_llama Over a year ago

Why bother hosting stylesheet-related images on a CDN and not the stylesheet itself?

gnud · Accepted Answer · 2009-05-13 16:00:01Z

6

Just use domain-relative url's?

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

Then the browser will look under the current domain.

answered May 13, 2009 at 16:00

gnud

78.9k5 gold badges68 silver badges79 bronze badges

Comments

Robbie · Accepted Answer · 2009-05-13 16:10:01Z

2

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.

answered May 13, 2009 at 16:10

Robbie

2091 gold badge3 silver badges10 bronze badges

Comments

Christian Studer · Accepted Answer · 2009-05-14 13:00:17Z

2

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.

answered May 14, 2009 at 13:00

Christian Studer

25.6k6 gold badges51 silver badges71 bronze badges

Comments

Greg B · Accepted Answer · 2009-05-13 16:00:40Z

1

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.

answered May 13, 2009 at 16:00

Greg B

14.9k18 gold badges92 silver badges151 bronze badges

4 Comments

davr Over a year ago

Doesn'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 Over a year ago

True, 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 Over a year ago

How would this work if you had some files on the CDN and others locally?

Greg B Over a year ago

It wouldn't. This is just one example that worked in my situation

newyuppie · Accepted Answer · 2011-05-12 11:45:23Z

1

Searching for an answer to this too, I saw a simple one: create your css file with duplicate classes, one for scenario 1 (images load from same domain) and another for scenario 2 (images load from CDN).

e.g.

.container {background-image:url(my/site/image.png;)}
.container-CDN {background-image:url(http://my.site.cdn.com/image.png;)}

Then on your index.php introduce PHP to call the correct class

e.g.

<body class="container<?PHP if ($whatever) {echo "-CDN";} ?>">

answered May 12, 2011 at 11:45

newyuppie

1,0641 gold badge8 silver badges13 bronze badges

1 Comment

TWilly Over a year ago

i like this the best, thanks for the tip. using this with sass should be pretty easy.

NinethSense · Accepted Answer · 2009-05-13 16:01:08Z

0

If the server is same, you can use relative paths. Like /http/blah/test/images/button.png or ../images/button.png

answered May 13, 2009 at 16:01

NinethSense

9,0982 gold badges25 silver badges24 bronze badges

Comments

Joe Frambach · Accepted Answer · 2009-05-13 16:05:52Z

0

When using relative URLs, you can force a "base" url. In the <head> tag, use <base href="http://cdn-dev.example.com">. Then, every relative link "/style.css" will point to "http://cdn-dev.example.com/style.css"

For reference: http://www.w3schools.com/TAGS/tag_base.asp

answered May 13, 2009 at 16:05

Joe Frambach

1 Comment

Gumbo Over a year ago

But this has also disadvantages. For example, URI references with just a fragment identifier foo will then be resolved to /#foo and not just #foo in the same document.

David Thomas · Accepted Answer · 2009-05-13 16:12:48Z

0

Well...the solution I came up with was...sorta...hackish, ugly and dumb. But, hell, it worked:

<?php
    if ($_SERVER['SERVER_NAME'] == "www.domain.tld") {

        $incs_path  = "/usr/local/psa/home/vhosts/domain.tld/non-web-root-folder/private-files";

    }
    else {
        $incs_path  = "incs";
    }

require_once "$incs_path/$file-to-be-called.inc";

?>

This is, as noted, hacky and ugly and could be done far more prettily. But it does, at least, allow you to define specific locations for specific groups of files depending on the host.

answered May 13, 2009 at 16:12

David Thomas

254k53 gold badges382 silver badges421 bronze badges

1 Comment

David Thomas Over a year ago

and 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).

Collectives™ on Stack Overflow

Dynamic URLs in CSS/JS

9 Answers 9

4 Comments

Comments

Comments

Comments

4 Comments

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

4 Comments

Comments

Comments

Comments

4 Comments

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related