php - 媒体查询在 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:是

如果我将它添加到维基的“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 :

To load a single css file (raw, without minification and other ResourceLoader processing): Use OutputPage::addStyle( url, media, condition ) where url points to a file directly. For example:

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

因此，将此行添加到/skins/customskin.php 文件中的 initPage() 函数中:

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

方法二:

根据 MediaWiki 开发人员对 this bug I filed 的回复:

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.

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

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

用这一行:

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