background-imageでwebp対応ブラウザかどうかで画像を出し分けするSassのmixin（modernizr利用）

HTML / CSS

2022.02.06

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

どうも上かるびです。

background-imageでwebpを出し分けする場合、webp対応かどうかでurlや拡張子を変えなければいけないため、若干手間がかかることが多いと思います。

Contents

ある参考記事のscssでは入れ子内に書けなくて不便なのでカスタマイズしました
background-imageをwebp対応かどうかによって出し分けするmixin
@includeを入れ子にしないで使いたい場合

ある参考記事のscssでは入れ子内に書けなくて不便なのでカスタマイズしました

【CSS】背景画像（background-image）で webp を出し分ける方法

webp は画像サイズも小さく、ウェブで積極的に使っていきたい拡張子です。ですが、ブラウザによっては対応してたりしてなかったりします。そのため、対応状況によって background-image で webp とそうでない画像を出力し分ける一例を紹介します。 ※ 今回はあくまで css background-image...

今回のmixinは上記サイトで発見したのですが、
例えば.boxの子要素の.box__innerとかに入れ子内で@includeをするとエラーになってしまいました。

なのでちょっとカスタマイズして、入れ子内で@includeで書いても正常に動作するようにしました。

上かるび

modernizrなどでwebp対応かどうか判定する処理については省力します。

ブラウザがwebp対応かどうか判定するmodernizrについては、下記サイトなどをご参考ください。

次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA

WebP（ウェッピー）という画像形式をご存知でしょうか。長い間、webの静止画は大部分がJPEG/GIF/PNGのいずれかでした。WebPはこのすべてを置き換えることができる次世代のフォーマットです。

ブラウザ判定が簡単にできる！【Modernizr】 - エムトラッドブログ

1.Modernizrとは【Modernizr】…JavaScriptライブラリ

background-imageをwebp対応かどうかによって出し分けするmixin

まずはmixin。

$webpClassName: '.webp';
$noWebpClassName: '.no-webp';

@mixin webpBg($filePath, $fileExtension: 'jpg') {
  #{$webpClassName} & {
    background-image: url(#{$filePath}.webp);
  }
  #{$noWebpClassName} & {
    background-image: url(#{$filePath}.#{$fileExtension});
  }
}

$webpClassName: '.webp';

$noWebpClassName: '.no-webp';

@mixin webpBg($filePath, $fileExtension: 'jpg') {

#{$webpClassName} & {

}

#{$noWebpClassName} & {

}

使い方↓（画像のURLは適宜変更してください）

.box{
  &__inner{
    @include webpBg('../images/bg','png');
    //↑webp非対応に表示させたい画像がjpgの場合は第二引数は記述不要。今回はpngのため記述。
  }
}

.box{

&__inner{

@include webpBg('../images/bg','png');

//↑webp非対応に表示させたい画像がjpgの場合は第二引数は記述不要。今回はpngのため記述。

}

CSSにコンパイルすると↓

.webp .box__inner { background-image: url(../images/bg.webp); }
.no-webp .box__inner { background-image: url(../images/bg.png); }

1 2	.webp .box__inner { background-image: url(../images/bg.webp); } .no-webp .box__inner { background-image: url(../images/bg.png); }

@includeを入れ子にしないで使いたい場合

ちなみに冒頭の参考サイトのように入れ子にしない場合は下記のようになります。

ネコーダー

background-imageのみ別ファイルとして管理している場合などはこちらが良さそう。

$webpClassName: '.webp';
$noWebpClassName: '.no-webp';

@mixin webpBg($selector, $filePath, $fileExtension: 'jpg') {
  #{$noWebpClassName} #{$selector} {
    background-image: url(#{$filePath}.#{$fileExtension});
  }
  #{$webpClassName} #{$selector} {
    background-image: url(#{$filePath}.webp);
  }
}

$webpClassName: '.webp';

$noWebpClassName: '.no-webp';

@mixin webpBg($selector, $filePath, $fileExtension: 'jpg') {

#{$noWebpClassName} #{$selector} {

}

#{$webpClassName} #{$selector} {

}

使い方↓

.box{
  @include webpBg('.test', '../images/bg', 'png');
}

.box{

@include webpBg('.test', '../images/bg', 'png');

}

CSSにコンパイルすると↓

.no-webp .box__inner {
  background-image: url(../images/bg.png);
}
.webp .box__inner {
  background-image: url(../images/bg.webp);
}

.no-webp .box__inner {

}

.webp .box__inner {

}