Zenn
✍️

CSSのGradientをJSで上書きする際のCross Browser対応

2020/09/18に公開
CSS
JavaScript
gradient
crossbrowser
tech

概要

  • CSSのグラデーションlinear-gradientをJavaScriptで上書きしようとした際に、ブラウザ間で表示が異なる (※2019年2月時点)
  • 結論からいうと -webkit-gradient を使用することで対応が可能です。
  • Volumeなど、動的に動かす必要のあるIndicatorを作成する際に、参考になるかと思います。

CSSの場合

  • linear-gradientと-webkit-linear-gradientのみの指定で、Chrome, Safari, Firefoxに対応できる
  • Firefoxも-webkit-linear-gradientで表示を確認
  • Can I Use...を参照

JavaScriptの場合

JSでstyleを上書きしようとして、嵌ったのがSafariでした。CSSの場合は-webkit-linear-gradientで問題ないのですが、JSで書き換えようとするとうまくいきませんでした。

解決策

調査・検証をしたところ、-webkit-gradientだとChrome, Safari, Firefoxに対応できそうです（ただしIEは未確認）。確認のためサンプルコードを書きましたので、各ブラウザでご確認ください。

実装例

const box2 = document.getElementById('webkit-gradient')
box2.style.background = '-webkit-gradient(linear, left top, right top, color-stop(0.5, red), color-stop(0.5, blue))'

Discussion