Magento: CSS Auto-Versioning 3

When you make changes to your themes CSS files in Magento and are using the built in CSS merging capabilities in Magento, you will run into issues with browsers caching the old file and your new changes not taking effect. The issue is that the filename for the css files doesn’t change when you make changes due to the way the filenames are generated. As long as your source files filenames stay the same, the URL won’t change.

A solution to this is to vary the filename of the css files by including a timestamp of the most recently updated source file in the filename. One way to do this is to modify the Mage_Core_Model_Design_Package class.

I added a method that will check the timestamp of the most recent file. We then include the most recently modified files timestamp into the filename for the merged file.

3 thoughts on “Magento: CSS Auto-Versioning

  1. Reply Maier Mar 8,2013 1:31 pm

    Question: How will i know this worked?

    It is not changing the file name for me.. What action triggers the renaming of the file?
    I did flush js/css cache but still nothing..

  2. Reply Mark Jun 13,2014 2:31 am

    If you also want to version the Javascript files (what I was looking for), add this function:
    public function getMergedJsUrl($files) {
    // get timestamp of newest source file
    $filesTimeStamp = $this->getNewestFileTimestamp ( $files );

    $targetFilename = md5(implode(',', $files)) . '-'.$filesTimeStamp.'.js';
    $targetDir = $this->_initMergerDir('js');
    if (!$targetDir) {
    return '';
    }
    if ($this->_mergeFiles($files, $targetDir . DS . $targetFilename, false, null, 'js')) {
    return Mage::getBaseUrl('media', Mage::app()->getRequest()->isSecure()) . 'js/' . $targetFilename;
    }
    return '';
    }

Leave a Reply