Geek asks and answers

Do media queries affect MediaWiki?

I am trying to get a responsive skin working in MediaWiki with media queries, and I was looking for some weird actions.

If I add a test div to the wiki page:

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

And then add the media query:

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

... in different places, the style is applied only in certain browsers. For instance:

If I add it to the active skin "screen.css", 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 shared skin "shared.css", which applies to all skins:

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

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

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

N.B.: , . - , . , -, , MediaWiki. Firefox -?

, Chrome , , "load.php" , -; , , , .

- ? , .

Update:

, - Firefox , :

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

Chrome Development Tools .

2:

:

<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;*" />

:

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

.

+5
1

, Common.css. MediaWiki Resource Loader, 1.17.

1:

:

css (, ResourceLoader): OutputPage:: addStyle (url, media, condition), url . :

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

, /skins/customskin.php initPage():

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

2:

MediaWiki , :

, , - , . , @media.

, resources/resources.php, :

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

:

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

More articles:


All Articles