1

したがって、使用するオブジェクトメソッド/プロパティを決定するためにブラウザー検出 (つまりnavigator.userAgent)を使用すべきではないことを理解しています。それでもブラウザによっては JavaScript で簡単な CSS を設定したい。ただし、まったく新しい StyleSheet を正当化するだけでは十分ではありません。ブラウザ検出を使用して要素に適用する CSS を決定しても問題ないでしょうか?

編集

わかりました、具体的にしましょう。ボタンの内側について話しているtext-shadow( <input type="button"/>) ボタンの内側のテキストは、すべてのブラウザーで垂直方向に中央揃えされているわけではないため、ブラウザーに応じて JS でこれを微調整します。

4

8 に答える 8

2

すべきこととすべきでないことは絶対に大丈夫です！...一方、ブラウザ検出は「オブジェクト検出」に取って代わられているようです:

  1. ブラウザ スニッフィングの使用に関する SitePoint の見解: http://blogs.sitepoint.com/2009/05/31/why-browser-sniffing-stinks/
  2. Stackoverflow 独自の調査:ブラウザ スニッフィングが推奨されないのはなぜですか?
于 2010-12-24T21:19:25.340 に答える
1

完全な新しいスタイルシートを指定することなく、IE CSS の回避策が必要なようです。条件付きコメントを使用して、たとえば IE6 をターゲットにすることができます。

<!--[if lt IE 7]><body class="browser-ie6"><![endif]-->
<!--[if gte IE 7]><!--><body class="browser-ok"><!--<![endif]-->

次に、次のような CSS ルールを使用できます。

body.browser-ok .troublesome_thing { troublesome-style: something; }

メインのスタイルシートに。

を参照する正当な理由はほとんどありませんnavigator.userAgent。これは面倒であり、ブラウザー スニッフィングの標準から見ても信頼できません。

到着予定時刻:

ボタン内にテキストシャドウを追加しています。

そのためにブラウザをスニッフィングする必要はありません。ルールを含めるだけです。機能する場合は機能しますが、機能しない場合でも、何も失うことはありません。

サポートしていないブラウザにバックアップ スタイルを提供する場合は、別のルールを使用できます。

button { text-shadow: 2px 2px 2px white; }
body.support-noshadow button { background: white; }

ケースを検出するためのいくつかのJSを使用：

if (!('textShadow' in document.body.style))
    document.body.className+= ' support-noshadow';
于 2010-12-24T21:17:48.817 に答える
1

ブラウザーのバージョンまたはベンダーを検出して、そのブラウザーでサポートされていない CSS やその他の機能を使用しないようにする場合は、ブラウザーのバージョンをテストするのではなく、機能の存在をテストすることをお勧めします。

于 2010-12-24T21:19:55.463 に答える
1

text-shadow は標準であるため、ソリューションは非常に簡単です。自分でテスト DIV を作成し、スタイルが未定義でないことを確認します。

if(div.style.textShadow !== undefined){ return true; }else{ return false; }

style を設定する必要も、設定する必要もないことに注意してください。IE は、他のオブジェクト プロパティを設定した場合と同様に、スタイルを逆流させます。上記のコードは IE では未定義になり、他のすべてのコードは ... まあ、未定義以外のものになります。

他の CSS3 スタイルでは、すべてのブラウザー プレフィックスを考慮する必要があるため、より複雑になります。

if(
    div.style.MozBoxShadow !== undefined ||
    div.style.WebkitBoxShadow !== undefined ||
    div.style.OBoxShadow !== undefined ||
    div.style.KhtmlBoxShadow !== undefined ||
    div.style.msBoxShadow !== undefined ||
    div.style.boxShadow !== undefined // don't forget this one!
){return true}
于 2010-12-25T02:34:12.193 に答える
0

Modernizr (または少なくともそのテキスト シャドウ テスト)を調べることをお勧めします。これは、この機能検出を行う JavaScript ライブラリであり、結果に基づいて CSS と JS の両方をターゲットにすることができます。

于 2010-12-24T21:49:09.540 に答える
0

確かに、ブラウザーの検出は、CSS スタイルを選択する優れた方法です。（あなたの質問に基づいて）。

于 2010-12-24T21:16:42.063 に答える
0

通常、ブラウザーの CSS を変更する理由は IE のためです。このためには、IE の条件付きコメントサポートを使用して、IE 専用のスタイルシートまたはインライン スタイルを含める必要があります。例えば：

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

IE6 以前にのみ、2 番目のスタイルシートが含まれます。このスタイルシートでは、以前のスタイルをオーバーライドしたり、問題を修正したりできます。JavaScript は必要ありません。

于 2010-12-24T21:17:47.723 に答える
0

あなたが質問を表現した方法、答えはイエスです。ブラウザーに応じて、ブラウザー検出を使用して、JavaScript で単純な CSS を設定します。しかし、これはあなたが本当に求めていることではないと思います。

より進歩的なアプローチは、ブラウザー検出ではなく機能検出を使用することです。つまり、「ブラウザーは x をサポートしていますか?」などです。- ある場合はこれを行い、そうでない場合は別のことを行います。

ただし、機能のテストを可能にするコードを書くのがそれほど簡単ではない場合があるため、これは常に簡単に実行できるとは限りません。これらの場合、実用的なアプローチは、機能をテストするための既知の/信頼できる方法があるときに将来的に機能を検出することを目的として、ブラウザで可能な限り具体的に検出することであると言えます。

質問を編集して詳細を提供していただければ、さらにサポートできる可能性があります。

于 2010-12-24T21:17:52.030 に答える