hi i have a little problem
i uploaded a new version of my website.
and some users complained that they see some page i changed very very wrong.
anyway after a refresh they see it fine.
i think its because my css file got cached by them on an earlier time...
why isnt the browser downloading the css file by himself on first load?..
he should know the css file changed dosnt he?
thanks in advance
#UpTheCreek's method will work fine. But you can save some trouble by just changing the call and not changing the filename.
screen.css?v=12
This will also force a reload but will only require you to change the call.
he should know the css file changed
dosnt he?
Not necessarily. If your css files have been sent from the server with a max-age directive and/or an expiring date far in the future, browser are instructed to not make conditional requests to your resource (see http://developer.yahoo.com/blogs/ydn/posts/2007/05/high_performanc_2/) so they consider the resource in cache still valid.
In this case in order to force a new request you may need to rename the file or append a random querystring like file.css?848372034 or, even better, a version note like file.css?v=1
If you install the web developer toolbar (for Firefox or IE) you can disable cache. I use this when developing websites. It saves you having to rename your CSS every time you make a minor edit.
If you're on Apache try adding this in your root .htaccess:
<FilesMatch ".(css|jpg|gif|ico|jpeg|png|html)$">
ExpiresActive On
Header set Expires "Mon, 22 Nov 2010 06:00:00 GMT"
</FilesMatch> [L]
Include only file types you don't want cached , eg:
<FilesMatch ".(css|js)$">
If you know when you want to change files, set a future date - your site will be faster if these files are not regularly refreshed.
If you don't set an expiry date, browsers cache these files in proportion to their age.
Related
I have an index.html and a CSS file that are part of a wider project I am working on and it appears that any amendments I make to the CSS file is not reflected in the localhost server. Does anyone know why this might be?
Your browser will request the html files and won't always load the newest files because they are being pulled out of the cache. The best way to reset the cache is to do ctrl + shift + r.
I would guess this is a cache issue. Simple test:
Reload the page using ctrl+f5 on your keyboard. If the css updates, then your browser is (correctly, usually) caching the css file.
If this is the case, you can set up xampp to send a no cache header always or disable caching on your browser. Depending on your browser, you may be able to disable the cache on a specific domain, so all files served by localhost are not cached.
I just checked "PageSpeed Insights" on my website and realized that i have a problem with some files (such as image/js/css) about their expiry time.
My server is linux, i know it worked with htacces but i'm afraid that the administrator does not enable the mod_expires...
Anyway I pretty sure that there is another way to do this and to declare for a expiry time for image/script/css.
How about using mod_headers (still requires .htaccess):
<FilesMatch "\.(jpg|jpeg|gif|png|js|css)$">
Header set Cache-Control "max-age=3600"
</FilesMatch>
For example.
I've been working for a client the past couple of weeks, and I'm absolutely certain that the code I've written has been working fine cross-browser. However, as of yesterday the site has not been downloading content from my server when viewing through Firefox or Safari (to make things even weirder the site loads fine in Chrome / IE).
Update
When I view the site from a proxy, the CSS file listed below loads fine. Now this is getting weird ...
Errors?
Well, as I'm sure many of you would have done I quickly went to validate the HTML and CSS of the pages, wondering if that was causing this issue. But then I ran a test that quite frankly made any validation error unrelated: I tried loading a one-line CSS file directly in my browser.
The link to this CSS file is here
As #Ralph asked below, What is the purpose of supplying us with a CSS file?. The purpose of supplying you with the CSS file is to demonstrate how this one-line CSS file downloads fine in Chrome/IE but not in Firefox/Safari and I cannot understand why that might be.
I do not have control over the server but my client does, and is quite familiar with it. He is currently away so I'm unable to ask him if he's made changes as of 24 hours ago, but I'd like to determine this myself if possible.
Question:
Is there any server configuration that any of you know of that would cause Firefox and Safari to not download both CSS and JS files? I've emptied out the .htaccess file to be sure the error wasn't coming from there.
Notes / attempts I've made
Firefox is retrieving the file (according to firebug, which returns an OK GET Request
The header is text/css as it should be (view the CSS link above and do right click -> page Info
This is an Apache 2.2 server
In Firefox, I've tried to completely re-download the page by doing Control + Shift + R but still, no content is downloaded.
I'm happy to supply any other information as requested.
Thank you for the help.
The problem was that I was using Gzip compression and FireFox / Safari were not working because of it. Removing the compression fixed the problem.
<filesMatch "\.(js|css)$">
Header set Content-Encoding x-deflate
# Header set Content-Encoding compress
# Header set Content-Encoding x-gzip
</filesMatch>
The CSS files that I am using load some images like this:
eg: main.css:
.nav{
background-image:url("/www/images/bg.png")
}
<link href="/www/css/main.css?version=1.2" type="stylesheet" />
CSS File is loaded in the HTML as shown above.
I know there is an approach that adds a query string like "?version=1.2" to force the browser to load the css file from the web server not from cache. But my problem is that this works ok for css file, but does nothing to the embedded images.
So what can I do to make the browser download the images embedded in the css or js files when I edit the images, but the names stay the same?
I would like not to:
1. change the image name
2. disable caching
thanks
May be use chrome incognito to make browser get the images every time ?
Adding a query string to the url like ?version=2 only prevents caching when the url changes every time, for instance image.png?random=123, where the value of random is different every time the page loads. The unique url forces the browser to re-fetch the image every time since the url doesn't match the url of the cached image.
Since you're wanting to use a static URL, I would suggest setting your HTTP server settings to send a header to the browser not to cache images. Let me know if you need help with that.
Can you use .htaccess file on your hosting (with mod_expires)?
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "access plus 1 minutes"
</IfModule>
EDIT: I saw your edit. Your question is that you want to force client to refresh images when you update them on server, without disabling browser cache?
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "modification plus 1 seconds"
</IfModule>
Google's mod_pagespeed plugin for apache will do auto-versioning for you. It's really slick.
http://code.google.com/speed/page-speed/docs/module.html
It parses HTML on its way out of the webserver (works with PHP, rails, python, static HTML -- anything) and rewrites links to CSS, JS, image files so they include an id code. It serves up the files at the modified URLs with a very long cache control on them. When the files change, it automatically changes the URLs so the browser has to re-fetch them. It basically just works, without any changes to your code. It'll even minify your code on the way out too.
Stolen from this post How to force browser to reload cached CSS/JS files?
I have a system where cache max-age is set to 0 and there is problem, when I have made some changes in my style.css fail the changes dont apear to client. Browser will use the old cached version of css.
I have simple question: Does naming css file as style.css?123 will be cached as a new?
Yes, adding a unique query string to the resource's URI will force the client to fetch a "fresh" version (since the client doesn't know that it's merely an update of a previously cached resource). This is known as fingerprinting and you typically use a timestamp or an incrementing version number1 of the CSS file.
Google Web Fundamentals has a great article on HTTP cache optimization. Especially the section titled "Invalidating and updating cached responses:"
How do you get the best of both worlds: client-side caching and quick updates? You change the URL of the resource and force the user to download the new response whenever its content changes. Typically, you do this by embedding a fingerprint of the file, or a version number, in its filename—for example, style.x234dff.css.
Do note, that the fingerprint does not need to be a sequential number. Any value – hash, version, etc. – will do as long as the risk of collisions is limited.
1) This is what's done here on SO, e.g. http://sstatic.net/js/global-login.js?v=12
You can append a unique query string, although this will use bandwidth.
You can rename your CSS file every time you make a change, IE:
main-v1.css
main-v2.css
main-v3.css
And then re-reference it in your pages. This saves bandwidth and forces browsers to reload it.
yes, appending a querystring parameter in each style.css file will force it to cache again.
because browser caches each static component with its url, so when url is changed, the new file will be cached.
You can trick the browser into thinking it's a new stylesheet every second by timestamping your CSS:
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
Which will give you this:
<link rel="stylesheet" type="text/css" href="style.css?Thursday 24th of April 2008 04:45:21 PM" />
Taken from: Can We Prevent CSS Caching?
Using .htaccess file, you can define caching control on you files with special extensions.
You could include the following code in a .htaccess file:
<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
For more information about .htaccess file, see Apache .htaccess Guide