Dynamic URLs in CSS/JS | 易学教程

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

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

Just use domain-relative url's?

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

Then the browser will look under the current domain.

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.

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.

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.

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";} ?>">

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

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

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.

来源：https://stackoverflow.com/questions/858782/dynamic-urls-in-css-js

标签

php

javascript

css

dynamic-css