Click here to Skip to main content
13,350,708 members (56,636 online)
Click here to Skip to main content
Add your own
alternative version


4 bookmarked
Posted 17 Jul 2013

CSS File Caching Problem in Browser - Problem and Solution

, 17 Jul 2013
Rate this:
Please Sign up or sign in to vote.
Dynamic version number in query string of file reference in link tag for CSS


Many times, we faced "CSS is not applied in latest version at client's or user's browser" problem. As a solution (as many developers are aware), just append the version number with query string in CSS file reference mentioned in link tag. I had the same problem and I applied it. Now the next problem is, every time I have to remember to change in version number in case of any change in CSS. Why remember it if we can add dynamic version value in query string.

Using the Code

To add version number dynamically in query string, I tried this way as we do normally.

<link href="/styles/default.css?v=<%=AppVerNum %>" rel="stylesheet" type="text/css" />

Check the above link tag where AppVerNum is the server side variable. To assign value of this variable, we can write any server side code, so no need to change version number every time. Is your problem resolved? Yes, but partially and big NO after that because this time again you have changed the query string value, but really it will write AppVerNum value at client side? Check your browser source code how this link tag would be rendered. It will look like below:

<link href="/styles/default.css?v=&lt;%=AppVerNum %>" rel="stylesheet" type="text/css" />

Your query string value is now &lt;%=AppVerNum, so it will render the latest CSS in to browser, but problem will be there again if change would be there in css. So how to get the AppVerNum value in link tag. Check the below code:

<link href="/styles/default.css?v=<%="" + AppVerNum %>" rel="stylesheet" type="text/css" />

Now check link tag in browser source code. Your problem is resolved.

<link href="/styles/default.css?v=121" rel="stylesheet" type="text/css" />
Here 121 is the dynamic value generated for AppVerNum from server side code. Remember that the value of this variable should not be dynamic on every request, it should single per release.

Points of Interest

We assume many times, it will and should work. But sometimes, it is different than what we thought. This is the example of it.


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


About the Author

Mehul M Thakkar
Technical Lead
India India
Mehul Thakkar is having 8 yrs of experience in IT industry. He is having good command over Ms .Net and Ms Sql Server

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
HaBiX19-Jul-13 7:36
memberHaBiX19-Jul-13 7:36 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.180111.1 | Last Updated 18 Jul 2013
Article Copyright 2013 by Mehul M Thakkar
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid