Browser Caching of CSS files

Question

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?

Solution 1

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.

Solution 2

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

Solution 3

It does depend on the HTTP headers sent with the CSS files as both of the previous answers state - as long as you don't append any cachebusting stuff to the href. e.g.

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

Some frameworks (e.g. rails) put these in by default.

However If you get something like firebug or fiddler, you can see exactly what your browser is downloading on each request - which is expecially useful for finding out what your browser is doing, as opposed to just what it should be doing.

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

Solution 4

It's probably worth noting that IE won't 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 in "reset.css" via @import, then reset.css will not be cached by IE.

Solution 5

That depends on what headers you are sending along with your CSS files. Check your server configuration as you are probably not sending them manually. Do a google search for "http caching" to learn about different caching options you can set. You can force the browser to download a fresh copy of the file everytime it loads it for instance, or you can cache the file for one week...

View more solutions

Comments

[Jan Hančič]

This is mostly wrong. There are differences between browsers regarding caching. And once a file is cached on the client it won't be downloaded again until the cache (for whatever reason) expires, changing the file on the server will not make a difference...

[Liam]

This seems like an extremely important point. Can you add a reference?

[Henrik Stenbæk]

This dosn't seems to be true, cf.: link see this comment/answer: Murray | 27-May-09 at 9:52 am Steve, I’ve also heard that when using @ import, browsers may not cache the css files, unlike with a . But I haven’t been able to verify this. Are you aware if it actually matters from a caching perspective? If so, it might be another reason to avoid @ import. Steve Souders | 27-May-09 at 2:26 pm Murray: I haven’t heard that and it doesn’t happen in my tests.

[Paulius Zaliaduonis]

Genius! /Style.css?deployment={DeploymentId}

[Pacerier]

Does Ctrl-K already show us the "live http headers"? Why do we need to use Live HTTP Header add-on?

[Pacerier]

Is this behavior supported by the RFC?

[plowman]

@Pacerier Yes, this is a "supported" way to do things. Since the browser just sees /style.css?modified=20012009 as a URL, it is equivalent to changing the name of your CSS file every time you do a release. Since the browser thinks the file is new, it will not try to use any cached version of it.

[Pacerier]

@plowman, I mean yes it's working in the wild, but is the behavior actually supported by the official prescriptive rfc standards?

[Jesse Webb]

@Pacerier - Looks like a pretty standard HTTP GET parameter to me. What makes you think it would not be supported? Nothing special going on here...