ブラウザがJavaScriptのHSL色をサポートしているかどうかを確認するにはどうすればよいですか？

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

  •  13-10-2019
  •  | 
  •  

質問

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

役に立ちましたか？

解決

簡単な答えは次のとおりです。 http://www.modernizr.com/。ソースコードを調べて、HSLに関するパーツのみを使用するように変更できます。

基本的にそれは新しい要素を作成するだけで、それを設定します background-color HSLA値を使用して、次にの存在を探します 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の使用については注意してください 大都市の答え 以下は行く方法ですが、Paulbが意図した目的のために、これがそれを行う1つの方法です。

他のヒント

検出はいいことですが、フォールバックを追加する方がさらに優れています。

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

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

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

HSLを使用すると色を生成するのが簡単であるが、ブラウザのサポートが心配な場合は、Business LogicでHSLを使用するが、DOM要素に色を適用するときにRGBに変換することを検討できます。

また、次の質問も参照してください。
HSLからRGBカラー変換

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