firefox - 仅适配Firefox的CSS

  显示原文与译文双语对照的内容

用 browser-specific CSS rules,使用条件注释可以很容易地目标


<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->

有时候是壁虎引擎( Firefox ) 引起的。 你的CSS规则,而不是单个其他只会是最佳方式目标 Firefox 什么浏览器? ,不仅 IE 应该忽略Firefox-only规则,而且 web kit和 Opera 应该。

于一个'清理'相关 solution, 注意: 我 looking. 使用JavaScript浏览器 嗅探器 将'Firefox'类添加到我的HTML中并不符合我的观点。 我更愿意看一些依赖于浏览器功能的东西,很像条件注释只是'特殊'到 IE 。

时间:

好了,我找到了。这可能是最干净和容易的解决方案,而且不依赖于JavaScript打开。


<!DOCTYPE html>

<html>
<head>
<style type="text/css">
@-moz-document url-prefix() {
 h1 {
 color: red;
 }
}
</style>
</head>
<body>

<h1>This should be red in FF</h1>

</body>
</html>

它基于另一个Mozilla特定的CSS扩展。 这里有一个完整的CSS扩展列表:

https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

下面是如何处理三种不同浏览器的方法: IE,FF和 Chrome


 <style type='text/css'>
/*This will work for chrome */
 #categoryBackNextButtons
 {
 width:490px;
 }
/*This will work for firefox*/
 @-moz-document url-prefix() {
 #categoryBackNextButtons{
 width:486px;
 }
 }
 </style>
 <!--[if IE]>
 <style type='text/css'>
/*This will work for IE*/
 #categoryBackNextButtons
 {
 width:486px;
 }
 </style>
 <![endif]-->

首先,免责声明。 我并不真正提倡我下面的解决方案。 唯一的浏览器特定的CSS我写的是 IE ( 尤其 IE6 ),虽然我希望它不是。

现在,解决方案。你要求它是优雅的,所以我不知道它是多么优雅,但是它确实会指向壁虎平台。

诀窍只有在启用JavaScript并使用Mozilla绑定( XBL ) 时才奏效,绑定在 Firefox 和所有其他Gecko-based产品中被大量使用。 作为一个比较,这类似于 IE 中的CSS属性,但更强大。

我的解决方案中涉及三个文件:

  1. ff.html: 要样式的文件
  2. ff.xml: 壁虎绑定的文件 containg
  3. ff.css: Firefox 特定样式

ff.html


<!DOCTYPE html>

<html>
<head>
<style type="text/css">
body {
 -moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>

<h1>This should be red in FF</h1>

</body>
</html>

ff.xml


<?xml version="1.0"?>

<bindings xmlns="http://www.mozilla.org/xbl">
 <binding id="load-mozilla-css">
 <implementation>
 <constructor>
 <![CDATA[
 var link = document.createElement("link");
 link.setAttribute("rel","stylesheet");
 link.setAttribute("type","text/css");
 link.setAttribute("href","ff.css");

 document.getElementsByTagName("head")[0]
. appendChild(link);
 ]]>
 </constructor>
 </implementation>
 </binding>
</bindings>

ff.css


h1 {
 color: red;
}

更新:上面的解决方案不是那么好。 如果不是添加一个新的链接元素,它将在BODY元素上添加"Firefox"类。 这是有可能的,只需替换上面的JS:


this.className +=" firefox";

这个解决方案的是由 Dean Edwards'moz-behaviors的。

下面是一些针对 Firefox 浏览器的浏览器攻击,

使用选择器攻击。


_:-moz-tree-row(hover),. selector {}

JavaScript黑客


var isFF =!!window.sidebar;

var isFF = 'MozAppearance' in document.documentElement.style;

var isFF =!!navigator.userAgent.match(/firefox/i);

媒体查询黑客

这将继续运行,Firefox 3.6和更高版本


@media screen and (-moz-images-in-menus:0) {}

如果你需要更多信息,请访问 browserhacks

使用-engine特定规则确保有效的浏览器定位。


<style type="text/css">

//Other browsers
 color : black;


//Webkit (Chrome, Safari)
 @media screen and (-webkit-min-device-pixel-ratio:0) { 
 color:green;
 }

//Firefox
 @media screen and (-moz-images-in-menus:0) {
 color:orange;
 }
</style>

//Internet Explorer
<!--[if IE]>
 <style type='text/css'>
 color:blue;
 </style>
<![endif]-->

...