Polyfillを使ってIEでもカスタムプロパティを使う方法

webサイトやwebサービスは公開後も改善や拡張を繰り返すため、保守性はとても大切です。保守性の高いサイトを制作することで、後のコストを下げる事が出来ます。

コーディングでは、カスタムプロパティ(CSS 変数)を利用する事で、保守性を上げる事が出来ます。しかし、カスタムプロパティはIEでは使えません。

この記事では、Polyfillを使ってカスタムプロパティをIEでも使う方法を紹介します。

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています！

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。無料相談もお気軽にお申し込みください。

👆 メンターやってます 👆

カスタムプロパティとは

カスタムプロパティとは、繰り返し利用される特定の値を管理するための機能です。プログラミング言語の変数と同じような機能です。

<h1 class="title">タイトル</h1>
<p class="text">テキストです。テキストです。テキストです。</p>

:root {
    --color-primary: #4072B3;
    --color-secondary: #AEC4E5;
    ...
}

.title{
    color: var(--color-primary);
}

.text{
    background-color: var(--color-secondary);
}

仮にサイト内に100箇所--color-primaryがあり、カラーが変更になった場合でも、#4072B3を修正するだけで100箇所全てに反映されます。

この記事では紹介しませんが、カスタムプロパティには色々と便利な特徴があるので、まだ何が出来るか理解していない方は勉強してみてください。

Polyfillとは

Polyfillとは、特定のブラウザがサポートしていない機能を動かすための、代わりのコードです。ほとんどはJavaScriptで作られています。

今回も、本来IEでカスタムプロパティは使えませんが、Polyfill(jsのコード)がIEの時もうまく補ってくれていることになります。

【初学者・中級者の方】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

初級者から中級者まで対応できる、数少ないサービスです。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターは全員現役エンジニア 👆

Polyfillを使ってIEでもカスタムプロパティを使う方法

前述した通り、カスタムプロパティはIE非対応です。

• カスタムプロパティをどうしても使いたいけど、IEも対応したい...

そんな時は、Polyfillを使えば簡単に対応できます。

例えば、ダークモードの実装をする場合は、カスタムプロパティはとても便利です。IE対応も必要であれば、今回紹介する方法で対応します。

ここでは2つの方法を紹介します。

CDNを使う方法

今回は、jsDelivrという CDN サービスを使います。サイト内で『ie11-custom-properties』と検索すると、ie11-custom-propertiesのリンクが表示されます。

画像赤枠内のCopy HTMLを選択し、コピーします。あとは HTML内で読み込めば完了です。

<script src="https://cdn.jsdelivr.net/npm/ie11-custom-properties@4.1.0/ie11CustomProperties.min.js"></script>

たったこれだけで、IEでもカスタムプロパティが使えるようになります。

自分のサーバーに置く方法

ファイルをダウンロードし、読み込む方法でも対応出来ます。CDN同様、ie11-custom-propertiesから取得出来ます。

赤枠内のアイコンをクリックするとie11-custom-properties-4.1.0.tgzがダウンロードされます。ファイルを解凍し、ファイル内にあるie11CustomProperties.jsを自身のプロジェクトに配置します。

<script src="js/libs/ie11CustomProperties.js"></script>

HTML内で読み込めば完了です。

IEは2022年6月でサポート終了

Microsoftは2022年6月16日にIEのサポートを終了しました。2022年6月16日以降にユーザーがアクセスした場合、Edgeにリダイレクトされます。

従って、今は特別な理由がない限り、今回の方法は必要ありません。

独学に限界を感じていませんか？

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

👇 こんな方のためのサービスです。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク / 契約期間の縛りなし / 入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。無料相談もお気軽にお越しください。(無理な営業等一切ございません！)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし