Click here to Skip to main content
15,867,921 members
Articles / Web Development / CSS

Prevent Browser Caching of CSS and JavaScript Files

Rate me:
Please Sign up or sign in to vote.
4.79/5 (7 votes)
11 Feb 2014CPOL1 min read 29.4K   2   2
How to prevent browser caching of CSS and JavaScript files

A modern browser will attempt to cache content as best as it can, to make for a better end-user experience. This works well, but we may run into issues when we deploy a set of different files to the server, yet the client browser insists on serving up the old ones out of its cache.

So here's a tip on how to force the client browser to reload newly deployed files. You can use this with any kind of content file served over an http connection, be it CSS-files, JavaScript files, you name it.

The trick is to add an updated querystring value to the content URL. For example, instead of:

HTML
< link media='screen and (max-width: 2560px)' href="~/Content/Site.css" rel="stylesheet" />

... we go ...

HTML
< link media='screen and (max-width: 2560px)' 
href="~/Content/Site.css?v=1.0.4034.343343" rel="stylesheet" />

... instead. With each deployment, the 'v' value changes, which will force the client into retrieving a new version of the file on the server.

I'm myself adding the assembly version into the URL. I'm specifically doing this, which works with the ASP.NET MVC framework:

HTML
@{
       string versionId = System.Reflection.Assembly.GetAssembly
       (typeof(timeRegistrering.Web.Controllers.HomeController)).GetName().Version.ToString();
   }

   < link media='screen and (max-width: 2500px)' href="~/Content/Site.css?v=@{@versionId}"
     rel="stylesheet" />

The above will render as follows into the browser:

HTML
< link media='screen and (max-width: 2500px)'
  href="http://www.codeproject.com/Content/Site.css?v=1.0.4996.19123"
  rel="stylesheet" />

As the assembly version changes with every build or publish, the URL will change accordingly - and the content will be retrieved 'fresh' from the server, as now the client can no longer find the old version with a different version number.

In order to make your assembly version number auto-increment, you'll want to change the following lines in your 'assemblyInfo.cs' file (as found in the 'Properties' folder in your project):

C#
// You can specify all the values or you can default the Build and Revision Numbers 
// by using the '*' as shown below:
// [assembly: AssemblyVersion("1.0.*")]
[assembly: AssemblyVersion("1.0.0.1")]
[assembly: AssemblyFileVersion("1.0.0.1")]

Should be changed to:

C#
// You can specify all the values or you can default the Revision and Build Numbers 
// by using the '*' as shown below:
[assembly: AssemblyVersion("1.0.*")]
[assembly: AssemblyFileVersion("1.0.*")]

The asterix '*' sign will be replaced with the assembly number automatically, to increment on each build/publish.

HTH.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Denmark Denmark
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralThanks! Pin
Vicent O.29-Jul-15 22:01
Vicent O.29-Jul-15 22:01 
QuestionPrevent browser caching of css and javascript files Pin
Member 1136930512-Jan-15 17:45
Member 1136930512-Jan-15 17:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.