【JavaScript】ブラウザ毎に使用出来ないcssを判別して分岐する方法【IE対策】

ブラウザ毎に使用出来ないcssを判別して分岐する方法

まずは以下の関数を定義します。

function detectUseStyle(property, value) {
  var div = document.createElement('div');//空中にdivを作成
  div.style.setProperty(property, value);//作成したdivにスタイルをセット
  return div.style.getPropertyValue(property).indexOf(value) !== -1;//セットしたスタイルがあればtrueを返す
}

使い方

先程定義した関数をif文の条件で呼び出します。
第1引数にcssのプロバティ、第2引数にcssの値をセットします。
引数に指定したcssがそのブラウザで使用出来なければfalseを返します。

if(!detectUseStyle('cssのプロバティ', 'cssの値')) {
  //ここに書いたjavascriptが
  //引き数で指定したcssが使えないブラウザで実行されます
}

使用例

以下の使用例はposition: sticky;が使えないブラウザ（IE）で実行されます。

if(!detectUseStyle('position', 'sticky')) {
  //position: stickyが使えないブラウザで実行されます。
}

解説

javascriptの.styleに.setProperty()などでスタイルをセットしたときその使用しているブラウザで使用できないスタイルだった場合はセットされません。

つまり.getPropertyValue()で取得しようとした場合に中身がカラになっていることを利用しています。

おまけ：モジュール化

僕は以下のようにモジュール化して使用しています。
export してるだけで先程のものとほぼ同じです。

export default function detectUseStyle(property, value) {
  const div = document.createElement('div');//空中にdivを作成
  div.style.setProperty(property, value);//作成したdivにスタイルをセット
  return div.style.getPropertyValue(property).indexOf(value) !== -1;//セットしたスタイルがあればtrueを返す
}

インポート

読み込みのパスは各自あわせて下さい

import detectUseStyle from './modules/detectUseStyle.js';

実行

if(!detectUseStyle('cssのプロバティ', 'cssの値')) {
  //ここに書いたjavascriptが
  //引き数で指定したcssが使えないブラウザで実行されます
}

最後に

今回ご紹介した方法はブラウザ毎と言いながらほぼIE用ですw