2009-07-11 6 views
2

今日、私はFirefoxをより良くレンダリングするために自分のウェブサイトを最適化しようとしています! 私の問題はテキストシャドーとフォントウェイトのプロパティです...私はfirefoxのためだけにカスタム値を設定したいと思います(私のウェブサイトは互換性があるので、私はIE互換性は必要ありません)。しかし、私は使用するつもりはありませんこれらの2つのプロパティのためだけに別のスタイルシート! これを行う方法はありますか?または、私はユーザーエージェントをフィルタリングし、Firefox用のカスタマイズされたスタイルシートを読み込むためにPHPスクリプトを使用する必要がありますか?firefox(Gecko)条件付きスタイルシート

ありがとうございます!

答えて

2

text-shadowをサポートするブラウザのみをサポートしたいと思われるようですが、なぜFirefoxをターゲットにするのですか? text-shadowをサポートしているブラウザでは、font-weightを変更するだけです。しかし、これは完了したよりも簡単です。

ブラウザスニファは、Firefox 3.5とそれ以前のバージョンを区別できない限り動作しません。 KahWeeにリンクされているものはこれを達成できませんでしたが、ブラウザのスニッフィングを推奨しません。これはベストプラクティスではありません。

私の代わりにtext-shadowで使用するために意味されるものは何でもfont-weightを設定することはお勧めし、再び元への訪問者のブラウザの大半をリセットする条件付きIE、非陰にfont-weightが含まれるであろう。 2003年以降

  • のFirefox 3.5+
  • オペラ9.5以降
  • サファリ1.1+(:

    例:これにより

    <style type="text/css" media="screen"> 
        .some-text { 
         color: #fff; 
         font-weight: bold; 
         text-shadow: #000 0.1em 0.1em 0.2em; 
        } 
    </style> 
    
    <!--[if IE]> 
    <style type="text/css" media="screen"> 
        .some-text { 
         font-weight: normal; 
         text-shadow: none; /* Does nothing now, but explicitly define NONE 
          for future IE versions as that is what is intended */ 
        } 
    </style> 
    <![endif]--> 
    

    あなたはこれらのブラウザで適切なfont-weighttext-shadowを実現します!)

  • クロム2.0+
  • Konquerorの3.4+

そして、あなたはあなたがDropShadow()filter式を使用することができますが、私は個人的に独自のCSSの拡張機能を使用することはお勧めしませんIEに影を落としたい場合。

Firefox3.0以下、Opera 9.2x以下のような古い非IEブラウザの場合、唯一の本当の「損失」はfont-weightになります。

これは、JavaScriptやPHPブラウザのほうが、古いブラウザのサブセットが非常に限られているため、font-weightを変更する価値がありますか?

答えが「はい」の場合、this oneのようなPHPブラウザのスニファがあります。

+0

ちょっとメモしておきますが、PHPスニッファはFirefox 3.5用の新しいエントリーを必要とします(これは他の多くのブラウザーと同様です)。また、 'eregi()'を大量に使用しています。 PHP 5.3.0。 – jonwd7

+0

それは非難されたらどうしますか? preg関数を使用しています... – usoban

+0

OK?それは修正できないと言ったのですか?その意味は、スクリプトにエントリを追加している場合は、すべてを 'eregi()'から移動することができるということです。しかし、ニックピッキングのおかげで... – jonwd7

1

条件はIE専用です。申し訳ございません。おそらくそれらの機能のいくつかは、あなたを助けることができる、彼らはgeckoブラウザでのみ働く:Mozilla css extensions

+0

私はこれらの拡張機能を知っていますが、テキストシャドウとフォントウェイトの値を上書きすることはできません。 –

6

これはちょっと遅いですが、私のような人が上記の答えを聞いて喜んでいなかった場合、それを行う方法があります。

<html> 
    <head> 
     <style type="text/css"> 
      #myDiv 
      { 
       background-color:blue; 
       width: 100px; 
       height: 100px; 
      } 

      @-moz-document url-prefix() 
      { 
       #myDiv 
       { 
        background-color: red; 
       } 
      } 
     </style> 
    </head> 
    <body> 
     <div id="myDiv"></div> 
    </body> 
</html> 
+0

あなたは天才です。これをありがとうございました。 – Trip

+0

驚くばかり - ChromeとFirefoxの間で垂直方向に1ピクセル違うものを修正するために探していたもの。 – Khorkrak