Chrome/Opera 固有のスタイルシートを作成するにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/945428

質問

しなければならない クロム/オペラ クライアントが望んでいたフォント置換スクリプトが原因でハッキングされ、問題が発生しました...残念ですが、IE6 ～ 7、FF2 ～ 3、Safari ではすべて動作します。スクリプト自体を修正する方法はなく、CSS と HTML を使用してハッキングすることしかできません。

次の行で何かをしようとしています:

<!--[if IE 6]>
   <link rel="stylesheet" href="ie6.css" type="text/css" media="screen" />
<![endif]-->

出来ますか？

次のようなChrome固有の修正を行うこの方法を確認しました。

body:nth-of-type(1) .elementOrClassName
{
/* properties go here */
}

これは稼働していますか？もっと簡単な方法はありますか？ オペラはどうですか？

ありがとう！

役に立ちましたか？

解決

これを行うためのクリーンな JavaScript の方法: http://rafael.adm.br/css_browser_selector/

これは、CSS で次のように使用できる HTML の body タグにブラウザー固有のクラスを広告します。

.opera #thingie, .chrome #thingie {
  do: this;
}

お役に立てれば。

他のヒント

CSS ハックを避けてください。壊れてしまいます。

グーグルクローム：

@media not all and (-webkit-min-device-pixel-ratio:0)
{  
    #example
    {
        width: 200px;
    }
}

サファリ：

@media screen and (-webkit-min-device-pixel-ratio:0)
{
    #example
    {
        width: 200px;
    }
}

オペラ：

@media not screen and (1)
{
    #example
    {
        width: 200px;
    }
}

CSS を Opera 11 にのみ適用しますか?

CSS を Opera のみに表示させる方法

LTE Opera 10 向けの将来性のある CSS ハック

Google (および Safari) の場合は、次のように単純に使用できます。

<link rel="stylesheet" href="style-sheet_chrome.css" type="text/chrome/safari" />

これにより、WebKit 固有のスタイルシートがロードされます。「タイプ」には任意の名前を付けることができますが、必ず含める必要があります。

そのままスタイルシートを自由に作成すると、Webkit 以外のすべてのブラウザはそれを無視します。

Opera では上記のハックを使用する必要があります。以下が私にとって最もうまくいきました：

@media not screen and (1)
    {
    #example
    {
    width: 200px;
    }
}

これを使用して、ブラウザー固有の @font-face 宣言をロードしました。

私はこのソリューションをテストしていませんが、によると このブログエントリー, Chrome では次のことを試してみてください。

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
{
     var chromeCss = document.createElement("link");

     chromeCss.rel = "stylesheet";
     chromeCss.href = "ChromeStyle.css";

     document.getElementsByTagName("head")[0].appendChild(chromeCss);
}

.ie - Internet Explorer (すべてのバージョン)
.ie10 - Internet Explorer 10.x
.ie9 - Internet Explorer 9.x
.ie8 - Internet Explorer 8.x
.ie7 - Internet Explorer 7.x
.ie6 - Internet Explorer 6.x
.ie5 - Internet Explorer 5.x
.gecko - Firefox (すべてのバージョン)、Camino、SeaMonkey
.ffxx - Firefox xx (xx を特定のバージョンの番号に変更) new
.ff4 - Firefox 4.x
.ff3 - Firefox 3.x
.ff2 - Firefox 2.x
.opera - Opera (すべてのバージョン)
.opera12 - Opera 12.x
.opera11 - Opera 11.x
.opera10 - オペラ 10.x
.opera9 - オペラ 9.x
.opera8 - オペラ 8.x
.konqueror - Konqueror
.webkit - Safari、NetNewsWire、OmniWeb、Shiira、Google Chrome
.chrome - Google Chrome (すべてのバージョン)
.chromexx - Chrome xx (xx を特定のバージョンの番号に変更) new
.safari - Safari (すべてのバージョン) 新規
.iron - SRWare アイロン

.[OS コード].[ブラウザ コード] .yourclass {padding-left:5px;フォントサイズ:14px }

ボディ { 背景色:#000 }
.ie8 body {background-color:#111 } (Internet Explorer 8.x に固有)
.win.ie8 body {background-color:#222 } (Microsoft Windows のすべてのバージョンの Internet Explorer 8.x に固有)
.opera body {background-color:#333 } (Opera のすべてのバージョン)
.ff15 body {background-color:#444 } (Firefox 15.x に固有)
.linux.gecko body {background-color:#555 } (Firefox、Camino、SeaMonkey のすべてのバージョン、x11 および Linux 上)

.ie7 #右、.ie7 #左 {幅:320px }

詳細については、このリンクをご覧くださいhttp://cssbs.altervista.org/

覚えておいてください:「ユーザーエージェントのスニッフィングはbaaadddです」

それは決して良い習慣ではありませんし、決して良い習慣ではありません。

ユーザー エージェント スニッフィングが実装されている Web サイトを維持するのは大変な作業です。

スタイルシートの量が少ない場合、または複数のスタイルシートを作成する時間がない場合は、個別のスタイルシートを使用するか、CSS ハックを使用することをお勧めします。

Opera の場合は、次のトリックを使用できます。

@media all and (-webkit-min-device-pixel-ratio:10000),
    not all and (-webkit-min-device-pixel-ratio:0) { 
     #id {
         css rule;
     }
 }

そして悲しいことに、Chrome の CSS ハックはすべて Safari にも適用されます。

古いバージョンの Safari (私の記憶が確かであれば <= safari3) を除いて、2 つのレンダリングを分離する方法はありません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top