背景 以前プロジェクトでRGBでなくHSlで色を付ける実装をしていたのですが、スマホで動作確認をしたところ全てが黒色か白色で描画されるバグが起こってしまいました。 PC画面(chrome) スマホ画面(IOS safari) とりあえず原因がわかる hslの表示箇所で単位をつけると正常に色付けがされることがわかりました。 background:hsl(180 ,100,75); ↓ background:hsl(180 deg ,100%,75%); なぜPCとスマホで差が出る? とはいえなんか単位つけたら治りました!だとまた同じバグが出かねないので、差が出た理由を調べてみます。 そこで今回使うのがCan I useというデバイス・ブラウザによって使う機能が対応しているか分かるサイトです。 こちらでhslについて調べてみます。 青色が使用可能で赤色が使用不可ですが、hsl自体はどのブラウザ