Prevent Browser Caching of CSS and JavaScript Files

Can we solve this? Is there some way to prevent CSS caching? This post is about Preventing Css and Js Files being Cached on client Machine, we often change our css & js files to enhance our websites, if you send that same link to your client, and the same thing happens to them. There is a good chance there will be (at the very least) some confusion. due to browser cache, new changes will not reflect on client system to void this situations you can use the following method, however this method is not preferred in production environment due to performance issues.

On a larger scale, lets say you roll out a fairly major layout change on a high-traffic website. A huge number of people might see a borked layout the next time they visit, because of CSS and Js caching.

#
Timestamping Your CSS

There is a little trick that I believe comes from the land of JavaScript programmers. To prevent the caching of their scripts, they add a timestamp to the end of the src attribute.

Prevent Your CSS Files From Being Cached

<link rel=”stylesheet” href=”http://www.webtechsource.com/style.css?<?php echo time(); ?>” />
// output
<link rel=”stylesheet” href=”http://www.webtechsource.com/style.css?1390846203″ />

Prevent Your Js Files From Being Cached

<script type=”text/javascript” href=”http://www.webtechsource.com/jquery.js?<?php echo time(); ?>”></script>
// output
<script type=”text/javascript” href=”http://www.webtechsource.com/jquery.js?1390846328″></script>

 

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face – we are here to solve your problems.

I, Dayanand Saini,the founder and chief editor of www.webtechsource.com,have been working as a software engineer from last 4+ years. It's my hobby to learn new things and implement on live environment.

Leave a Reply

Your email address will not be published. Required fields are marked *

− 2 = 7

%d bloggers like this: