みなさんこんにちは！おさかなです！
今回は「Can I use」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・CSS・各ブラウザの対応状況を知りたい方
・IE・ChromeなどブラウザごとにWeb技術を確認したい方
・Web制作・デザインに携わっている方
「Can I use」って何？
「Can I use」とは、HTML要素・CSSプロパティなど、Web技術の対応状況をチェックできるサイトのことです。「各ブラウザ」ごとに、サポートされているかどうかを確認できます。デザイナー・Web系エンジニアにおすすめです！(いいね👍)
実際に使ってみよう！
それでは早速サイトにアクセスしましょう！
サポート状況をチェック！
まずは「入力ボックス」に、サポート状況を調べたい「技術の名前」を入れます。(えい！)
例えば「position: relative;」と入れてみると…？
このように「各ブラウザの対応状況」が見れました〜！(おお！)
色ごとに対応状況が分かれており「緑色」は対応、「赤色」は非対応となてっています。
ブロックに「マウスカーソルを乗せる」と……？
ブラウザのバージョンなど、詳細情報が見れます！(ふむふむ…。)
IEではサポートされていないものでも、Chromeでは使えるケースが多いです。
ページをスクロールすると、「関連プロパティ」の対応状況も見れます。
ちなみに、ページトップに表示されている「技術名」をクリックして、調べることも可能です！(はい！)
例えば、列と行で構成される、2次元レイアウトシステムである「CSS Grid」はこんな感じです。
他にも「API」の対応状況もわかります！(助かる〜)
(こまめに休憩🍵)
FlexBoxや、WebPも調査！
flexboxと入れると…？
こんな感じの結果が表示されました！
現在では、IE含め「最新バージョン」であれば、ほぼ全てのブラウザに対応しています。(すごい！)
ブロック上部が「赤色」になっていることからも、FlexBoxの進化がわかりますね！
こちらは、画像サイズが軽量であることから、SEO対策にも好まれる「.WebP」拡張子です。(当サイトでも、こちらを使用しています✨)
使用率で見る
「Usage relative」を押すと…？
このように「世界での使用量」と共に、対応状況がわかります。(Chrome圧倒的👀)
時系列で見る
「Date relative」を押すと…？
「時系列順」にサポート状況がわかります！(2011年頃から、一気に増えている！)
ページ下部にある「Resources」タブでは、関連情報をチェックできます。
URLを押すと、詳細ページに遷移。
みなさんも是非、Web開発の際には「サポート状況」をチェックしてみてください🌱(お疲れ様でした☕)
今日、お茶のペットボトル間違えて2本も開けた。
正月ボケ早すぎ！笑
これで全ての操作は完了です。(やった～！)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました！
