When I make a page, link it to a CSS file, and open it in a browser, it works fine.
But if a make a change and refresh the page again between very short time periods, the change is not reflected. But after sometime, when i refresh the page again, the changes appear.
So, somehow the browser keeps the CSS file cached and expires it after sometime. How to make the browser cache no CSS or HTML file.
It would be better if i can block it on a particular domain.
I'm on Ubuntu, using Chrome and Firefox, trying to prevent browsers from caching CSS files on 'localhost'... How to do it...
Thanks...
Something as simple as this should work:
<link rel="stylesheet" src="/css/screen.css?v={CURRENT_TIMESTAMP}">
Just replace {CURRENT_TIMESTAMP} with the actual timestamp in your server side code. This makes the browser think it's a new file because of the query string and it will be downloaded again. You could also use the actual modification time of the file (filemtime('/path/to/css/screen.css') if you're using PHP) which should prevent unnecessary downloads.
You can open Developer Tools by pressing Ctrl+Shift+J and then you'll find a cog icon in bottom right. When you click on it you should see an option to disable caching.
It would help to know how the website is hosted, as you can configure this in most web servers.
Also, it's a good idea to introduce a cache busting mechanism which would modify the links to the CSS files in question when you change the CSS files' contents. Browsers would then reload the CSS file because the HTML refers to a different URL.
A good example of a cache busting mechanism is the ruby on rails 3.1 asset pipeline which also minifies files and gzips them if the browser supports them:
Rails 3 - Asset Pipeline -- What does it mean to me?
http://2beards.net/2011/11/the-rails-3-asset-pipeline-in-about-5-minutes/
The seemingly-inelegant but rock solid approach is to give the asset a new name, when the content changes. This solves the problem for all your users, not just you:
<link rel="stylesheet" src="/css/screen_034.css">
<link rel="stylesheet" src="/css/screen_035.css">
<link rel="stylesheet" src="/css/screen_036.css">
Or maybe (but it's more of a pain to change in an IDE, and sometimes causes unrelated problems with caching):
<link rel="stylesheet" src="/css/screen.css?pretend_version_number=034">
Nothing else works quite as well in large scale production environments, where millions of copies of an older css file may be sitting in various intermediate or browser caches. Some clients ignore cache control headers, and you don't really want caching subverted anyway, at least not in production.
In development you can press Ctrl+Shift+J (Chrome) and turn off caching.
Related
I noticed some websites put the version numbers (especially) in the CSS file path. For example:
<link rel="stylesheet" type="text/css" href="style.css?v=12345678" />
What is the main purpose to put the version number? If the purpose is to remember when the CSS file was updated last time, shouldn't the version number added as a comment inside the CSS file?
From HTML5 ★ Boilerplate Docs:
What is ?v=1" '?v=1' is the JavaScript/CSS Version Control with
Cachebusting
Why do you need to cache JavaScript CSS? Web page designs are getting
richer and richer, which means more scripts and stylesheets in the
page. A first-time visitor to your page may have to make several HTTP
requests, but by using the Expires header you make those components
cacheable. This avoids unnecessary HTTP requests on subsequent page
views. Expires headers are most often used with images, but they
should be used on all components including scripts, stylesheets etc.
How does HTML5 Boilerplate handle JavaScript CSS cache? HTML5
Boilerplate comes with server configuration files: .htacess,
web.config and nginx.conf. These files tell the server to add
JavaScript CSS cache control.
When do you need to use version control with cachebusting?
Traditionally, if you use a far future Expires header you have to
change the component's filename whenever the component changes.
How to use cachebusting? If you update your JavaScript or CSS, just
update the "?v=1" to "?v=2", "?v=3" ... This will trick the browser
think you are trying to load a new file, therefore, solve the cache
problem.
It's there to make sure that you have the current version. If you change your website and leave the name as before, browser may not notice the change and use old CSS from its cache. If you add version, the browser will download the new stylesheet.
If you set caches to expire far in the future adding ?v=2 will let the server know this is a new file but you won't need to give it a unique name (saving you a global search and replace)
HTM5 boilerplate also includes it in their project.
Check this video also: HTML5 Boilerplate Walkthrough.
One of the reason could be to bypass file caching. Same name CSS files can be cached by the servers and may result in bad display if new version has has layout changes.
This is to optimise browser-caching. You can set the header for CSS files to never expire so the browser will always get it from its cache.
But if you do this, you'll get problems when changing the CSS file because some browsers might not notice the change. By adding/changing the version-parameter it's "another" request and so it won't be taken from the cache (but after the new version is cached, it's taken from there in the future to save bandwidth/number of requests until the version changes again).
A detailed explanation can be found at html5boilerplate.com.
My knowledge is pretty much out of date regarding websites, but the variable stored in the 'href' argument is received by the browser through HTTP. Using the usual tricks in URL-rewriting you could actually have an arbitrary script that produces CSS-output when called. That output can differ, depending on the argument.
In some sourcecodes i see this:
<link rel="stylesheet" href="/css/style.css?201007071609" type="text/css" />
Now is my question: why do people print 201007071609 behind style.css?
This forces the browser to not load the css from cache and rather take the latest version from the server
see related article
Another trick developers do is to add a random string or a timestamp to force refresh the css page.
That's a way to make sure that clients don't cache older versions of the same file. If the URL is different, the client will retrieve the file from the server instead of from cache. So, for example, if a new version of the site was published, that would be a way to make sure visitors see the right CSS.
This forces the browser to retrieve a fresh copy of the file, rather than loading a cached version. This is important when your html has changed and requires an up to date css file to prevent it from displaying incorrectly.
the font of the content of my facebook app keeps getting italicized even when i've removed the italics from the css file. if i make minor changes in the css file and upload it to the server, the firebug shows the unedited previous css file and hence, the app keeps showing unformatted content. what exactly is going wrong here?
i made a new css file and copied the contents of the previous css exactly as it was, and i linked it in all the files which require css. but when i upload these files to the server, facebook canvas doesn't show any css at all. i replaced the css filename with the previous one, and it works. why is this?
Actually it looks like facebook is currently experiencing some weird problems with styling. It doesn't cache any new styles, only displays what was previously cached (from yesterday). If you provide a new stylesheet url it will not be able to pull it up (like that url doesn't exist).
During normal conditions what others already suggested should work.
Facebook does like to cache things. Persistently. I don't know why the new file wouldn't have worked, by I can recommend 'spoofing' your css filename with a spurious querystring variable, and incrementing it each time you make an update.
eg
href="my_css_file.css?x=1"
Sounds like the browser is caching your CSS file, which is why even Firebug sees the older version.
There are numerous ways you can prevent the browser from caching your CSS file during development (once in production mode, you probably want it to remain in the cache). The most common technique used by web frameworks like Ruby on Rails is to append a random query string to the URL, like so:
<link rel="stylesheet" type="text/css" href="style.css?96234987" />
...but the trick is that it should be different every time, so the browser thinks it's a different file.
Here are links to a simple trick for PHP, a JSP example, and other possible methods.
According to Include files on facebook developer wiki:
Stylesheet includes are cached automatically by Facebook. Just include a tag like:
<link rel="stylesheet" type="text/css" media="screen"
href="http://yourapp.com/stylesheets/style.css?v=1.0" />
Increment the version number upon each change to your style sheet, as specified above.
The web dev toolbar for Firefox is quite an impressive tool.
What I am completely clueless about is how does this tool get the css stylesheet file of a site? This is hosted on a host which is secure etc. I am completely stumped.
I must be thinking about this in all the wrong way.
Thanks
The client (in this case Firefox) has to download the CSS file in order to render the page correctly. The plugin (in this case Firebug) simply requests the proper URL and the browser it gets it--most likely from the cache. There is no real mystery here.
In every HTML file, there's a link to the CSS stylesheet, or else the browser wouldn't know where to find it, thus losing the ability to render the page correctly.
It's in the form of <link rel="stylesheet" type="text/css" href="theme.css">,
I'd like to add that regardless of whether the host is 'secure' or not, it still is presenting the file to the client.
Unless, of course, you're looking at a XML file. Then you need to consult the XSL which'll tell you where the stylesheet is.
I'm working on a webapp, and every so often we run into situations where pages will load without applying CSS. This problem has shown up in IE6, IE7, Safari 3, and FF3.
A page refresh will always fix the problem.
There are 3 CSS files loaded, all within the same style block using #import:
<STYLE type="text/css">
#import url([base css file]);
#import url([skin css file]);
#import url([generated css path]);
</STYLE>
In any situation when we take the time to examine the html source, nothing is out of the ordinary. Access logs seem normal as well - we're getting HTTP 304 responses for the static CSS files whenever they are requested, and an HTTP 200 response for our generated CSS.
The mimetype is text/css for the css files and the generated css. We're using an iPlanet server, which forwards requests to a Tomcat server.
davebug asked:
Is it always the same css file not loading, or is the problem with all of them, evenly?
None of the CSS files load. Any styles defined within the HTML work fine, but nothing in any of the CSS files works when this happens.
I've had a similar thing happen that I was able to fix by including a base style sheet first using the "link rel" method rather than "#import". i.e. move your [base css file] inclusion to:
<link rel="stylesheet" href="[base css file]" type="text/css" media="screen" />
and put it before the others.
if it happens often enough that you're able to see it in your browser, try intalling the Live http headers Firefox extension or the Tamper Data extension, and watch the response headers as they are seen by the browser.
I don't know why, but in my case if the page is loaded from an action with the path like /ActionName, I see this problem.
But if I change it (for example) to /reservedArea/ActionName or /aPath/ActionName it works :/
It's crazy...
Examining the headers is a good idea, but I imagine all you will learn from them is that the server didn't respond to a request every once in a while.
I see this happen all the time on the net. Images won't load until you refresh, css is messed up, etc. All of the situations are solved by a refresh.
I imagine one way you could "fix" this, maybe, is by specifying in your cs file a url for an image for some element. Then, on page load in javascript, get that element and see if that image has loaded. If not, then have the page reload itself.
Seems pretty exotic, but that's the only idea I had...
Use ab or httperf or curl or something to repeatedly load the CSS files from the webserver. Perhaps it's not consistently serving the pages.