Mikes Notes
I must prevent the browser from caching the HTML page and CSS file while writing and testing. Using headers is one way to avoid a web page's caching.
Preventing CSS caching requires a different technique
Options
- Using HTML
- Server
- .htaccess
- CSS
HTML Code
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
- Stackoverflow
Notes
According to the tests described in the Stackoverflow post below, this works with these browsers.
- Chrome 28
- Firefox 23
- IE8
- Safari 5.1.7
- Opera 12.15
.htaccess Code 1
".htaccess files allow web publishers to use commands normally only found in configuration files. They affect the content of the directory they’re in and their subdirectories. Talk to your server administrator to find out if they’re enabled.
.### activate mod_expires
ExpiresActive On
### Expire .gif's 1 month from when they're accessed
ExpiresByType image/gif A2592000
### Expire everything else 1 day from when it's last modified
### (this uses the Alternative syntax)
ExpiresDefault "modification plus 1 day"
### Apply a Cache-Control header to index.html
<Files index.html>
Header append Cache-Control "public, must-revalidate"
</Files>
Note that mod_expires automatically calculates and inserts a Cache-Control:max-age header as appropriate." - Apache Module mod_headers
.htaccess Code 2
<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>
- Stackoverflow
CSS
"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." - Stackoverflow
Code
<link rel="stylesheet" type="text/css" href="http://mysite/style.css?id=1234">
No comments:
Post a Comment