web-dev-qa-db-ja.com

Chrome / Opera固有のスタイルシートの作成方法

chrome/operaハッキングを行う必要があります。クライアントが望んでいるフォント置換スクリプトが原因で物事を壊します...これは悲しいことですが、すべてが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 */
}

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

ありがとう！

cssgoogle-chromeoperaspecific-stylesheets
23
marcgg

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

それはあなたのCSSで使用できるあなたのHTMLのボディタグにブラウザ固有のクラスを広告します：

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

お役に立てれば。

39
Thomas Maas

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？ にのみ適用します）==

OperaでのみCSSを表示する方法

LTE =Opera 1

14
XP1

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宣言をロードするために使用しました。

11
Dylan Edwards

このソリューションはテストしていませんが、 このブログエントリ によると、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);
}
3
Lobstrosity

.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を変更）新規
。ff4-Firefox 4.x
。ff3-Firefox 3.x
。ff2-Firefox 2.x
。opera-Opera（すべてのバージョン）
。opera12-Opera 12.x
。opera11-Opera 11.x
。opera10-Opera 10.x
。opera9-Opera 9.x
。opera8-Opera 8.x
。konqueror-Konqueror
。webkit-Safari、NetNewsWire、OmniWeb、Shiira、Google Chrome
。chrome-Google Chrome（すべてのバージョン）
。chromexx-Chrome xx（特定のバージョンの番号でxxを変更）new
。safari-Safari（すべてのバージョン）新規
。iron-SRWare Iron












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

2
Sabir

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

それはそうではなく、決して良い習慣とはなりません。

User-Agentスニッフィングが実装されている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の古いバージョンを除いて、2つのレンダリングを分離する方法はありません（よく覚えていれば<= safari3）

0
TwystO