[JavaScript]CSSがブラウザに対応していない場合のみpolyfillを読み込む

特定のCSSがブラウザに対応していない時に、polyfillを利用することがあります。
その際に、対応しているブラウザでは無駄な読み込みをしないために、対応しているかを判定して読み込む方法です。

JavaScript

Polyfillを反映させたいページに以下を記載します。
if (‘(1)CSSプロパティ’ in document.documentElement.style === false) {
    const el = document.createElement('script');
    el.src = ‘(2)polyfillURL’;
    document.body.appendChild(el);
}

1. 対応確認するCSSプロパティ名
   （ケバブケースで記載されているものはキャメルケースに変更）
2. 読み込むpolyfillのURL

サンプルコード

scrollBehaviorが対応していないページにpolyfillを適用する場合。
（jsフォルダにpolyfillを保存していると仮定）

polyfillは以下の「smoothscroll」を使用させていただきます。

GitHub - iamdustan/smoothscroll: Scroll Behavior polyfill

Scroll Behavior polyfill. Contribute to iamdustan/smoothscroll development by creating an account on GitHub.

github.com

if ('scrollBehavior' in document.documentElement.style === false) {
    const el = document.createElement('script');
    el.src = 'js/smoothscroll.js';
    document.body.appendChild(el);
}

解説

if (‘(1)CSSプロパティ’ in document.documentElement.style === false)

document.documentElement.styleには表示中のブラウザで利用可能なCSSプロパティが入っており、その中に指定したCSSプロパティがあるかどうかを判定します。

Const el = document.createElement('script');
el.src = 'js/smoothscroll.js';
document.body.appendChild(el);

判定の結果、無いのであれば、script要素を作成しsrcにURLを設定、bodyの最後に要素を追加します。

おまけ

Object-fitのpolyfill「object-fit-imags」を設定してみる。

GitHub - fregante/object-fit-images: 🗻 Polyfill object-fit/object-position on : IE9, IE10, IE11, Edge, Safari, ...

🗻 Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari, ... - GitHub - fregante/object-fit-images: 🗻 Polyfill object-fit/object-pos...

github.com

if ('object-fit' in document.documentElement.style === false) {
    const ofi = document.querySelectorAll('.ofi');
    ofi.forEach(i => {
        i.style.fontFamily = 'object-fit: cover';
    });
    var el = document.createElement('script');
    el.src = 'js/ofi.min.js';
    document.body.appendChild(el);
    el.onload = function() {
        objectFitImages();
    }
}