Tell me more ×
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It's 100% free, no registration required.
up vote 12 down vote favorite
3

Suppose that we changed a lot of functionality for module (templates, layouts, CSS) and we are going to move these changes to production site, but a lot of customers have cached CSS in their browsers. So here is a question. How to force flush client's CSS cache and avoid file renaming (styles.css -> styles-v2.css). There is one logical way but it doesn't work in Magento, because it checks file existing (by the way this method works for JS files), see below:

<action method="addCss">
    <stylesheet>css/styles.css?1</stylesheet>
</action>

Any ideas?

share|improve this question

6 Answers

up vote 10 down vote accepted

One way of dealing with this is enabling merging of CSS. Then you could just clear the cache and a new merged file would be created with a new file name.

System -> Configuration -> Developer -> CSS settings -> Merge CSS Files

As far as I know, the hash code of the merged CSS file stays the same even if the underlying files changed - only if new files are added to the set of merged files, the hash changes. -- @Alex

Another way of dealing with this is instead of using the layout.xml, just put them in your page/html/head.phtml Or create a block that contains a <style> tag with version number and put it in the XML in your head so you can have it load on only specific pages and still sticking to using the XML layouts.

share|improve this answer
3  
As far as I know, the hash code of the merged CSS file stays the same even if the underlying files changed - only if new files are added to the set of merged files, the hash changes. – Alex♦ Jan 23 at 8:27
@Alex didn't know that, makes sense. – Rick Kuipers Jan 23 at 8:28
1  
I haven't looked at this recently, but in the past the compilation of CSS / JS seems to actually add extra 'weight' to your site if you load different CSS / JS on different pages. It created a different compiled version per unique set of scripts. This means larger files that get compiled in are essentially being downloaded multiple times. – Cags Jan 23 at 9:02
up vote 7 down vote

You can use the OpenSource Module Aoe_JsCssTstamp which adds timestamp information to the merged CSS files. Timestamps for plain (un-merged) CSS files are not yet supported however but this would be easy to implement.

share|improve this answer
up vote 2 down vote

I use my own extension Speedster Advanced for this. But the basic principle is that the name of the merged css and js files includes the timestamp of the last modified file - see Mage_Core_Model_Design_Package::getMergedCssUrl(). Any time you edit any of the css files a new file name is created causing browsers to request the new file instead of reusing the cached version. Since your head block might be cached a Magento cache refresh is needed.

share|improve this answer
up vote 2 down vote

There is a free extension on github 'Magento Cachebuster' that does exactly this. It re

https://github.com/gknoppe-guidance/magento-cachebuster

The module provides cachebusting by automatically altering the URI created by Magento for >static files by adding the timestamp of the file to the filename:

Before: http://www.example.com/js/varien/js.js After: http://www.example.com/js/varien/js.1324429472.js

share|improve this answer
up vote 1 down vote

Instead of:

<action method="addCss">
    <stylesheet>css/styles.css?1</stylesheet>
</action>

you could do something like:

<reference name="head">
    <block type="core/text" name="foocss">
        <action method="setText">
            <css><![CDATA[<link rel="stylesheet" type="text/css" href="foo.css?1" media="all" />]]></css>
        </action>
    </block>
</reference>

But it's not very nice...

share|improve this answer
Interesting idea :) – Nick Jan 23 at 8:56
up vote 0 down vote

If I understand the proposed solution in your question, you can do that with a slight mod to a core file (don't actually edit the core file):

Mage/Page/Block/Html/Head.php

Add something like ?v=1 to line 198 so all css files have this appended:

$html .= $this->_prepareStaticAndSkinElements('<link rel="stylesheet" type="text/css" href="%s?v=1"%s />' . "\n",
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.