Most of us Magento developers were excited to see that Magento now offers combining and minifying CSS files in the Advanced Magento configuration.
And, for the most part, this feature seems to work great. However, I wouldn’t be writing this article if there wasn’t something to write about.
We recently released a store based on Magento 1.4 and enthusiastically enabled the features to combine the JS and CSS. Of course being a production store, we had secure URLs enabled on the account and checkout pages. However, we noticed that when browsing the https pages, the browser would report a mix of secure and non-secure items.
What was happening?
Upon closer inspection of the HTML and CSS, we realized that all the CSS background images had absolute URLs in the combined CSS file and – get this – all were using the non-secure http://…. URLs!
So, obviously, a) the combine code replaces relative image paths with absolute URLs and b) doesn’t take into account that we are using a secure connection.
After short investigation, the culprit seems to be in: app/code/core/Mage/Core/Model/Design/Package.php on line 733:
protected function _prepareUrl($uri)
{
// check absolute or relative url
if (!preg_match('/^[http|https]/i', $uri) && !preg_match('/^\//i', $uri)) {
$fileDir = '';
$pathParts = explode(DS, $uri);
$fileDirParts = explode(DS, $this->_callbackFileDir);
$baseUrl = Mage::getBaseUrl('web'); // <- THE PROBLEM
foreach ($pathParts as $key=>$part) {
if ($part == '.' || $part == '..') {
unset($pathParts[$key]);
}
if ($part == '..' && count($fileDirParts)) {
$fileDirParts = array_slice($fileDirParts, 0, count($fileDirParts) - 1);
}
}
if (count($fileDirParts)) {
$fileDir = implode('/', $fileDirParts).'/';
}
$uri = $baseUrl.$fileDir.implode('/', $pathParts);
}
return $uri;
}
The call should be replaced with:
$baseUrl = Mage::getBaseUrl('web', true);
to take into account the possibility that we are in a secure area of the site.
Please note that this code change is untested. Make sure you test this yourself before publishing it on a live store.
As you can see, the fix is simple but this adds to another little annoyance just like the Google Analytics code bug.
UPDATE
I finally tested the suggested fix and it worked under https. Of course, then the cached CSS files contain the https absolute links to the background images even in the non-secure parts of the site. This may or may not be a concern…
Another quirk I noticed when using the Clear JS/CSS cache buttons in the Magento 1.4 cache management page is that the JS or CSS cache files weren’t actually removed. They reside in /media/js/ and /media/css/ so I had to clean them out manually.
Finally, enabling these options will also combine all the JS and CSS for the admin back end, which in my case, led to some funky styles in the Magento admin.
As the note on the CSS option says, it’s experimental – beta so use with care and test thoroughly.
Originally published on magebase.com. Copyright © 2010 Magebase - All Rights Reserved.
Proud members of the 
Hi Robert,
Great post. Came across this issue myself today and you are the only one really talking about it.
I had a slight alternate suggestion for a fix though that seemed to work a bit better. Rather than always forcing the absolute paths over https, just make the urls relative again by setting $baseUrl = ‘../../’
Since the merged, cached css files are in /media/js/ this sets all of the paths back to the relative root again and you can avoid those pesky http/s designations all-together.
I’ve only tested minimally, but it seems to be working, and CSS merging appears to be the only process that uses the function. I haven’t seen any major downsides with it yet. Let me know if you see any problems with it!
Hi Mackenzie, you’re right, relative URLs are certainly better but I guess that depends on whether you have custom modifications to your media paths. You would also need to test multi-store scenarios, additional custom designs etc…
Personally, I found enabling CSS merging affected the admin styles, possibly because the merged admin css contained the frontend css stuff. This setting definitely needs more development work done to make it production ready. Until then, I’d just keep it as a curiosity
.
Just to confirm mackenzie’s method works fine on a single store with a single theme with the css compiled into media/
Thanks for documenting the issue
Pete
Thanks for this!
Had an idea that it might be something to do with the css merging; I’ve decided to disable it until they’ve fixed it. It probably won’t be a performance hit for the current site, as unlike some, it’s only using a few stylesheets.
@Matt
Yes, I’d leave this option for now. It’s too unstable for my taste to run on a production site.
Yeah, what a bummer that CSS merging is not working yet. I had set it up, tested it out, and all was fine – so I thought. When it came to the checkout pages (https), the backgrounds disappeared – including the continue button. I’m surprised this is still unfixed in 1.4.1. I mean, beta or not, that issue is an obvious non-starter.
I did have good luck installing the Fooman Speedster extension. That seems to do the trick pretty well.
Love this blog – keep it up! It’s like a Magento bug squashing tutorial. Unfortunately, you’ll probably always have lots to write about.
Great Article! However, for some reason this fix did not fix my problem. I tried updating the code and went into admin and cleared all cache, etc, but still had the issue. So not sure if I was able to get all the cache cleared or not.
Might anyone know why? I definitely see a speed increase when I have the css merged.
Please help!!!!!
@Daniel
Make sure you clear the files in: /media/css/ manually.
@Robert,
Yes, I made sure I cleared the files in the /media/css manually, but still the problem exists. Very frustrating.
So what is your exact problem when you say “this did not fix my problem”?
How did you implement the suggested fix?
@Robert, I replaced line 733 with your code, $baseUrl = Mage::getBaseUrl(‘web’, true);, cleared all the cache.
It appears to only be affecting my images in my css file. I have them defined like this…
background: #014e82 url(../images/gradient-background.jpg) 50% 0 repeat-x;
Seems to be the exact problem everyone is experiencing and what you described, “However, we noticed that when browsing the https pages, the browser would report a mix of secure and non-secure items.”
Do you think I am still missing something?
Hi All,
I had the same problem and I have a different approach which seems to be compatible with everything. Create merged Css file for each http and https with absolute path.
Still in the same idea of this article, you have to override the class Mage_Core_Model_Design_Package and override the method getMergedCssUrl() and provide a different suffix if the current store is in http or https. then a merged css file will be done for http pages and an other one for ssl pages.
The content will get absolute url background: ul(http://www.mydomain.com/…) and the ssl file will get absolute url background: ul(https://www.mydomain.com/…). You have nothing else to do, the correct file will be provided in the HTML header.
<?php class Rissip_UIOptimization_Model_Overwrite_Design_Package extends Mage_Core_Model_Design_Package{ public function getMergedCssUrl($files) { $suffixFilename = (Mage::app()->getStore()->isCurrentlySecure())?'-ssl':''; $targetFilename = md5(implode(',', $files)) . $suffixFilename .'.css'; $targetDir = $this->_initMergerDir('css'); if (!$targetDir) { return ''; } if (Mage::helper('core')->mergeFiles($files, $targetDir . DS . $targetFilename, false, array($this, 'beforeMergeCss'), 'css')) { return Mage::getBaseUrl('media') . 'css/' . $targetFilename; } return ''; } }I tested it and it works. I will provide soon a free module in Magento Connect to improve the css and js minifying thanks to existing libraries. It’s already finished I just need to find time to put it.
Regards
if the path is not relative then you can check if it’s secure or not, so line 733 would look like:
if (strpos($uri,’https’)===FALSE ) {
$baseUrl = Mage::getBaseUrl(‘web’); //unsecure
} else {
$baseUrl = Mage::getBaseUrl(‘web’, true); //secure
}
That case is would always serve the propere url’s.
This solution is ok when you don’t use cache system from Magento. Once you activate the cache from Magento, it provide http url when you need https and reverse.
As I said, I made a free module to improve CSS and JS compression and fix the ssl problem with cache. It works with the css and js merginig function of Magento.
Here is the link in Magento Connect: http://www.magentocommerce.com/magento-connect/Sylvain%20R./extension/5195/rissip_uioptimization
Go on you legend. You’ve ended my frustration.
hI Robert
Your article talks about the issue that is a problem for me at the moment. Yesterday I set up a Positive SSL certificate on my Magento store and I have the same issue with the secure and non-secure items.
A friend of mine, who specializes in Magento, told me this:
“Please set css merge off and try again. For some reason you have http links to images in your compressed css files.”
Could you please tell me, how can I set css merge off, and how to find the compressed css files?
After HostGator installed the SSL certificate, I noticed that SEO Quake stopped showing any data related to the site, Market Samurai does not read it, HubSpot website grader does not see the website….something is not right
can you help?
thank you;)
Nicole
@Nicole
to turn merging of CSS files off (and this is actually the default setting) in the Magento admin go to:
System > Configuration
Then look in the left sidebar tabs for: Advanced > Developer > CSS Settings
and set the drop-down to No.
The files are generated usually in media/css/ but if you urn the option to No, they should not be used.
If this doesn’t fix your issue with secure / non-secure items, then your theme may be including a custom css file? Have you had your theme customized? if so, then ask the person who customized the theme to fix it.
I can’t answer your SEO Quake etc. questions as I am not familiar with those systems.
Robert
thank you, I have turned the merging of CSS files off. It fixed the home page, but the product pages still experience the problem. Perhaps it is related to the product images?
“then your theme may be including a custom css file? Have you had your theme customized? if so, then ask the person who customized the theme to fix it.”
yes, that’s a good conclusion, I will contact the authors of my theme.
just wondering, when you update the security of your site, from http to https, do you still keep the number of backlinks pointing back at your site?
and also,
will Google and Robots be able to read the data describing my site?
thank you, sorry for the non-technical jargon I might be using
best wishes
Nicole
If the site you are referring to is the one linked from your Name on the comment here, then it seems as though your unsecure items on the product page come from the Facebook images being loaded for the “like” button. Here are some articles I found after a quick ‘google’:
http://www.developerit.com/2010/06/16/facebook-likebox-iframe-over-ssl
http://stackoverflow.com/questions/3587021/facebook-like-button-breaks-https-ssl
Also, you don’t necessarily have to enable SSL for the whole site, you can set Magento up so it only uses SSL for the customer account registration and pages and the checkout.
Using SSL won’t affect your backlinks etc. and search engines will still be able to index your site content.
Robert
Thank you, I will get back when I solve this issue. I see in Market Samurai, that the number of backlinks is falling down. I will give them some time to settle down.
* I see that the http of the facebook URL can be changed into https.
Thanks to the links you kindly researched for me
and yes,
I would like to enable SSL for the specific pages only. I am not sure how to do it, have you written about it in another article of yours?
many thanks:)
Kind Regards
Nicole
ah, im having this problem too, hope it gets fixed for the next new magento release.
Thanks ! It fix my problem on Magento 1.4.1.1
Perfect, thanks. Do you use many Magento modules? We used some that did a great deal to help to speed up page page times. It took a few months to settle and function to our needs but now it’s great. Saved thousands on webserver charges by having it in the cloud! Thanks, Brenjam.
Thanks for this article,but it is not work on Magento 1.5,can you give more suggestion on Magento1.5.Thanks!
You don’t need this fix for Magento 1.5, CSS merging should work fine “out of the box” in 1.5+