5

ブラウザがHSL色をサポートしているかどうかを判断できるようにしたいのですが、サポートしていない場合は、生成されたRGB色にフォールバックします（両方を生成しました）。ユーザーが使用しているブラウザを実際に確認せずにそれを行う方法はありますか？

4

3 に答える 3

5

検出は素晴らしいですが、フォールバックを追加することはさらに良いです:

#element{
   background: rgb(255, 10, 25);
   background: hsl(240, 100%, 50%);
}

最初に、ブラウザがほとんど理解できるフォールバック プロパティを設定し、次に新しいプロパティを設定します。これがサポートされていない場合、以前のものは上書きされません。

ただし、HSL が何のために必要なのかはわかりません。

于 2010-12-29T19:56:25.020 に答える
3

簡単な答えはhttp://www.modernizr.com/です。ソースコードを見て、HSL に関する部分だけを使用するように変更できます。

基本的に、新しい要素を作成し、background-colorHSLA 値を使用して設定し、オブジェクトのスタイル属性の存在rgbaまたはスタイル属性を検索しhslaます。存在する場合、ブラウザは HSLA をサポートします。非常に賢い：

function supportsHSLA() {
  var style = createElement('a').style
  style.cssText = 'background-color:hsla(120,40%,100%,.5)'

  return style.backgroundColor.indexOf('rgba') > -1 ||
    style.backgroundColor.indexOf('hsla') > -1
})

通常の CSS の使用法では、 metrobalderas の回答を以下に示しますが、paulb が意図した目的のためには、これが 1 つの方法であることに注意してください。

于 2010-12-29T14:51:15.307 に答える
1

HSL を使用した方が簡単に色を生成できるという懸念があるが、ブラウザーのサポートが心配な場合は、ビジネス ロジックで HSL を使用し、DOM 要素に色を適用するときに RGB に変換することを検討できます。

次の質問も参照してください:
HSL から RGB への色変換

于 2016-06-24T23:20:01.683 に答える