Search code examples
phpjavascriptcssdynamic-css

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

Solution

  • 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