Force a browser to load a fresh stylesheet

When developing a website, we will be updating a CSS stylesheet very frequently. However, due to caching by the browser, the newest styles are not always loaded. How can you force the browser to read the latest version of the stylesheet?

There are a number of suggestions I’ve read.

  • Rename the stylesheet every time you update it. This undoubtedly works, but is a pain in the butt.
  • Use PHP to place “cache-control” and “expires” headers in your document. These theoretically tell the browsers when they should look for new versions of the page, and if you set the dates to the past, the browser should always load a fresh version of the page. In my experience, though, this doesn’t force the stylesheet to be reloaded.
  • Force a reload in Firefox by hitting “shift-reload”. This does force the html to be re-rendered, but in my experience does not force the stylesheet to be reloaded. And, it obviously only helps if you’re using Firefox!

Here’s the one thing that does work: use PHP (or whatever parallel command you have at your disposal) to add a meaningless yet oh-so-handy date query string to the URL for your stylesheet. In other words, if your styles are in a file referenced at http://example.com/styles.css, it will now look like this http://example.com/styles.css?d=123456789.

The server will ignore the string attached to the end of that url, but to the browser, this looks like a brand new stylesheet has been requested, and will no longer use the cached version of the stylesheet.

I develop in PHP, so I use the time() function to append a UNIX timestamp to the end of the url. In practice, then, a sample css tag in your document head will look like this:

<link rel="stylesheet" type="text/css" href="http://example.com/css/screen.css?d=<?php echo time(); ?>" />

I hope this helps solve a common development headache for you.

7 responses to “Force a browser to load a fresh stylesheet”

  1. Madis

    So basically with every refresh it generates unique URL for your stylesheet, although file name remains same. That’s a nice and simple!
    Maybe for public site with larger file it’s good to demand refresh about once in hour to reduce loading time? For example year-month-day-hour:

    echo date(‘YmdH’);

  2. John

    Ok, but on the production side why not just append v=nnn to the style sheet reference so you only reload it when there’s a new version? Slightly more work on a release but hardly onerous.

    If you’re using php for it, put the stylesheet link in a separate file included into your html.

    You could do the same with javascript if you don’t have php, with a non-versioned stylesheet link in no script tags.

  3. Pavel

    John, I don’t know. I had the same thought and tried it but the browser actually reloads the style sheet with every refresh. Luckily my site is going to be ajaxified, so it will happen only once at the beginning:
    @import url( ?v=001 );

  4. Pavel

    OK. After a bit more testing: FF and Chrome reload after every refresh, IE needs version change in the header.

  5. BillyG

    Maybe a better idea would be to actually read (with PHP for example) the date/time of the CSS file and append it on the link / import call in the generated HTML code. So the CSS file would be only reloaded if it is really changed. This assumes of course, that it is a PHP file generating the HTML output. I don’t think there is a solution for pure HTML files…

  6. A Solution for forcing CSS Updates | Open Cart Know How

Leave a Reply