CSS file browser caching

Question

Quick question regarding CSS and browser. I tried to find SO and found similar entries, but nothing final.

I use one or two CSS files in my web projects. They are mentioned in the HEAD of my web pages. As soon as I got to one of my pages, CSS is cached so that it doesn't reload with every request? I hope so. Did IE, Firefox, and Safari handle this differently? If the browser is closed, is the CSS updated on the first visit when opening a new browser instance?

Answer 1

Your file will probably be cached - but it depends ...

Different browsers have slightly different types of behavior - most noticeably when working with ambiguous / restricted caching headers coming from the server. If you send a clear signal, browsers obey almost all the time.

The biggest variance is the default caching configuration for different web servers and application servers.

Some (like Apache) are more likely to serve known static file types with HTTP headers, encouraging the browser to cache them, while other servers can send no-cache commands with each response, regardless of file type.

...

So first, read some of the excellent HTTP caching . HTTP caching and caching for Content Publishers was a real discovery for me :-)

Then install and script Firebug and Live HTTP Headers to see which headers your server actually sends.

Then read your web server docs to find out how to configure them to perfection (or talk with your administrator to do this for you).

...

As for what happens when the browser restarts, it depends on the browser and user configuration.

Generally, expect the browser to be more likely to log into the server after each restart to see if something has changed (see If-Last-Modified and If-None-Match ).

If you configured your server correctly, it will have to return a super-short 304 Not Modified (with very low bandwidth) and after that the browser will use the cache as usual.

Answer 2

The first part of your question is yes, cache cache cache files (unless disabled by browser configuration). Many browsers have a keyboard shortcut to reload a page without a cache. If you made changes to css and want users to see them right away, rather than expecting the next time the browser reloads files without caching, you can change the way CSS ir is used by adding some parameters to the URL:

 /style.css?modified=20012009 

Answer 3

It depends on the HTTP headers sent with the CSS files, since both of the previous response states are until you add any caching files to href. eg

 <link href="/stylesheets/mycss.css?some_var_to_bust_cache=24312345" rel="stylesheet" type="text/css" /> 

Some frameworks (for example, rails) put them by default.

However, if you get something like firebug or fiddler , you can see for sure what your browser loads for each request, which is extremely useful for determining what your browser is doing, and not just what it should do.

All browsers should treat cache headers the same way, unless configured to ignore them (but there should be exceptions)

Answer 4

It may be worth noting that IE will not cache css files called by other css files using the @import method. So, for example, if your html page links to "master.css", which pulls "reset.css" via @import, then reset.css will not be cached by IE.

Answer 5

It depends on what headers you send along with your CSS files. Check your server configuration as you probably aren’t sending them manually. Do a Google search for “http caching” to find out about the various caching options you can set. You can force the browser to download a new copy of the file each time it downloads it, for example, or you can cache the file for one week ...

Answer 6

If you have not ruined the server, yes, it is cached. All browsers should handle it the same way. Some people (like me) may configure their browsers so that they do not cache files. Closing the browser does not invalidate the cache file. However, changing the file on the server should result in a file update.