5

メディア クエリを使用して MediaWiki でレスポンシブ スキンを動作させようとしていますが、奇妙な動作のトラブルシューティングを行っています。

テスト div を wiki ページに追加すると、次のようになります。

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

次に、メディア クエリを追加します。

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

...さまざまな場所に、スタイルは特定のブラウザーでのみ適用されます。例えば：

他のすべての作業スタイルが存在するアクティブなスキンの「screen.css」ファイルに追加すると、次のようになります。

  • iPad: いいえ
  • iPhone4: いいえ
  • Chrome 20.0 XP+Mac: いいえ
  • Firefox 14.0.1 XP+Mac: はい

すべてのスキンに適用される共通スキンの「shared.css」ファイルに追加すると、次のようになります。

  • iPad: いいえ
  • iPhone4: いいえ
  • Chrome 20.0 XP+Mac: いいえ
  • Firefox 14.0.1 XP+Mac: はい

それを wiki の "MediaWiki:Common.css" ページに追加すると:

  • iPad: はい
  • iPhone4: はい
  • Chrome 20.0 XP+Mac: はい
  • Firefox 14.0.1 XP+Mac: はい

注意: 通常のスタイル宣言は、これらすべての場所で期待どおりに機能します。奇妙さが現れるのは、外部ファイルのメディア クエリにラップされた場合だけです。どうやらこれはブラウザーの問題であり、MediaWiki のスタイル処理の問題が組み合わさったものです。Firefox の違いは何ですか?

また、Chrome の開発者コンソールでページを調べると、スタイルが "load.php" によってスタイル宣言の 1 つの大きな結合行としてインポートされているように見えることにも気付きました。しかし、それをサポートしているブラウザであっても、適用されていないようです。

誰でもこの動作に光を当てることができますか? wiki エディターではなく、スタンドアロンのスタイルシートで作業したいと思います。

アップデート：

また、Firefox Web コンソールで要素を調べると、次のようにスタイルがアクティブなスタイルの中にリストされていることに気付きました。

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

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

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

4

1 に答える 1

3

Common.css にクエリを追加する以外に、いくつかの方法があります。どちらの方法でも、MediaWiki のリソース ローダー (バージョン 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' ),
于 2012-07-23T20:31:28.573 に答える