ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

IEでも使いたい!polyfillを使えばIE11でも使える便利CSS 3選

IEでも使いたい!polyfillを使えばIE11でも使える便利CSS 3選

「便利なCSSを使いたいけどIE非対応なので使えない」
「なんとかして便利なCSSをIEでも使えるようにしたい」

悩み

こういった悩みにお答えします。

目次
  1. IEのCSS3対応状況
  2. IEで使えないCSSプロパティ
    1. object-fit
    2. position:sticky;
    3. カスタムプロパティ (CSS変数)
  3. polyfillはIEだけに読み込む
  4. まとめ

IEのCSS3対応状況

IEの最新バージョンIE11では、サポートされていないCSSが多くあります。
IEはEdgeに移行しているので、今後、アップデートされることはありません。

ただ、日本のブラウザシェアで、IE11は2位で10%程度あり、簡単に無視するのは難しい状況です。

WebブラウザシェアランキングTOP10(日本国内・世界) | ソフトウェアテスト・第三者検証ならウェブレッジ

日本国内・世界それぞれのWebブラウザシェアランキングTOP10を紹介しております。

IEが対応していないCSSをpolyfillと呼ばれるJavaScriptを使って、CSSと同じように動くようにして対応していきます。

IEで使えないCSSプロパティ

object-fit

imgタグで読み込む画像ファイルを、背景画像のbackground-sizeと同じように、指定したサイズに合わせてcontainやcoverを使えるようになります。

このpolyfillを使います。

// object-fit
<script src="//cdnjs.cloudflare.com/ajax/libs/object-fit-images⁄3.2.4/ofi.min.js"></script>

object-fitについてはこちらの記事で解説しています。

CSSでimg画像をトリミングしたい! object-fitの使い方【IEにも対応】

CSSのobject-fitを使って画像をトリミングする方法を知りたいですか?この記事では、object-fitの基本的な使い方、IEの対応方法、効率的な使い方を紹介しています。ぜひご覧ください。

position:sticky;

スクロール途中で指定した要素を固定することができます。

このpolyfillを使います。

// position:sticky;
<script src="://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.min.js"></script>

position:sticky;についてはこちらの記事で解説しています。

ヘッダー、サイドバーを固定表示させたい!position:sticky;の使い方 + IE対応 デモあり【CSS】

スクロールと連動してヘッダーやサイドバーを固定表示させたいですか?この記事では、position:sticky;の使い方、また、CSSが対応していないIEへの対応方法を紹介しています。ぜひご覧ください。

カスタムプロパティ (CSS変数)

JavaScriptやPHPなどプログラミングができる人であればおなじみの変数がCSSでも使えるようになります。

CSSで変数が使えるようになると大規模サイトや複数人でのコーディング、運用後のメンテナンスが簡単になります。

このpolyfillを使います。

// css-variables
<script src="//cdnjs.cloudflare.com/ajax/libs/css-vars-ponyfill/2.3.2/css-vars-ponyfill.min.js"></script>

カスタムプロパティについては、Webクリエイターボックスの記事で詳しく解説されています。

CSSで変数(カスタムプロパティ)を使ってみよう

プログラミングではおなじみの変数。SassやLESSといったCSSプリプロセッサーをお使いの方もよく使うものですね。この一度定義しておけば繰り返し利用できる便利な変数が、CSSでも使えるようになりました!今回はCSS変数 […]

読み込むpolyfillのJavaScriptのCDNをコピペ用にまとめておきます。

// object-fit
<script src="//cdnjs.cloudflare.com/ajax/libs/object-fit-images⁄3.2.4/ofi.min.js"></script>
// position:sticky;
<script src="//cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.min.js"></script>
// css-variables
<script src="//cdnjs.cloudflare.com/ajax/libs/css-vars-ponyfill/2.3.2/css-vars-ponyfill.min.js"></script>

polyfillはIEだけに読み込む

polyfillはJavaScriptを読み込むだけですが、Chromeなど対応しているブラウザでは読み込む必要がありません。
普通に読み込むだけでもいいのですが、不要なブラウザでは読み込み速度が遅くなってしまいます。
なので、PHPが使える環境であれば、ユーザーエージェントを判定してIEだけに読み込まれるようにします。

$browser = strtolower($_SERVER['HTTP_USER_AGENT']);
if (strstr($browser , 'trident') || strstr($browser , 'msie')) {
  // ここにIEのときだけに行う処理を書く
}

まとめ

polyfillを使えばIE11でも使える便利CSSを紹介しました。

IE非対応のために、使うことをあきらめていたCSSを使うことができるとコーディング作業がとても楽になります。
CSSだけでできることはCSSでやらせていくと、Webサイトの運用・管理が楽になり、アニメーションなどの動きもスムーズになることが期待できます。