ブラウザがHSLカラーをサポートしているかどうかを判断できるようにしたいのですが、そうでなければ、生成されたRGBカラー(両方とも生成されています)にフォールバックする必要があります。ユーザーが使用しているブラウザを実際に確認せずにこれを行う方法はありますか?ブラウザがJavascriptでHSL色をサポートしているかどうかを確認するにはどうすればよいですか?
答えて
簡単な答えは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目的のために、これはそれを行うための一つの方法であること。
検出はいいですが、フォールバックを追加するとさらに良いです:
#element{
background: rgb(255, 10, 25);
background: hsl(240, 100%, 50%);
}
まず、あなたが、フォールバック、理解し、主にブラウザプロパティを設定し、新しいプロパティを設定します。これがサポートされていない場合は、前のものを上書きしません。
あなたはHSLが必要なのか分かりませんが、
これは優れたアドバイスですが、 hslを使用してGoogleマップのポリラインの色を設定しようとしているので、私のためには機能しません。 HSLは色を生成するという点でより簡単に作業できます。 – paullb
HSLを使用すると色を生成するのが簡単だがブラウザのサポートが不安な場合は、ビジネスロジックでHSLを使用することは考えられますが、DOM要素に色を適用するときはRGBに変換することを検討してください。それを心配RGBに固執していないではないのはなぜ
HSL to RGB color conversion
- 1. JavaScriptでユーザーのブラウザで文字がサポートされていないかどうかを確認するにはどうすればよいですか?
- 2. ブラウザでCSS値がサポートされているかどうかを確認するにはどうすればよいですか?
- 3. ネットパイプサービスがリッスンしているかどうかを確認するにはどうすればよいですか
- 4. ポップアップページが開いているかどうかを確認するにはどうすればよいですか?
- 5. ブラウザがotfをサポートしているかどうかを確認する方法
- 6. javascriptオブジェクトがイメージかキャンバスかどうかを確認するにはどうすればよいですか?
- 7. JavaScriptがセッションがnullかどうかを確認するにはどうすればいいですか?
- 8. JavaScriptでファイルサイズを確認するにはどうすればよいですか?
- 9. ユーザーが使用しているブラウザを確認するにはどうすればよいですか?
- 10. ユーザーがindex.htmlにいるかどうかを確認するにはどうすればよいですか?
- 11. データが新しいかどうかを確認するにはどうすればよいですか?
- 12. JavaScript言語機能が特定のブラウザでサポートされているかどうかを確認する方法
- 13. Facebook Javascript SDKがブラウザでサポートされているかどうかを確認する方法
- 14. jquery:ページにフォーカスがないかどうかを確認するにはどうすればよいですか?
- 15. ユーザーがBraveをブラウザとして使用しているかどうかを確認するにはどうすればよいですか?
- 16. ウィンドウがオフスクリーンであるかどうかを確認するにはどうすればよいですか?
- 17. URLが画像であるかどうかを確認するにはどうすればよいですか?
- 18. ファイルが空であるかどうかを確認するにはどうすればよいですか?
- 19. フォームがヘルプモードであるかどうかを確認するにはどうすればよいですか?
- 20. ジェネリックメソッドパラメータが値型であるかどうかを確認するにはどうすればよいですか?
- 21. TextFieldが整数であるかどうかを確認するにはどうすればよいですか?
- 22. ユーザーが匿名であるか、JavaScriptからログインしているかどうかを確認するにはどうすればよいですか?
- 23. Androidアプリにメモリリークがあるかどうかを確認するにはどうすればよいですか?
- 24. Android:アクティビティにオプションメニューがあるかどうかを確認するにはどうすればよいですか?
- 25. AndroidデバイスがSNEPまたはAndroidのNdefプッシュプロトコルをサポートしているかどうかを確認するにはどうすればよいですか?
- 26. ブラウザでjavascriptのverisonを確認するにはどうすればよいですか?
- 27. 変数が存在するかどうかを確認するにはどうすればよいですか?
- 28. ファイルが存在するかどうかを確認するにはどうすればよいですか?
- 29. ルート「URL」が存在するかどうかを確認するにはどうすればよいですか?
- 30. ファイルが存在するかどうかを確認するにはどうすればよいですか?
:
また、次の質問を参照してください?あなたはあなたの道を離れて、ユーザーに何の変化ももたらさない何かをしています。 – Brad
HSLはプログラマチックに色を生成するのが簡単です(私の場合、1〜5の数字をとり、グラデーションから色を選択します)また、HSLで作業するときに色を視覚化する方が簡単です – paullb