Menu
Quick question regarding CSS and the browser. I tried searching SO and found some similar posts, but nothing definitive.
I use one or two CSS files in my web projects. These are referenced in the HEAD of my web pages. Once I hit one of my pages, does the CSS get cached so that it's not re-downloaded with each request? I hope so. Do IE, Firefox and Safari handle this differently? If the browser is closed, is the CSS refreshed on the first visit when a new browser instance is opened?
294
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.
How does Caching Work? When the browser parses this HTML, it identifies that a CSS resource needs to load from https://www.example.com/app.css. The browser issues a request to the server for this file, the server returns the file and also tells the browser to cache it for 30 days.
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.
Timestamping Your CSSTo prevent the caching of their scripts, they add a timestamp to the end of the src attribute.
Your file will probably be cached - but it depends...
Different browsers have slightly different behaviors - most noticeably when dealing with ambiguous/limited caching headers emanating from the server. If you send a clear signal, the browsers obey, virtually all of the time.
The greatest variance by far, is in the default caching configuration of different web servers and application servers.
Some (e.g. Apache) are likely to serve known static file types with HTTP headers encouraging the browser to cache them, while other servers may send no-cache commands with every response - regardless of filetype.
...
So, first off, read some of the excellent HTTP caching tutorials out there. HTTP Caching & Cache-Busting for Content Publishers was a real eye opener for me :-)
Next install and fiddle around with Firebug and the Live HTTP Headers add-on , to find out which headers your server is actually sending.
Then read your web server docs to find out how to tweak them to perfection (or talk your sysadmin into doing it for you).
...
As to what happens when the browser is restarted, it depends on the browser and the user configuration.
As a rule of thumb, expect the browser to be more likely to check in with the server after each restart, to see if anything has changed (see If-Last-Modified and If-None-Match).
If you configure your server correctly, it should be able to return a super-short 304 Not Modified (costing very little bandwidth) and after that the browser will use the cache as normal.
126
To the first part of your question - yes, browsers cache css files (if this is not disabled by browser's configuration). Many browsers have key combination to reload a page without a cache. If you made changes to css and want users to see them immediately instead of waiting next time when browser reloads the files without caching, you can change the way CSS ir served by adding some parameters to the url like this:
/style.css?modified=20012009 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
