媒体查询在 MediaWiki 中有效吗？

Question

我正在尝试通过媒体查询在 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”作为一大串样式声明导入的，包括我的媒体查询；但似乎它只是没有被应用，即使在支持它的浏览器中也是如此。

谁能解释一下这种行为？我更喜欢使用独立的样式表而不是 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" />

样式适用于任何地方。

Answer 1

除了将查询添加到 Common.css 之外，还有几种方法可以做到这一点。这两种方式都涉及绕过 MediaWiki 资源加载器的样式预处理，这是 1.17 版的新功能。

方法一：

根据this thread：

要加载单个 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');

方法二：

根据 MediaWiki 开发者对this bug I filed的回复：

如果您喜欢皮肤，并且想要将某些东西涂抹在皮肤上 特定媒体类型，将其放在单独的文件中并在其中声明媒体类型 资源定义。要么，要么省略资源中的媒体类型 定义，您将能够使用@media 块。

所以，在 resources/resources.php 中，在皮肤的数组构造函数中，替换这一行：

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

用这一行：

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