Issue with media queries in CSS

[andru]

Reported by Daniel....

I had to comment out a few lines of core MediaWiki code to get
bootstrap to work with IE, even IE 11. It appears that ResourceLoader
does some strange stuff, and I am not sure if this is a bug in
Skinny/Booty or just a bad idea in the way the MediaWiki devs are
handling CSS resources.

Here, in a nutshell, is the issue.

ResourceLoader.php has a function called makeCombinedStyles() that
merges CSS files into one big glob. And if the CSS file are intended
for "screen" display, it wraps all of the CSS definitions in a media
query, like this:

"@media screen {" + all_my_css +"}"

For most browsers, this is not a problem. However, IE, even the most
recent versions of IE, do not support nested media queries, so this
doesn't work:

"@media screen { @media foo { } }"

So, if your CSS already has media queries in it, then the act of
makeCombinedStyles() wrapping the CSS in a media query actually breaks
the CSS for all versions of IE, because it turns all of bootstrap's
intentionally non-nested media queries into nested media queries,
which IE then ignores.

There are some workarounds:

1. Make sure the CSS resource has a media value of '' or 'all' -- that
   way, it is not wrapped in a media query when makeCombinedStyles() is
   called.
2. Comment out the core MediaWiki CSS code that wraps 'screen'
   resources in a media query.

I am not sure what the "right" solution is. If we should expect
ResourceLoader.php to be able to serve arbitrary CSS and have it work
in all browsers, then it is simply not okay to wrap the CSS in a media
query.

If the current MediaWiki behavior is the "correct" behavior, then any
CSS marked for "screen" display must not have embedded media queries,
or it will end up broken for all IE users.

I am not sure if this is a MediaWiki bug/oversight or a Booty/Skinny
bug, so I wanted to get your opinion on it.