【modernizr.js】cssのbackgroundプロパティに.webpの画像を指定する

こんにちは、しらこです。

前回、新世代画像フォーマット「WebP」が有能すぎるというお話をしたワタルです。

今回は、その補足記事です。

background-imageに.webpを入れたい

ファーストビューなどで大きい背景画像を入れる際、できるだけ軽くしたい！と思いますよね。

しかし、<img>タグでは出力されず、代わりに<picture>タグを入れるという決まりがありました。

こちらで詳しく解説しています。

前回の記事：新世代のWEB制作には.webpが有能すぎて必須という話

もう一つ、htmlに画像を挿入したい時、cssから背景として読み込ませる方法があります。

backgroundプロパティを使用する方法ですよね。

通常であれば、

このように指定しますが、 .webpの場合は現時点で未対応のブラウザがあったりと、ブラウザに応じて分岐（出し分け）する必要があるので、これではうまくいきません。

そもそもcssには、分岐という概念がないからです。

では、どうやって指定するの？

cssで画像を出し分ける方法

方法は簡単。「modernizr.js」というJavaScriptのライブラリを使います。

参考：Modernizr

・まずこちらにアクセスします。

・ピンクのボタン「Add your detects」をクリック

・Webpを選択し、右上の「Build」をクリック

「Build」の右側にあるDownloadを押すとjsのファイルがダウンロードされるので、htmlで読み込みます。

パスは状況に応じて適宜変更してください。

これでブラウザを開くと、htmlタグが

・WebP対応のブラウザの場合

・WebP非対応のブラウザの場合

このようになります。

あとはcssの指定方法を変えるだけです。

これでブラウザ別に読み込ませることに成功しました。

全ブラウザに対応するまでは、この方法を取るのが良いでしょう。

modernizr.jsの使い道

今回使ったライブラリですが、様々なブラウザ対応が簡単に実現できますので、

「 あれ、この方法って他のブラウザ対応してるかな…？」と迷った時は、

定番ツール  Can I use…  で確認し、非対応の場合はmidernizr.jsで簡単に分岐の処理をさせちゃいましょう！

それでは、また。

（いい声）