🛠JavaScriptでブラウザが疑似要素・疑似クラス・メディアクエリ特性・プロパティに対応しているか判定する

ブラウザが特定のCSSに対応しているかどうかをJavaScriptで判定する方法です。最近ではCSSの@supportsクエリが実装されているのであまり使うことはないかもしれませんが、CSSの対応状況を調べたいときなどに使えます。

疑似要素と疑似クラスの判定

document.querySelector()関数に疑似要素や疑似クラスを指定すると、ブラウザが対応していない場合にエラーとなります。そこで、try-catch文を使い、エラーの際は非対応と判定しています。document.querySelector()関数に対応していない場合はnullを返します。

const support = pseudo => {
  try {
    if (!document.querySelector) return null
       
    document.querySelector(pseudo)
  } catch {
    return false
  }

  return true
}

疑似クラスで引数を指定する必要があるものは必ず指定しないと、非対応として判定されてしまうので注意してください。

console.log(support(':hover'))         // => true
console.log(support(':hoverrrr'))      // => false
console.log(support('::before'))       // => true
console.log(support(':nth-child'))     // => false
console.log(support(':nth-child(1)'))  // => true

メディア特性の判定

window.matchMediaを使ってメディアクエリを記述し、メディア特性を判定しています。

const support = feature => {
  return matchMedia(`not all and (${feature}), (${feature})`).matches
}

引数にメディア特性を指定します。

console.log(support('foo'))                   // false
console.log(support('min-width'))             // true
console.log(support('prefers-color-scheme'))  // true

プロパティの判定

HTMLElement.style.cssTextにCSSを指定し、HTMLElement.style.lengthでプロパティがブラウザに認識されているかどうかを判定しています。

const support = (property, value) => {
  const div = document.createElement('div')
  div.style.cssText = `${property}: ${value}`

  return div.style.length
}

引数にプロパティと値を指定します。

console.log(support('display', 'block'))          // true
console.log(support('top', 'calc(100% - 50px)'))  // true