CSS and lack of constants/variables issue

Question

Given a stylesheet with a fully qualified reference to an image resource on another server, is there a good way to handle promotions through different environments that require a different base URL?

background-image: url (evironmentSpecificURL/resourceName.foo);

The environmentSpecificURL will vary from environment to environment and I don't want this file to be modified as it progresses from development, qa, staging, production, etc.

I have ideas, but am interested in how others have dealt with this -- I'll post one of my ideas.

Let me underscore (based on another response) that the image resource does not exist on the same server and that is the URL that will change. So relative paths do not work in that situation.

Also, I am trying to avoid the need to modify the css where there could be multiple instances of the URL and centralize that URL to one point of configuration.

Answer 1

My idea:

Develop a handler/etc locally on the web application to pull in the image and handle the change in base URL in configuration files:

background-image: url (localHandler.ashx(aspx)/resourceName.foo);

Where the localHandler calls the destination resource and then returns the resource based on content type.

Answer 2

You could make a configurable CSS pre-processor which replaces the definitions with urls and caches the result.

Answer 3

The resources that you reference should really be at a relative level to your css file, that way its just a "..\resourceName.foo" away from working.

Of cource you could also look into build tools that auto-generate the environment specific areas of your site, so all properties such as css file, .properties files, etc... are generated dynamically via a build tool link ANT or MSBuild

Answer 4

Either be consistent across environments (I would always favour this approach) or generate the CSS dynamically.

Answer 5

Depending on your build environment there is probably a mechanism to process the resource files and replace variables with the desired values.

I use Maven for my Java developemnt and it has this functionality built in.

Answer 6

Within CSS stylesheets, the base URL is that of the stylesheet, not of the document including it. Make the URLs within the stylesheet relative and locate the stylesheet appropriately.

Answer 7

You might be able to achieve what you are after by using the <base /> tag and setting the base URL to use from which all other relative requests are resolved.

Answer 8

You could do something with our .Less CSS preprocessor to swap out variables at runtime.

That said, how are you deploying? If you used CI tools and scripted your deployments automatically then you could include a post build step to find replace this base path.