Question

I am about to do upgrades to webpages and css-files in our production environment. I would like to prevent css caching in the web browser, since this would otherwise disrupt the design if the new html is used together with the old css. I have made changes to three css-files in total:

• Main css-file (referenced in the head section of the page with tag)
• css-file A (referenced inside the main css-file using @import “css-fileA.css” syntax)
• css-file B (referenced inside the main css-file using @import “css-fileB.css” syntax)

To prevent browser caching I have added a querystring to my main css-file like:
…link href=”main.css?rev=20121024″…

I now wonder if the use of a querystring on main.css helps prevent caching of the css-files A and B that are referenced inside main.css with @import statements? Or do I need to also apply querystrings for them like @import “css-fileA.css?rev=20121024” ?

Any help is greatly appreciated.

Answer 1

I expect each file to be treated independently. Why would it make a difference whether css-fileA.css was loaded directly or via @import? It’s still the same URL and the cache should be used the same way.