How to force user's browse to load latest stylesheet

Many of you may be aware of this problem, and many of you may not, but when a stylesheet is changed, and a visitor who has previously been to your website returns, the visitor will very likely have the old stylesheet in the browser cache, and your website may be rendered terribly mangled, depending upon the changes that you have made to the stylesheet. And no, you can't ask your visitors to press <ctrl>F5 to reload the page. It's a real problem - unless you know how to force a browser to reload the stylesheet with every page landing. This way any changes to the stylesheet will instantly update the browser at the expense of a few milliseconds in page load time.

The way to do this is to trick the browser into "thinking" that the stylesheet name has changed, when in fact it hasn't, and the correct stylesheet will of course be loaded though the browser will not know this.

If you examine the header template located in catalog/view/theme/YOUR-THEME-NAME/template/common/header.tpl
you will see various references to stylesheets (they have the .css extension). AFTER BACKING-UP THE header.tpl file, load it into Notepad. Go to the top of the file, and using the "replace" function, replace:

.css

with

.css?v=<?php echo date('his'); ?>

This will append the hour, minute, and second to the .css extension as a query string, so the browser will be loading a different query string appended to the .css extension every time it loads, but it will still be getting the correct stylesheet. The browser, of course, will "think" that the filename is different, but of course only the query string will have changed.

http://store.kgkaraoke.com

Thanks for the tutorial, but this is not for the General Support Forum. I'm moving it to General Discussion.

good tip - but why not rename the stylesheet and update the header template accordingly whenever you make a change? then the user always gets the latest stylesheet without having to download it every time.

ogun wrote:good tip - but why not rename the stylesheet and update the header template accordingly whenever you make a change? then the user always gets the latest stylesheet without having to download it every time.

Because of the likely possibility of a "race condition."

First you modify the stylesheet, but before you have a chance to update the header template, someone hits your page.

OR, first you modify the header template, but before you have a chance to update the stylesheet, someone hits your page.

You said "rename the stylesheet." You don't rename the stylesheet. You just rename the query string, which in this case is done automatically.