1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CSS変数でbackground-imageを指定するとChromeとSafariで挙動が異なるのを解決する

Last updated at Posted at 2021-07-29

Chrome と Safari で挙動が違う

CSS変数で background-image を指定したら Chrome と Safari で挙動が違ったので備忘録として残しておきます。

失敗した実装

下記のようにCSS変数を使って指定します。
https://xxx.xxx/test/ という URL で想定しています。

動作サンプル
https://sygnas.github.io/cssvar-sample/

/test/index.html
<link rel="stylesheet" href="./css/hoge.css">
<div class="imgbox" style="--img:url('../img/foo.jpg')"></div>
/test/css/hoge.css
.imgbox{
  background-image: var(--img);
}

結果

Chrome は表示されるが、Safari は表示されない。

問題点

相対パスで画像を指定した時、下記のような違いがあるようです。

Chrome : OK : CSSファイルを起点とした相対パスとして処理

https://xxx.xxx/test/css/hoge.css を起点とした ../img/foo.jpg
https://xxx.xxx/test/img/foo.jpg

###Safari : NG : 表示URLを起点として処理
https://xxx.xxx/test/ を起点とした ../img/foo.jpg
https://xxx.xxx/img/foo.jpg

解決策① 絶対パス

絶対パスで指定する。
一番簡単な解決方法です。

/test/index.html
<div class="imgbox" style="--img:url('/test/img/foo.jpg')"></div>

しかし相対パスしか使えないパターンもあるので今回は別の方法を模索します。

解決策② HTML 側に CSS を記述

HTML 側に記述すれば Chrome、Safari どちらも問題ありません。

Vue や React ではコンポーネント内に CSS を書くことが多いのでこちらの方法もアリですね。
変則的ですが background-image の部分だけ HTML 側に書くという方法もあります。

/test/index.html
<link rel="stylesheet" href="./css/hoge.css">
<style>
.imgbox{
  background-image: var(--img);
}
</style>
<div class="imgbox" style="--img:url('./img/foo.jpg')"></div>
/test/css/hoge.css
.imgbox{
  /* background-position とか他の部分はここに書く */
  background-size: contain;
  background-position: center center;
  /* background-image: var(--img); */
}

おわり

CSS の挙動については Safari が IE のような立ち位置になりつつあり困りますね……。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?