CSSでFirefoxのみをターゲットにする

616

条件付きコメントを使用すると、ブラウザ固有のCSSルールでInternet Explorerを簡単にターゲットにできます。

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

時々、Geckoエンジン（Firefox）が誤動作します。他の単一のブラウザーではなく、CSSルールを使用してFirefoxのみをターゲットにする最善の方法は何ですか？つまり、Internet ExplorerがFirefoxのみのルールを無視するだけでなく、WebKitとOperaも無視する必要があります。

注：「クリーン」なソリューションを探しています。JavaScriptブラウザーのスニファーを使用して「firefox」クラスをHTMLに追加しても、私の意見ではクリーンとは言えません。条件付きコメントがIEにのみ「特別」であるように、ブラウザの機能に依存するものを見たいと思います…

css  firefox  css-hack 
— avdgaag
ソース
いくつかの類似した質問とthier関連の答え...で見たいと思うかもしれませんstackoverflow.com/questions/738831/...
— AnonJr
3
WindowsマシンとMacでFirefoxをターゲットにする方法はありますか？
— Kegan Quimby
4
<！-[if Gecko]> ... include ... <！[endif]->
— 定義

回答:

1252

OK、見つけた。これはおそらく最もクリーンで簡単なソリューションであり、JavaScriptをオンにする必要はありません。

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}
<h1>This should be red in FF</h1>
スニペットを展開

さらに別のMozilla固有のCSS拡張に基づいています。これらのCSS拡張機能の完全なリストは、ここにあります：Mozilla CSS拡張機能。

— イオヌ・G・スタン
ソース
17
「@ -moz-document」の後のurl-prefix（）は正確にはどういう意味ですか？ちょっと興味があるんだけど。
— マット
17
@マット、それはそのCSSが適用されるWebサイトをフィルターする方法です。別のオプションは、domain()フィルターを使用することです。たとえば@-moz-document domain(google.com) {...}、囲まれたCSSルールはgoogle.comドメインにのみ適用されます。
— Ionuț G. Stan
10
IEの場合のように、このためにまったく新しいCSSドキュメントを作成する必要がないのが好きです。
— JD Isaacks、2011年
7
@JohnIsaacks IE条件付きコメント用の個別のスタイルシートは必要ありません。インラインにすることができます。そのようにしたいかどうかは別の問題です。
— ディラン
4
この回避策があることを指摘しないことの価値はもはや機能し 2018年3月リリースのFirefox 59のように、：bugzilla.mozilla.org/show_bug.cgi?id=1035091
— ヨルダングレイ
105

更新（@Antoineコメントから）

使用できます @supports

@supports (-moz-appearance:none) {
    h1 { color:red; } 
}
<h1>This should be red in FF</h1>
スニペットを展開

詳細は@supports こちら

— ラーポスト
ソース
11
これは@ -moz-document url-prefix（）の例よりもはるかに優れたソリューションであり、SCSSパーサーでもうまく機能しますが、他のパーサーではそうではありません。
— Alastair Hodgson、2015
1
Firefoxを使用していますが、まだ白いのですが、使用しているバージョンが原因ですか？
— Antoine
3
@Antoineあなたは正しいです！最新バージョンのFFでは機能しませんでした。回答を更新しました。これで動作するはずです。指摘してくれてありがとう！
— laaposto 2017年
83

IE、FF、Chromeの3つの異なるブラウザーに取り組む方法は次のとおりです。

<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]-->
— ワカスアリカーンプアー
ソース
66
私がこれを正しく理解している場合、一番上のものはクロムではなく、FirefoxとIEでオーバーライドするデフォルトの動作を指定するだけです。
— Muhd
3
非常に便利。元Firefox愛好家として、私はこのようにFirefox固有のハックを実行する必要があることを悟りましたが、それが機能する限り、私はそれに耐えることができます。
— SpaceBeers 2012年
.cssファイルに追加する場合、IE検出の提案は機能しません。ただし、HTMLにその方法でスタイルシートを含めることができます。あなたはCSSファイルでIE CSSを持つようにしたい場合は、私はここを見てお勧めします：keithclark.co.uk/articles/...
— Biepbotフォン・スターリング
16

以下は、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をご覧ください。

— ビルジャンド
ソース
1
「セレクターハックの使用」と、提供した例が具体的にどのように機能するかについて、もう少し詳しく説明してもらえますか？ありがとう。
— jj_ 2014年
1
申し訳ありませんが、基本的には最初のセレクターを理解しない他のブラウザーに2番目のセレクターを隠すことです。この場合、理解_:moz-tree-row(hover)できるのはMozillaだけなので、.selector{}後から処理できるのはMozilla だけです。この特定のハックは現在、Firefoxのすべてのバージョンで機能します。詳細については、browserhacks.comを確認してください。
— jj_ 2014年
1
私はMedia Query Hack：\ @media screenと（-moz-images-in-menus：0）{}を使用しました。これは\ @media screenと（-webkit-min-device-pixel-ratio：0）とうまく調和し、 Visual Studioはそれを使用して警告をスローしません。
— Dan Randolph
1
-moz-images-in-menus：0はFirefox 52で削除され
— ました
13

