2012-07-21 6 views
5

私はMediaWikiでメディアクエリを使って反応するスキンを手に入れようとしています。私はいくつかの奇妙な動作をトラブルシューティングしています。私はwikiページにテストdiv要素を追加した場合MediaWikiでMedia Queriesが動作しますか?

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

そして、メディアクエリを追加:さまざまな場所に...

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

を、スタイルは、特定のブラウザに適用されます。たとえば、次のように

私はアクティブスキンの "screen.css" ファイルに追加した場合は、他のすべての働き方に住ん:

  • のiPad:NO
  • iPhone4の:NO
  • クローム20.0 XP +マック:NO
  • のFirefox 14.0.1 XP +マック:YES

私はすべての皮膚に適用される一般的な皮膚の "shared.css" ファイルにそれを追加した場合:

  • のiPad:NO
  • iPhone4の:NO
  • クローム20.0 XP +マック:NO
  • のFirefox 14.0.1 XP +マック:YES

私はwikiのにそれを追加した場合"MediaWikiの:Common.css" ページ:

  • のiPad:YES
  • iPhone4の:YES
  • クローム20.0 XP +マック:YES
  • のFirefox 14.0.1 XP +マック:YES

N.B.:通常のスタイルの宣言は、これらの場所のすべてで、として正常に動作します。奇妙なことが出てくるのは、外部ファイルのメディアクエリにラップされているときだけです。これは明らかにブラウザの問題で、MediaWikiのスタイル処理に関する問題があります。 Firefoxはどういう仕組みですか?

Chromeのデベロッパーコンソールでページを確認して、スタイルが「load.php」によってインポートされているように見えることに気付きました。これは、メディアクエリを含むスタイル宣言の大きな結合ラインです。しかし、それをサポートしているブラウザでさえ、それはちょうど適用されていないようです。

誰でもこの現象を解明できますか?私はwikiエディタではなくスタンドアロンのスタイルシートで作業したいと思っています。

更新:

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

要素を検査する場合:

私はFirefoxのWebコンソールの要素を検査するときに同じように、スタイルは、アクティブなスタイルの中で記載されていることにも注意してくださいChromeの開発ツールの要素ブラウザと同じように、スタイルはどこにもリストされていません。

アップデート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" /> 

をスタイルが適切にどこにでも適用されます。

答えて

3

Common.cssにクエリを追加する以外にも、いくつかの方法があります。どちらの方法も、MediaWikiのResource Loaderのスタイルプリプロセスをバイパスしています。これは、バージョン1.17以降の新しいものです。

方法1:

this threadによると:

は(縮小や他のResourceLoader処理なし、生)単一のCSSファイルをロードするには:使用OutputPage :: addStyle(URL、メディア、条件)urlはファイルを直接指します。たとえば、次のように

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

のでinitPage()機能で、/skins/customskin.phpファイルに次の行を追加します。

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

方法2:

へのMediaWikiの開発者からの応答による

:あなたは肌にいると、あなたは何かが、 特定のメディアタイプに適用される別のファイルにそれを入れて、メディアタイプを宣言したい場合は

のリソース定義。それはリソースの 定義のメディアタイプを省略するか、@mediaブロックを使用できるようになります。

'styles' => array('customskin/customstyle.css'), 
:この行で

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

ので、リソース/ resources.phpで、肌の配列コンストラクタでは、この行を置き換えます

関連する問題