CODEWITHSUNDEEP
asp.net.netcsslayout
devmode
devmode

Reputation: 3567

CSS and lack of constants/variables issue?

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.

any help!

Upvotes: 2

Views: 483

Answers (8)

Owen
Owen

Reputation: 7098

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.

Upvotes: 0

Ian Oxley
Ian Oxley

Reputation: 11056

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.

Upvotes: 0

moonshadow
moonshadow

Reputation: 89085

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.

Upvotes: 2

Declan Shanaghy
Declan Shanaghy

Reputation: 2335

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.

Upvotes: 0

Bobby Jack
Bobby Jack

Reputation: 16018

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

Upvotes: 0

Mark
Mark

Reputation: 14930

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

Upvotes: 3

mannu
mannu

Reputation: 793

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

Upvotes: 1

devmode
devmode

Reputation: 3567

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.

Upvotes: 0

Related Questions