Search code examples
phpcssmediawikimedia-queries

Do Media Queries work in MediaWiki?

I'm trying to get a responsive skin working in MediaWiki with media queries, and I'm troubleshooting some weird behavior.

If I add a test div to a wiki page:

<div id="testing">TESTING</div>

And then add a media query:

@media screen {
  #testing {background-color: green;}
}

...to various places, the style only applies in certain browsers. For example:

If I add it to the active skin's "screen.css" file, where all the other working styles live:

  • iPad: NO
  • iPhone4: NO
  • Chrome 20.0 XP+Mac: NO
  • Firefox 14.0.1 XP+Mac: YES

If I add it to the common skin's "shared.css" file, which applies to every skin:

  • iPad: NO
  • iPhone4: NO
  • Chrome 20.0 XP+Mac: NO
  • Firefox 14.0.1 XP+Mac: YES

If I add it to the wiki's "MediaWiki:Common.css" page:

  • iPad: YES
  • iPhone4: YES
  • Chrome 20.0 XP+Mac: YES
  • Firefox 14.0.1 XP+Mac: YES

N.B.: A regular style declaration works as expected in all of these locations. It's only when wrapped in a media query in an external file that the weirdness appears. It's apparently a browser issue, compounded with a MediaWiki style-handling issue. What is Firefox doing differently?

I've also noticed when examining the page with Chrome's Developer Console that the styles appear to be imported by "load.php" as one big conjoined line of style declarations, including my media query; but it seems it's just not being applied, even in browsers which support it.

Can anyone shed some light on this behavior? I'd prefer to work in standalone stylesheets rather than in the wiki editor.

Update:

I notice also that when inspecting the element in the Firefox Web Console, the style is listed among the active styles, like so:

load.php:1 @media screen
#testing {
  background-color: green;
}

When inspecting the element the same way in Chrome's Development Tools element browser, the style is not listed anywhere.

Update 2:

If I replace this line in my theme:

<link rel="stylesheet" href="/wiki/load.php?debug=false&amp;lang=en&amp;modules=mediawiki.legacy.commonPrint%2Cshared%7Cskins.customskin&amp;only=styles&amp;skin=customskin&amp;*" />

With a direct link to the theme:

<link rel="stylesheet" href="wiki/skins/customskin/screen.css" />

The styles are applied properly everywhere.

Solution

  • There are a couple of ways to do it besides adding the queries to Common.css. Both ways involve bypassing the style preprocessing of MediaWiki's Resource Loader, new as of version 1.17.

    Method 1:

    According to this thread:

    To load a single css file (raw, without minification and other ResourceLoader processing): Use OutputPage::addStyle( url, media, condition ) where url points to a file directly. For example:

    $out->addStyle( 'modules/IE70Fixes.css', 'screen', 'IE 7' );

    So add this line to the /skins/customskin.php file, in the initPage() function:

    $out->addStyle( 'customskin/customstyle.css', 'screen');

    Method 2:

    According to a response from a MediaWiki developer to this bug I filed:

    If you're in a skin and you want something to apply to a specific media type, put it in a separate file and declare the media type in the resource definition. Either that or omit the media type in the resource definition and you'll be able to use @media blocks.

    So, in resources/resources.php, in the skin's array constructor, replace this line:

    'styles' => array( 'customskin/customstyle.css' => array( 'media' => 'screen' ) ),

    With this line:

    'styles' => array( 'customskin/customstyle.css' ),