以前、このブログでも紹介したことがある、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.
- 123
- 124
導入方法
- 「Can I Use? Shortcode」プラグイン をダウンロード
/wp-content/plugins/にプラグインのフォルダごとアップロード- 管理画面の「プラグイン」画面から有効化
- ショートコードを記事に挿入
ショートコードの書き方
以下のように記述して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
- 123
- 80
- 123
- 124
表示のカスタマイズ・日本語化とスタイルの変更点
このブログに導入したものは、日本語化をして表示要素のカスタマイズを行い、スタイルを大幅に変更しました。その際、下記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投稿のマナーとか、学ばないとな〜と思う今日この頃でした。
以上、報告終わります！
2015年5月6日に公開された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。