Last modified: 2013-10-23 18:17:03 UTC
Media queries are ignored when included in a skin's css file and loaded through load.php. To test: add a style declaration in a media query to a skin's screen.css: @media screen { body {background-color: orange;} } The only browser I've found where the style is respected in Firefox 14.0.1, on Mac and PC. Media queries function as expected when added to MediaWiki:Common.css. If the css file is added directly to the header with a <style> tag, media queries function as expected.
Your skin resource definition probably looks something like: 'skins.vector' => array( 'styles' => array( 'common/commonElements.css' => array( 'media' => 'screen' ), 'common/commonContent.css' => array( 'media' => 'screen' ), 'common/commonInterface.css' => array( 'media' => 'screen' ), 'vector/screen.css' => array( 'media' => 'screen' ), ), 'scripts' => 'vector/vector.js', 'remoteBasePath' => $GLOBALS['wgStylePath'], 'localBasePath' => $GLOBALS['wgStyleDirectory'], ), As you can see, each file is already assigned a media type. Trying to use @media blocks in those files will result in nested @media blocks, so obviously that doesn't work. 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.
Understood, thank you.
