HTML5やCSS3のサポート状況を簡単に記事に挿入できる「Can I use…」のWordPressプラグインが便利

Advertisement

以前、このブログでも紹介したことがある、HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」ですが、そのデータを記事に簡単に挿入できるWordPressプラグイン「Can I Use? Shortcode 」が便利そうなのでご紹介。

プラグイン導入後、WordPressのショートコードを使って以下のように記述するとflexboxのブラウザサポート状況を表示できます。

[ciu-display feature="flexbox"]

こんな感じで ↓

CSS Flexible Box Layout Moduleのブラウザサポート状況

Desktop

  • 4*
  • 2*
  • 10*
  • 12.
  • 3.1*

Mobile / Tablet

  • 3.2*
  • 2.1*
  • 12.
  • 130
  • 130

* ベンダープレフィックスが必要

  • サポート:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

導入方法

  1. Can I Use? Shortcode」プラグイン をダウンロード
  2. /wp-content/plugins/にプラグインのフォルダごとアップロード
  3. 管理画面の「プラグイン」画面から有効化
  4. ショートコードを記事に挿入

ショートコードの書き方

以下のように記述してfeature=""のところに、調べたい要素を記述するだけです。たとえば、HTTP/2やpictureのサポート状況を挿入する場合以下を記述します。

[ciu-display feature="http/2"]
[ciu-display feature="picture"]

pictureのサポートは、IEとWebkitが…

Picture elementのブラウザサポート状況

Desktop

  • 38
  • 38
  • No
  • 25
  • 9.1

Mobile / Tablet

  • 9.3
  • 130
  • 80
  • 130
  • 130

* ベンダープレフィックスが必要

  • サポート:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

表示のカスタマイズ・日本語化とスタイルの変更点

このブログに導入したものは、日本語化をして表示要素のカスタマイズを行い、スタイルを大幅に変更しました。その際、下記2つのファイルに変更を加えました。本来、GithubでFork できたらいいんでしょうけど、使い方に自信がないのでそっとしておきます。

caniuse-shortcode-master/lib/display.php

  • タイトル部分に「…のブラウザサポート状況」と追加
  • その他の英語部分を日本語化
  • 要素の説明文を非表示
  • 要素のステータスを非表示

caniuse-shortcode-master/lib/css/caniuse.css

  • このブログのスタイルにあわせるために、オリジナルから大幅にスタイルの変更をしました
  • SCSSにしてcaniuse.min.cssに書き出されるようにしました

改善の要望

  • 最後に表示されるCan I Use…へのリンクを要素の詳細ページに直接貼りたい
  • 必要ない場合は、プレフィックスに関する注記を非表示にしたい

GithubのForkの仕方とかIssue投稿のマナーとか、学ばないとな〜と思う今日この頃でした。

以上、報告終わります!

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net Twitter @rriver 、またはFacebook までご連絡ください。