Can I Useをブログに埋め込む

この記事は約 3 分で読めます。

Can I Use のブラウザ対応表を
ブログ内に埋め込んでみましょう。

Can I Use とは

Can I Use とは、
cssのプロパティや
html5要素のブラウザ対応状況が
確認できるサービスです。

使用するツール

使用するツールは、
The CanIUse Embed です。

The CanIUse Embedは、
Can I Useのブラウザ対応表を
サイト内に埋め込む事が
できるツールです。

導入方法

導入方法
  • STEP 1
    jsライブラリの読み込み
    CDN経由でjsを読み込む
  • STEP 2
    埋め込み設定を選択
    a)埋め込みたいプロパティ等を選択します。
    b)表示するブラウザのバージョンを選択する
    c)デフォルトの配色を選択する
  • STEP 3
    Generateをクリックする
    コードが生成される

jsライブラリを読み込む

<script src="https://cdn.jsdelivr.net/gh/ireade/caniuse-embed/caniuse-embed.min.js"></script>

外部ファイルのcaniuse-embed.min.jsを
HTMLの<head>~</head>内もしくは
</body>の直前に以下を記述します。

埋め込み設定を選択

a) Choose a Feature
埋め込みたいプロパティ等を選択します。

b) Select the Browser Versions to Display
対応表の表示範囲を指定します。

c) Choose default colour scheme
デフォルトの配色を選択する

Get the Embed Code


Generateをクリックして
生成されたコードをブログ内に記述します。
埋め込みコードの下にプレビューも表示されます。

Can I Use css-filters? Data on support for the css-filters feature across the major browsers from caniuse.com.

上記は、
cssフィルターの各ブラウザサポート状況を
表示したものです。

最後に

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

 

Can I Useをブログに埋め込む