ブラウザはどんどん進化しており、新しい機能が日々追加されていっています。

しかし、残念ながら Internet Explorer および Edge については進化が遅れております。（IEについては進化は停止しています）

しかしながら、利用者数がそれなりに多いために対応はせざるを得ない状況が続いております。

そんなときに役に立つのが Polyfill と呼ばれるもので、古いブラウザでも新しい機能が使えるようにしたものです。Intersection Observer や Picture要素等、新しい機能が使えるようになります。

導入方法は簡単で、HTMLに下記のコードを入れるだけです。

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

この.jsファイルですが、使用環境により読み込まれるコードが変わるという仕組みになっておりまして、Google Chrome で開くとほとんど空っぽのコードしかありません。これはすでに新機能をすべてサポートしているので、polyfill が必要ないためです。

これを IE11 で開くと、膨大なコードが生成されるようになっています。（Edgeでも少しあります）

ネットワーク環境にも優しい設計ですね。

まぁ最新のCSSプロパティには対応できないのは仕方がないですが、それでも色々と改善されますので頼もしいですね。