まず、免責事項。以下に提示する解決策については、あまり主張しません。私が書いた唯一のブラウザー固有のCSSはIE（特にIE6）用ですが、そうではなかったと思います。

今、解決策です。あなたはそれをエレガントにするように頼んだので、それがどれほどエレガントかはわかりませんが、Geckoプラットフォームのみをターゲットとすることは間違いありません。

このトリックは、JavaScriptが有効になっていて、Firefoxと他のすべてのGeckoベースの製品で内部的に頻繁に使用されているMozillaバインディング（XBL）を利用している場合にのみ機能します。比較すると、これはIEの動作CSSプロパティに似ていますが、はるかに強力です。

私のソリューションには3つのファイルが関係しています。

  1. ff.html：スタイルを設定するファイル
  2. ff.xml：Geckoバインディングを含むファイル
  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;
}

更新： 上記のソリューションはそれほど良くありません。新しいLINK要素を追加する代わりに、BODY要素にその「firefox」クラスを追加するほうがよいでしょう。上記のJSを次のJSに置き換えるだけで可能です。

this.className += " firefox";

このソリューションは、Dean Edwardsのmoz-behaviorsに触発されました。

— イオヌ・G・スタン
ソース
11

-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]-->
— レイジャックス
ソース
7

あなたのアイデアのバリエーションはserver-side USER-AGENT detector、ページに添付するスタイルシートを判別するを使用することです。このようにして、firefox.css, ie.css, opera.css, etc。

あなたはそれをきれいだとは思わないかもしれませんが、JavaScript自体で同様のことを成し遂げることができます。

私が持っていることによって同じようなことを行っているdefault.css含まれてall common styles and then specific style sheetsオーバーライドする、またはデフォルトを高めるために添加されているが。

— ケコア
ソース
それは、素晴らしくて安定したアプローチのようなものです＆mdash; 感謝＆mdash; それはまだブラウザのスニッフィングに依存していますが。GeckoのみのCSSルールなど、機能に依存するものを使用したいと思います。私は同じ基本的なアプローチを使用します。デフォルトのスタイルとブラウザ固有のアドオンです。
— avdgaag
1
@avdaag：ほとんどの場合、機能検出が推奨されますが、特定のレンダリングエンジンのバグを「修正」するためにハックを挿入しようとしている場合、ユーザーエージェントをターゲットにすることが理論的には最適なソリューションです。あなたは未知のブラウザを差別していません。そして、ユーザーエージェントフィールドは、ブラウザーが使用しているレンダリングエンジンを通知することになっているため、まれなGeckoブラウザーが登場した場合でも、修正が提供されます。とは言っても、ブラウザー検出の不適切な使用により、多くのブラウザーがユーザーエージェント文字列を偽造しています。したがって、実際にはうまくいかない可能性があります。
— Lèseはmajesté
6

Firefox Quantum 57には、StyloまたはQuantum CSSと総称されるGeckoの大幅な（そして潜在的には重大な）改善点があり、レガシーバージョンのFirefoxとFirefox Quantumを区別しなければならない状況に遭遇するかもしれません。

ここで私の答えから：

あなたは使用することができる@supportsとcalc(0s)と一緒に表現@-moz-documentスタイロためのテストに- Geckoは時間値をサポートしていないcalc()表現が、スタイロを行います。

@-moz-document url-prefix() {
  @supports (animation: calc(0s)) {
    /* Stylo */
  }
}

概念実証は次のとおりです。

body::before {
  content: 'Not Fx';
}

@-moz-document url-prefix() {
  body::before {
    content: 'Fx legacy';
  }

  @supports (animation: calc(0s)) {
    body::before {
      content: 'Fx Quantum';
    }
  }
}
スニペットを展開

Firefoxのレガシーバージョンをターゲットにするのは少し注意が必要です@supports。Fx22 以降のをサポートするバージョンだけに関心がある場合は、次のことだけ@supports not (animation: calc(0s))が必要です。

@-moz-document url-prefix() {
  @supports not (animation: calc(0s)) {
    /* Gecko */
  }
}

...しかし、古いバージョンでさえサポートする必要がある場合は、上の概念実証で示したように、cascadeを使用する必要があります。

— ボルトクロック
ソース
3

これを行う唯一の方法は、さまざまなCSSハックを使用することです。これにより、次のブラウザー更新時にページが失敗する可能性が高くなります。どちらかといえば、jsブラウザースニファーを使用するよりも安全性が低くなります。

— jvenema
ソース
0

次のコードは、Style lint警告をスローする傾向があります。

@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}

代わりに 

@-moz-document url-prefix('') {
    h1 {
        color: red;
    }
}

私を助けた！ここからスタイルリント警告の解決策を得ました

— カイラス
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.