Menu
I am learning to develop xhtml, css web pages. Often I am doing changes in CSS but it do not reflect on page because of browser cacheing and if I manually clear cahceing it shows latest code effects. Is there a thing I can put in code to make browker not to cache stuff ? Any advice please
396
Alternatively, you can right click on a page in Chrome, then click Inspect. Click on the Network tab, then check the box to Disable cache. You can then close out of Developer Tools. Bear in mind that this "Disable cache" will affect every single web page you browse.
Timestamping Your CSSTo prevent the caching of their scripts, they add a timestamp to the end of the src attribute.
Unless you've messed with your server, yes it's cached. All the browsers are supposed to handle it the same. Some people (like me) might have their browsers configured so that it doesn't cache any files though. Closing the browser doesn't invalidate the file in the cache.
If you update your stylesheet, you should use a cachebreaker in the URL to the stylesheet, typically by appending a version number to the . CSS file extension, as in http://www.example.com/my.css?2. So I'm trying to understand: if I have the stylesheet as /test. css do I keep that file named that, but only but the "?#
You can append a random query parameter to the stylesheet url (for example via javascript or server side code). It will not change the css file that is being loaded, but it will prevent caching, because the browser detects a different url and will not load the cached stylesheet.
<link rel="stylesheet" type="text/css" href="http://mysite/style.css?id=1234">
You can create class with GetVersion method which will return your application version (or for example build number or build date).
For asp.net application in markup you can then specify something like this:
<script src="Scripts/some.js?version=<%= Common.GetVersion%>" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="~/styles/Style.css?version=<%= Common.GetVersion%>" />
This will force browser to reload files because part of URL to static files will be changed every build (or at least every version).
25
With no catching: Put changeable strings at the end of css path, as bellow:
<link rel="stylesheet" type="text/css" href="style.css?2016-12-3:10 13 30"/>
Refresh when version changes:
<link rel="stylesheet" type="text/css" href="style.css?v=1.1.0"/>
If you're using Chrome as your development browser, there are 2 options:
1) When you hold the reload page button down for a second, a menu will appear and offer the possibility to do a hard page reload.
2) In the Inspector settings, you can force the browser to never cache files.
I think it's easier, faster and less trouble to handle this issue by disabling caching on the browser than in the server configuration.
3
This can be done through a .htaccess file. Place this code in a file named .htaccess at the root of your website:
<filesMatch "\.(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
