2

Firefox10でのみ実際にテストされたさまざまなCSS3スタイルを使用するWebサイトがあります。IE8で表示したときにネイティブにサポートされていないさまざまなCSSスタイルをシミュレートする方法が必要です。

  • ボックスシャドウ
  • テキストシャドウ
  • 背景のグラデーション
  • 丸い角
  • 不透明度

css3pieを使用してみましたが、.htcファイルを含めると、不快な副作用が発生しました。IE8の要素にボックスシャドウと丸い角を追加できるjQueryプラグインがあることを知っているので、これらを条件付きコードブロック内で使用することを検討しています。

if ($.browser == 'msie' && $.browser.version.split('.')[0] < 9) {
    // call JQuery plugins to apply box shadows, round corners, etc.    
}

機能検出ではなくブラウザ検出を使用しているため、これはやや脆弱であることに気付きましたが、jQuery.supportを使用して角を丸める機能などの機能を検出する方法を見つけることができません。

次に、CSS3プロパティの一部（ボックスシャドウと丸い角）をシミュレートできるjQueryプラグインしか認識していませんが、背景のグラデーション、不透明度、テキストシャドウ用の他のプラグインはありますか？

最後に、私の目標を達成するためのまったく異なる方法がある場合は、別の方法を提案してください。

4

1 に答える 1

2

まず、グレースフル デグラデーション/プログレッシブ エンハンスメントのアイデアを採用することを検討します。最も能力の高いブラウザにコーディングし、能力の低いブラウザでも許容できる同一ではないエクスペリエンスを提供するようにします。

これについて言及するのは嫌ですが、 IE のフィルターを調べることができます。これらは、ボックスの影や不透明度など、これらのプロパティの一部をシミュレートします。ただし、フィルタを使用するとパフォーマンスが低下し、ネイティブ CSS ほど適切にレンダリングされないことに注意してください。

テキストの影 - これはトリッキーです - 基本的に JavaScript に頼る必要があります。テキストの影がなくても生きていけるなら、そのままにしておきます。

背景のグラデーション - タイル状の背景画像を引き続き使用できます。これには IE フィルターがありますが、上記と同じコストがかかり、それらを使用するとレイアウトが奇妙になります。

丸みを帯びた角 - 私はまだそれに対する優れた解決策を見つけていません。なるがままに。

不透明度 - かなりうまく機能する IE 用の不透明度フィルターがあります (同じ注意点があります)。RGBA のサポートを探している場合は、背景に透明な PNG を使用する必要があります。

ただし、IE8 をまったくターゲットにするのではなく、modernizrなどを使用して、サポートされている機能とサポートされていない機能に基づいてブラウザーをターゲットにすることをお勧めします。

また：これ。

于 2012-02-15T15:21:25.840 に答える