【Web技術】ブラウザのサポート状況をチェックできる【Can I use】とは?

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「Can I use」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・CSS・各ブラウザの対応状況を知りたい方
・IE・ChromeなどブラウザごとにWeb技術を確認したい方
・Web制作・デザインに携わっている方

「Can I use」って何?

Can I use」とは、HTML要素・CSSプロパティなどWeb技術の対応状況をチェックできるサイトのことです。「各ブラウザ」ごとに、サポートされているかどうかを確認できます。デザイナー・Web系エンジニアにおすすめです!(いいね👍)

Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
Webブラウザ上で【CSS】を試せるサイト!【CSS DESK】とは?
みなさんこんにちは!おさかなです!今回は「CSS DESK」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・ブラウザ上でCSSを試したい方・CSSの挙動をチェックしたい方・HTML/CSS...

実際に使ってみよう!

それでは早速サイトにアクセスしましょう!

サポート状況をチェック!

まずは「入力ボックス」に、サポート状況を調べたい「技術の名前」を入れます。(えい!)

例えば「position: relative;」と入れてみると…?

このように「各ブラウザの対応状況」が見れました〜!(おお!)

色ごとに対応状況が分かれており「緑色」は対応、「赤色」は非対応となてっています。

ブロックに「マウスカーソルを乗せる」と……?

ブラウザのバージョンなど、詳細情報が見れます!(ふむふむ…。)

IEではサポートされていないものでも、Chromeでは使えるケースが多いです。

ページをスクロールすると、「関連プロパティ」の対応状況も見れます。

ちなみに、ページトップに表示されている「技術名」をクリックして、調べることも可能です!(はい!)

例えば、列と行で構成される、2次元レイアウトシステムである「CSS Grid」はこんな感じです。

【CSS】Gridレイアウトの作り方を学ぼう!【GRID GARDEN】とは?
みなさんこんにちは!おさかなです!今回は「GRID GARDEN」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・CSSの「グリッドレイアウト(Grid)」を学びたい方・無料の「グリッド学...

他にも「API」の対応状況もわかります!(助かる〜)

(こまめに休憩🍵)

FlexBoxや、WebPも調査!

flexboxと入れると…?

こんな感じの結果が表示されました!
現在では、IE含め「最新バージョン」であれば、ほぼ全てのブラウザに対応しています。(すごい!)

ブロック上部が「赤色」になっていることからも、FlexBoxの進化がわかりますね!

こちらは、画像サイズが軽量であることから、SEO対策にも好まれる「.WebP」拡張子です。(当サイトでも、こちらを使用しています✨)

【WordPress】サイト・ブログの画像を「.webp」に変換できるプラグイン【WebP Converter】
みなさんこんにちは!おさかなです!今回は「WebP Converter for Media」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・サイト内の画像を一括で「.webp」拡張子に変換...

使用率で見る

Usage relative」を押すと…?

このように「世界の使用量」と共に、対応状況がわかります。(Chrome圧倒的👀)

時系列で見る

Date relative」を押すと…?

時系列順」にサポート状況がわかります!(2011年頃から、一気に増えている!)

ページ下部にある「Resources」タブでは、関連情報をチェックできます。

URLを押すと、詳細ページに遷移。
みなさんも是非、Web開発の際には「サポート状況」をチェックしてみてください🌱(お疲れ様でした☕)

『スクエアターミナル』で、キャッシュレスを導入しませんか?

おさかな
おさかな

今日、お茶のペットボトル間違えて2本も開けた。

ナビまる
ナビまる

正月ボケ早すぎ!笑

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

Amazon | 【国内正規品】Keychron K2 Version2 ワイヤレス・ゲーミングメカニカルキーボード84キー/USレイアウト/RGBライト/Gateron G Proメカニカルスイッチ/有線無線対応/Mac Windows対応/Nキー・ロールオーバー対応 (Gateron G Proメカニカル青軸) | | ゲーミングキーボード 通販
【国内正規品】Keychron K2 Version2 ワイヤレス・ゲーミングメカニカルキーボード84キー/USレイアウト/RGBライト/Gateron G Proメカニカルスイッチ/有線無線対応/Mac Windows対応/Nキー・ロールオーバー対応 (Gateron G Proメカニカル青軸)がゲーミングキーボード...
おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。紆余曲折あり、現在はライターとして活動中。IT技術、サブカルチャーから、シナリオまで色々書きます。
SAOのユウキが好きです!

おさかなをフォローする
タイトルとURLをコピーしました