1

I'm working on a responsive site and I'm trying a simple solution to stop serving versions of IE below 9 any responsive related CSS because they don't support media queries.

I have one CSS file which I've added to my local.xml like so:

<action method="addItem"><type>skin_css</type><name>css/layout-large.css</name><params>media="only screen and (min-width: 1024px)"</params></action>

That file wont be loaded by older versions of IE because they don't understand media queries, but as these are the larger layout styles those versions of IE need this CSS. A simple solution to this is to link that file from a conditional IE comment, like so:

<action method="addItem"><type>skin_css</type><name>css/layout-large.css</name><params/><if>lt IE 9</if></action>

This is where the problem starts, Magento just renders the IE conditional link and not the other link even though one has parameters and the other an IF statement.

Is there a way to make Magento load the same CSS file (or a JS file thinking about it) twice from the same location?

Improve this question

2 Answers 2

Reset to default
2

if you check app/code/core/Mage/Page/Block/Html/Head.php from line 128 (the addItem method) you'll see the following code:

 $this->_data['items'][$type.'/'.$name] = array(

the name in this case is the filename, so loading 2 of the same files will not be possible as you are overwriting the array key.

In my opinion you're better off naming your IE stylesheet differently. One untested possibility is to add either a hashtag or get variable to the filename like this: css/layout-large.css#foobar or css/layout-large.css?foobar thus changing the 'name' of the file.

But as I said, haven't tested it so I don't know what the impact might be.

Improve this answer
3
  • Thanks for the reply. You've confirmed what one of my colleagues said 'overwriting the array key'. When you say add a hash or a get variable, do you mean a different one to each instance of the file link in the layout xml? The reason I don't want two CSS files is for maintenance but I now have one file which would end up getting downloaded by all browsers...so that's not really a better solution anyway.
    – Mark Weston
    Jul 9, 2013 at 13:05
  • Not sure if I ever tried your possible solution of adding a hastag or variable. I have just attempted it though and it does cause Magento to render both links to the file, but, for some reason IE (version 8 in this instance) won't actually load the file with the variable appended to it's name when I view the site. I can get IE8 to load the file by pasting the full path including variable name into the browser address bar though.
    – Mark Weston
    May 9, 2014 at 11:39
  • It does seem to work if you include the css using different method e.g. addCss and addItem.
    – Mark Weston
    May 9, 2014 at 12:05
0

I have found solution which could work for if your theme doesn't need to rely on a file falling back to a different theme.

<action method="addItem"><type>skin_css</type><name>css/layout-large.css</name><params>media="only screen and (min-width: 1024px)"</params></action>
<action method="addItem"><type>link_rel</type><name>/skin/frontend/my-package/default/css/layout-large.css</name><params>rel="stylesheet" type="text/css"</params><if>lte IE 8</if></action>

I now have an addItem which includes the stylesheet using a media query, followed by another addItem which includes the same css file via a different addItem type which seems to avoid the same name issue.

Improve this answer
1
  • Not marking correct because it's not actually a universal solution, it doesn't handle theme fallback.
    – Mark Weston
    May 9, 2014 at 12:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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