媒体查询是否在MediaWiki中有效？

Question

我正在尝试使用媒体查询在MediaWiki中运行响应式皮肤,我正在排除一些奇怪的行为.

如果我将一个测试div添加到维基页面:

<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 Console中检查元素时,样式列在活动样式中,如下所示:

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 版中新增）的样式预处理。

方法一：

根据这个线程：

要加载单个 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 开发人员对我提交的此错误的回复：

如果您在皮肤中并且想要将某些内容应用于特定媒体类型，请将其放入单独的文件中并在资源定义中声明媒体类型。或者在资源定义中省略媒体类型，您就可以使用 @media 块。

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

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

有了这一行：

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