Magento Forum

   
After I Update CSS, How Do I Force Returning Visitors to Download New Version? 
 
brianb421
Sr. Member
 
Total Posts:  196
Joined:  2009-04-23
 

Here’s the problem:

I update the style sheet and change the background color of the site from black to pink (for example).
New visitors who have never been to the site download the new version of the css and see PINK.
Returning visitors, who already have an old copy of the css file, see BLACK.

How do I force the browser to download the newest version of the css file?

Background Info:
I’m running Magento 1.5
I have merged the CSS files in the admin section:
http://www.example.com/admin/system_config/edit/section/dev/

Thanks for the help.

 
Magento Community Magento Community
Magento Community
Magento Community
 
brianb421
Sr. Member
 
Total Posts:  196
Joined:  2009-04-23
 

For those of you looking for a solution, I found a manual fix.

1) You should have your Merge CSS files turned on:
System - Config - Developer: Merge CSS Files: Yes

2) Use the code found here:
http://code.marksserver.co.uk/magento/css-magento/magento-add-css-versioning/1045/

which says:

edit:

app/code/core(or local)/Mage/Page/Block/Html/Head.php

Change this:

$html .= $this->_prepareStaticAndSkinElements('
<link rel="stylesheet" type="text/css" href="%s" %s="">' 
"\n",
    empty(
$items['js_css']) ? array() : $items['js_css'],
    empty(
$items['skin_css']) ? array() : $items['skin_css'],
    
$shouldMergeCss ? array(Mage::getDesign(), 'getMergedCssUrl') : null
);

To:

$html .= $this->_prepareStaticAndSkinElements('
<link rel="stylesheet" type="text/css" href="%s?version=1.0.0" %s="">' 
"\n",
    empty(
$items['js_css']) ? array() : $items['js_css'],
    empty(
$items['skin_css']) ? array() : $items['skin_css'],
    
$shouldMergeCss ? array(Mage::getDesign(), 'getMergedCssUrl') : null
);

Note: This is the code the tells Magento how to merge the CSS files. You are simply adding ?version=1.0.0 after the link. The spacing and code in my version of Magento was a bit different, so the code above might not match up completely. Just look for the href="%s" in the correct part of code and change it to href="%s?version=1.0.0"

Each time you update your CSS file, change the version number, for example to 1.0.1, then 1.0.2, etc.

Don’t upload this file yet. Do that in step 6.

3) Open your browser your website to see the current version of your site.
4) Upload the new style sheet.
5) If you have a CDN enabled, purge it.
6) Now, upload the head.php file with the new version #.
7) In your browser, DO NOT REFRESH the page, but instead just click on another page within your website, just as a returning visitor would. You should now see the changes of your CSS file, just as a returning customer would.

WHY DO THIS?
Let’s say you added html to the top of your page that says 20% OFF sale.
But you don’t want to make this go live yet, so you add a css rule that says ‘display:none’ to hide this sale until next month.

But, your returning customers have the old version of your css file saved in their browser. So when they visit, their old version of css doesn’t have the hide command, and therefore, they see the html code which says 20% OFF but they don’t see that discount listed on their products.

So, each time you update your CSS file, you want to follow the steps above because it gives your css file a new url which makes the browsers download the new version of it.

 
Magento Community Magento Community
Magento Community
Magento Community
 
brianb421
Sr. Member
 
Total Posts:  196
Joined:  2009-04-23
 

To help people find this thread on Google, here are some keywords I tried to find the answer:
This might be called Magento CSS Versioning or Update CSS Version or force browsers to reload cached css style sheet.

 
Magento Community Magento Community
Magento Community
Magento Community
 
brianb421
Sr. Member
 
Total Posts:  196
Joined:  2009-04-23
 

Automated Solution
I also found an automated solution. What it does is it looks at the time stamp of the uploaded css and js files. It then creates a new merged css file url each time the timestamps change.

Because it’s a new url, you don’t have to purge your CDN and a returning customer will automatically download the new version of the CSS. This really should be implemented into the basic Magento software.

By the way, this is what the Fooman Speedster Advanced extension does, but that extension had so many glitches at the time of testing that it was unusable.

Here’s the solution:

Go to http://www.fabrizio-branca.de/automatisches-versionieren-von-javascript-und-css-dateien-in-magento.html

It’s in German. If you are using Chrome, it will ask you if you want to translate it.
Find the link for Aoe_JsCssTstamp (v. 0.0.1) and download it.

I’m running Magento 1.5 and the software has a glitch in it (maybe it was made for a different version of Magento).
The glitch is that on SSL/HTTPS, it doesn’t load the https for java/css, thus you get the page is insecure notification.

To fix this, open up the package.php file,

Find:

public function getMergedCssUrl($files{
        $tstamp 
$this->getYoungestFile($files);
        
$targetFilename md5(implode(','$files)) . '.' $tstamp '.css';
        
$targetDir $this->_initMergerDir('css');
        if (!
$targetDir{
            
return '';
        
}
        
if (Mage::helper('core')->mergeFiles($files$targetDir DS $targetFilenamefalse, array($this'beforeMergeCss'), 'css')) {
            
return Mage::getBaseUrl('media') . 'css/' $targetFilename
        
}
        
return '';
     
}

Replace with:

public function getMergedCssUrl($files{
     
        $tstamp 
$this->getYoungestFile($files);
       
        
// secure or unsecure
        
$isSecure Mage::app()->getRequest()->isSecure();
        
$mergerDir $isSecure 'css_secure' 'css';
        
$targetDir $this->_initMergerDir($mergerDir);
        if (!
$targetDir{
            
return '';
        
}
 
        
// base hostname & port
        
$baseMediaUrl Mage::getBaseUrl('media'$isSecure);
        
$hostname parse_url($baseMediaUrlPHP_URL_HOST);
        
$port parse_url($baseMediaUrlPHP_URL_PORT);
        if (
false === $port{
            $port 
$isSecure 443 80;
        
}
 
        
// merge into target file
        
$targetFilename md5(implode(','$files) . "|{$hostname}|{$port}") . '.' $tstamp '.css';
        if (
$this->_mergeFiles($files$targetDir DS $targetFilenamefalse, array($this'beforeMergeCss'), 'css')) {
            
return $baseMediaUrl $mergerDir '/' $targetFilename;
        
}
        
return '';
     
}

(Thanks for Martin Helfert who posted this fix in the comments on that page. The fixed code is also listed here: http://pastebin.com/6apaaYeX )

Upload via ftp. Clear the cache. Test out your site on both your http and on your https checkout pages.

When you look at the page’s code, you’ll see:
<link rel="stylesheet" type="text/css" href="http://www.example.com/css/xxxxxxxxxxx.xxxxxx.css" media="all">
The .xxxxx.css is the timestamp part.

Thanks to http://www.fabrizio-branca.de/ for providing this elegant solution.

 
Magento Community Magento Community
Magento Community
Magento Community
 
JPhilly
Jr. Member
 
Avatar
Total Posts:  14
Joined:  2012-09-21
 

Thanks for posting this.

 
Magento Community Magento Community
Magento Community
Magento Community
 
brianb421
Sr. Member
 
Total Posts:  196
Joined:  2009-04-23
 

You’re welcome. Glad it helped you.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top