媒体查询是否可以在MediaWiki中使用?
我试图通过媒体查询获得在MediaWiki中工作的响应式皮肤,并解决了一些奇怪的行为。媒体查询是否可以在MediaWiki中使用?
如果我添加一个测试div来一个wiki页面:
<div id="testing">TESTING</div>
,然后添加一个媒体查询:
@media screen {
#testing {background-color: green;}
}
...到各个地方,风格只适用于某些浏览器。例如:
如果我把它添加到活跃皮肤的 “screen.css” 的文件,在所有其他工作方式生活:
- 的iPad:NO
- 的iPhone4:NO
- 铬20.0 XP + MAC:NO
- 火狐14.0.1 XP + MAC:是
如果我把它添加到常见的皮肤的 “shared.css” 的文件,它适用于所有的皮肤:
- 的iPad:NO
- 的iPhone4:NO
- Chrome的20.0 XP + MAC:NO
- 火狐14.0.1 XP + MAC:是
如果我把它添加到wiki的“链接到MediaWiki:Common.css” 页:
- iPad的:是
- iPhone4的:是
- Chrome的20.0 XP + MAC:是
- 火狐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&lang=en&modules=mediawiki.legacy.commonPrint%2Cshared%7Cskins.customskin&only=styles&skin=customskin&*" />
直接链接到主题:
<link rel="stylesheet" href="wiki/skins/customskin/screen.css" />
款式都是正确处处适用。
有一对夫妇的方式做到这一点,除了加入查询Common.css。这两种方式都绕过了MediaWiki Resource Loader的样式预处理,这是从1.17版本开始的新增功能。
方法1:
根据this thread:
要加载的单个CSS文件(原始的,而不缩小等的ResourceLoader处理):使用OutputPage :: addStyle(URL,媒体,条件)url直接指向一个文件。例如:
$out->addStyle('modules/IE70Fixes.css', 'screen', 'IE 7');
所以加入这一行的/skins/customskin.php文件,在initPage()
功能:
$out->addStyle('customskin/customstyle.css', 'screen');
方法2:
据一个链接到MediaWiki开发商this bug I filed响应:
如果你是在皮肤和你想要的东西,以适用于 特定的媒体类型,把它放在一个单独的文件,并声明该媒体类型在 的资源定义。无论是或忽略媒体类型的资源 定义,你就可以使用@media块。
因此,在资源/ resources.php,在皮肤的数组构造,替换此行:
'styles' => array('customskin/customstyle.css' => array('media' => 'screen')),
这一行:
'styles' => array('customskin/customstyle.css'),