Does XenForo autofix broken CSS?

Luxus

Well-known member
The reason I'm asking this is because I tested IE only hacks, but XenForo "fixed" them so that they worked with all other browsers.

I used several IE 8 hacks, for instance

height: 200px\9;

This should work for all IE versions only according to multiple sources. I have tested this hack on MyBB and XenForo. While with MyBB this hack worked as it should for IE only, with XenForo it worked for all browsers. After investigating the CSS in firebug I saw that XenForo has fixed this CSS to

height: 200px;

without the \9.

Does that mean that IE hacks are not possible with XenForo?

PS: I'm talking about hacks, not browser conditionals.
 
Before I got the tip from Yorick in this thread I prepared a CSS solution for collapsing and expanding subforums with the transition attribute applied to height.

This is the code I was using:
Code:
/** START -- CSS3 Collapse function for selected subforums. Replace X with node ID -- START **/

.nodeX .forum_view .pageContent > fieldset {
    transition: max-height 2s ease 0s;
    -moz-transition: max-height 2s ease 0s;
    -webkit-transition: max-height 2s ease 0s;
    -o-transition: max-height 2s ease 0s;
    max-height: 0px;
    max-height: 350px\9; /** IE hack because transition doesn't work with IE **/
}
.nodeX .forum_view .pageContent > fieldset:hover {
    max-height: 350px;
}
.nodeX .forum_view .titleBar:hover + fieldset {
    max-height: 350px;
}

/** END -- CSS3 Collapse function for selected subforums. Replace X with node ID -- END **/

The expected result would be hidden subforums for all major browsers except IE. With IE all subforums should be visible all the time, because IE doesn't support the transition attribute. However max-height: 0px has been overwritten/ignored and XenForo applied max-height: 350px instead.

Weird enough, I have just tested this with the global color attribute and it worked as expected.
 
I still think browser conditionals are the best way for this.

<!--[if IE]>
<xen:require css="IE.css" />
<![endif]-->

IE.css could contain all of your IE specific changes.

You could either call that in PAGE_CONTAINER (so it's available in every page) or paste that code into any template that specifically requires IE specific changes.
 
Yeah, I could have done that, but I was lazy so I chose a quick dirty css hack :P. Also if this is some sort of a bug, I would not have discovered it without using css hacks. Thanks to the toggleme add-on for me this is all history though.
 
After investigating the CSS in firebug I saw that XenForo has fixed this CSS to


This is the source of the problem. Luxus, Firebug does not actually display the CSS exactly as it is written in the source. Rather, it (or technically, the browser) parses the CSS and then Firebug re-writes CSS from the browser's model of it.

As a result, Firebug will not show malformed/incorrect CSS syntax. Either it will show nothing for that particular attribute, or it will show what the browser interprets the attribute's value to be.

Code:
max-height: 350px\9;
is not valid CSS, but in this case Firefox is simply interpreting it as "350px", dropping the \9 since it doesn't know how to handle it.

As a result, Firebug shows
Code:
max-height: 350px;
in the Element Inspector.

Even clicking to go to the line in the CSS file where that rule occurs will not show the actual CSS source. Check the raw CSS source in your browser and you will see that the max-height:350px\9; is there as it should be.

ZZzCU.png
 
Thanks for the good explanation :) But, why has the first max-height been overwritten by a hack that is supposed to work on IE only?
Because Firefox is interpreting max-height: 350px\9; as max-height: 350px; so to the browser it looks like this:

Code:
max-height: 0px;
max-height: 350px;

According to CSS rules, since these are within the same selector, the later one takes precedence and overrides the previous one.

You will likely need to put the max-height: 350px in an IE conditional.

I'm not familiar with this specific CSS hack but it looks like it isn't working as you expected it to because other browsers are interpreting it, not just ignoring it.
 
I guess there is a reason why people call browser css hacks bad coding and unreliable. I will make sure to avoid them in the future and use browser conditionals if necessary. Thank you again :)
 
Top Bottom