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.
  • 71
  • 64

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

  • サポート:
  • 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
  • 67
  • 46
  • 71
  • 64

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

  • サポート:
  • 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の竜(りょう)です。「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、東海岸のボストン近郊でウェブ制作を開始。帰国後、東京のウェブ制作会社に勤務。現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わっています。より詳しくはこちら

記事へのコメントはもちろん、執筆・翻訳、レスポンシブなウェブサイト制作、コラボのご相談などもTwitter @rriver またはFacebook でお気軽にご連絡ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です