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

Question

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

Answer 1

簡単な答えは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の使用状況以下metrobalderas answerのために行くための方法ですが、意図paulb目的のために、これはそれを行うための一つの方法であること。

Answer 2

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

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

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

あなたはHSLが必要なのか分かりませんが、

Answer 3

HSLを使用すると色を生成するのが簡単だがブラウザのサポートが不安な場合は、ビジネスロジックでHSLを使用することは考えられますが、DOM要素に色を適用するときはRGBに変換することを検討してください。それを心配RGBに固執していないではないのはなぜ
HSL to RGB color conversion