Can I useが役に立った話

背景

以前プロジェクトでRGBでなくHSlで色を付ける実装をしていたのですが、スマホで動作確認をしたところ全てが黒色か白色で描画されるバグが起こってしまいました。

• PC画面（chrome）
  
• スマホ画面（IOS safari）
  

とりあえず原因がわかる

hslの表示箇所で単位をつけると正常に色付けがされることがわかりました。

background:hsl(180 ,100,75);
↓
background:hsl(180 deg ,100%,75%);

なぜPCとスマホで差が出る？

とはいえなんか単位つけたら治りました！だとまた同じバグが出かねないので、差が出た理由を調べてみます。
そこで今回使うのがCan I useというデバイス・ブラウザによって使う機能が対応しているか分かるサイトです。
こちらでhslについて調べてみます。
青色が使用可能で赤色が使用不可ですが、hsl自体はどのブラウザにも対応しているみたいで一旦安心です。（ieは流石に使わない..）

ではなぜ今回エラーが出たか、スクロールしてみると見つけました。

こちらのノートの箇所に「古い仕様バージョンに基づいて実装されています。その結果、チャネル値を使用した計算は正しく機能せず、値を単位 ( degfor h、%for s、およびl) で指定する必要があります。」とあります。

以上

なんとなく上手く行ったは個人開発だといいですが、業務だとお金をもらっている以上根拠を見つけてくる必要があります。その時にこのようなサイトがあると知っておくのは大事だと思いました。