web-dev-qa-db-ja.com

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

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

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

ときどき誤動作をするのはGeckoエンジン（Firefox）です。 あなたのCSSルールでFirefoxだけをターゲットにし、他の1つのブラウザをターゲットにしないための最良の方法は何でしょうか？ つまり、Internet ExplorerはFirefoxのみの規則を無視するだけでなく、WebKitやOperaも無視するべきです。

注意： 私は 'きれいな'解決策を探しています。 JavaScriptブラウザのスニファを使用してHTMLに「firefox」クラスを追加しても、私の考えではクリーンとは言えません。条件付きコメントがIEにとって「特別な」ものに過ぎないように、私はむしろブラウザの機能に依存する何かを見たいのですが…

cssfirefoxcss-hack
559
avdgaag

わかりました。これはおそらく最もクリーンで簡単な解決策であり、JavaScriptがオンになっていることには依存しません。

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}
<h1>This should be red in FF</h1>

それはまた別のMozilla特有のCSS拡張に基づいています。これらのCSS拡張の全リストはここにあります： Mozilla CSS拡張 。

1145
Ionuț G. Stan

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]-->
79
Waqas Ali Khan Puar

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

あなたは@supportsを使うことができます

@supports (-moz-appearance:none) {
    h1 { color:red; } 
}
<h1>This should be red in FF</h1>

@supportsここの詳細

61
laaposto

これは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 にアクセスしてください。

13
Hbirjand

まず第一に、免責事項。私が以下に提示する解決策を実際には主張しません。私が書いた唯一のブラウザ特有の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要素にthat "firefox"クラスを追加するとよいでしょう。上記のJSを次のように置き換えるだけで可能です。

this.className += " firefox";

この解決策は に触発された/ - Dean Edwardsのmoz-behaviors 。

13
Ionuț G. Stan

エンジン固有の規則を使用すると、効果的なブラウザターゲティングが保証されます。

<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]-->
11
Rayjax

あなたの考えのバリエーションは、どのスタイルシートをページに添付するべきかについて理解するserver-side USER-AGENT detectorを持つことです。このようにあなたはfirefox.css, ie.css, opera.css, etcを持つことができます。

Javascript自体で同様のことを達成できますが、それをきれいとは見なさないかもしれません。

default.cssを含むall common styles and then specific style sheetsをオーバーライドまたは追加するために追加することで同様のことができました。

7
Kekoa

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

3
jvenema

Firefox Quantum 57は、まとめてStyloまたはQuantum CSSとして知られているGeckoの大幅な、そして場合によっては壊れた改良を加えているので、Firefoxの旧バージョンとFirefox Quantumを区別しなければならない状況にあるかもしれません。

私の答えから ここ ：

Styloをテストするために@supportsと一緒にcalc(0s)式と一緒に@-moz-documentを使用することができます - Geckoはcalc()式で時間値をサポートしませんがStyloはします：

@-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をサポートするバージョン（Fx 22以降）だけに興味があるなら、@supports not (animation: calc(0s))はあなたが必要とするすべてです：

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

...しかし、さらに古いバージョンをサポートする必要がある場合は、上記の概念実証で示されているように、 カスケード を使用する必要があります。

3
BoltClock

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

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

代わりに

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

助けてくれた！ からスタイルの毛羽立ち警告の解決策を得ました -

0
Kailas

CSSサポート サイドノートとして、/にはJavaScriptへのバインディングがあります。

if (CSS.supports("( -moz-user-select:unset )")){
  console.log("FIREFOX!!!")
 }

https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions

0
Cryptopat