古いブラウザのサポートが重要な理由:最新のガイド

古いブラウザのサポート

現在、古いブラウザのサポートについてはあまり心配する必要はありません。 Internet Explorer 8 が廃止されて以来、それらは正常に機能し続けています。

しかし、次のような疑問が残ります。Internet Explorer 9 や他のブラウザをサポートするにはどうすればよいでしょうか?そもそも、Internet Explorer 9 のサポートを検討すべきでしょうか?

考慮すべき点をいくつか見ていきます。

ブラウザではなく機能を考えてください

世界には 2 つの機能と 2 つのブラウザしか含まれていないとします。

<オル>

ブラウザ A は機能 A をサポートしていますが、機能 B はサポートしていません。

ブラウザ B は機能 B をサポートしていますが、機能 A はサポートしていません。

どのブラウザがどの機能をサポートしているかを検出し、そこから動作することが可能です。

// This is JavaScript

if (Browser A) { // Code for A}

if (Browser B) { // code for B}

しかし、さらに多くのブラウザがある場合はどうなるでしょうか?世界にブラウザ C、D、E が含まれている場合はどうなるでしょうか?ブラウザのことを考えていると、必要な機能をサポートするのが難しくなります。

もっと良い方法があります。機能が存在するかどうかを確認できます。存在する場合はそれを使用します。そうでない場合は、フォールバック コードを提供してください。

次のコード ブロックは、ブラウザ A からブラウザ Z まで動作します。

// This is JavaScript

if (feature A) { // Code if browser contains feature A} else { // Code if browser doesn't contain feature A}

これで、ブラウザについて心配する必要がなくなります。

機能を使用するかどうかの決定

多くの人は、その機能をサポートするブラウザの数に応じて、その機能を使用するかどうかを決定します。しかし、 上で論じたようにブラウザは関係ないのです。

重要なのは、その機能のフォールバックを簡単にコーディングできるかどうかです。 フォールバックを簡単にコーディングできる場合は、この機能を使用してください。 フォールバックを簡単にコーディングできない場合は、この機能を使用しないでください。

サポートするブラウザの決定

まだカットオフが必要です。

どのブラウザをサポートしますか?

サポートしないブラウザは何ですか?ブラウザをサポートしたくない場合、そのブラウザ用のフォールバック コードを作成することは意味がありません。

私の最善の答えは、「誰があなたのサイトを使用しているかに注意してください」です。彼らはどのようなブラウザを使用していますか?それに応じて従ってください。

はい、Internet Explorer 6 であなたの Web サイトにアクセスしようとする異常値が存在する可能性があります。しかし、ほとんど誰も使用していないブラウザ用に追加のコードを記述する時間とエネルギーはありますか?

あなたのエネルギーを他の場所に費やしたほうが良いでしょうか?

サポートのレベル

サポートには 4 つのレベルがあると思います。

<オル>

すべてがすべてのブラウザで同じように見え、同じように動作する必要があります

サイトは同じように見える必要がありますが、機能はブラウザによって異なる場合があります

機能は同じである必要がありますが、ブラウザによって外観が異なる場合があります

見た目も機能もブラウザによって異なる場合があります

古いブラウザにはどのようなサポートを提供していますか?なぜですか?

まとめ

考えてみてください:

<オル>

サポートしようとしている古いブラウザをサポートしようとしているのはなぜですか?

どのレベルのサポートを提供していますか?

割り当てたリソースに見合う価値はありますか?

古いブラウザのサポート — CSS

CSS 機能のフォールバックを提供するには 2 つの方法があります。

<オル>

プロパティのフォールバック

機能クエリ

プロパティのフォールバック

ブラウザがプロパティまたはそれに対応する値を認識しない場合、ブラウザはそのプロパティを完全に無視します。

これが発生すると、ブラウザは見つけた以前の値を使用、またはフォールバックします。

これは、フォールバックを提供する最も簡単な方法です。

以下に例を示します。

.layout { display: block; display: grid; }

この例では、CSS グリッドをサポートするブラウザは display: grid を使用します。 。 CSS グリッドをサポートしていないブラウザは display: block にフォールバックします。 .

デフォルト値を省略します

使用している要素のデフォルトが display: block の場合 、display: block は省略できます。 宣言。これは、1 行のコードで CSS グリッドをサポートできることを意味します。

.layout { display: grid; }

CSS グリッドをサポートするブラウザは、grid-template-columns などの他の CSS プロパティを読み取ることができます。 。 CSS グリッドをサポートしていないブラウザでは使用できません。

これは、フォールバック値を気にせずに追加の CSS グリッド プロパティを作成できることを意味します。

.layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1em; }

機能クエリ、または @supports は、CSS プロパティまたはそれに対応する値がブラウザでサポートされているかどうかを示します。

if/else のような CSS 機能クエリを考えることができます。 JavaScript のステートメントです。 それらは次のようになります:

@supports (property: value) { /* Code when property or value is supported*/}

@supports not (property: value) { /* Code when property or value is not supported */}

@supports ブラウザに CSS のみ を読み取らせたい場合に役立ちます。 特定のプロパティをサポートしている場合。

上で示した CSS グリッドの例では、次のようにすることができます。

@supports (display: grid) { .layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1em; padding-left: 1em; padding-right: 1em; }}

この例では、padding-left と padding-right @supports の両方をサポートするブラウザでのみ読み取られます。 そして CSS グリッド。

Jen Simmons が @supports のより良い例を示しています。 仕事中。彼女は機能クエリを使用して、ブラウザが -webkit-initial-letter のようなプロパティをサポートしているかどうかを検出します。 .

@supports (initial-letter: 4) or (-webkit-initial-letter: 4) { p::first-letter { -webkit-initial-letter: 4; initial-letter: 4; color: #FE742F; font-weight: bold; margin-right: 0.5em; }}

Jen の例では、サイトはどのブラウザーでも同じに見えるべきでしょうか?という疑問が生じます。これについては後で見ていきます。まず、機能クエリについて詳しく説明します。

機能クエリのサポート

機能クエリは大きな支持を得ています。現在の主要なブラウザはすべて、機能クエリをサポートしています。

機能はサポートされているが、機能クエリがサポートされていない場合はどうなりますか?

これはかつては難しい部分でした。ジェン・シモンズ氏や他の専門家は、この可能性について私たちに警告しています。この記事でその対処方法を読むことができます。

これが私の見解です。IE 11 はもうサポートしていないので、上で述べた方法で機能クエリを使用しています。

プロパティ フォールバックと機能クエリを同時に使用する

次のコードを見てください。ブラウザはどのようなパディング値を適用しますか?

@supports (display: grid) { .layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1em; padding-left: 1em; padding-right: 1em; }}

.layout { padding-left: 2em; padding-right: 2em; }

答えは次のとおりです。すべてのブラウザは 2em を適用します。

なぜですか?

これは padding-left: 2em が原因で発生します。 と padding-right: 2em 後から CSS ファイルで宣言されます。後で宣言されたプロパティは、以前に宣言されたプロパティをオーバーライドします。

padding-left: 2em を実行したい場合 と padding-right: 2em 適用のみする 対応していないブラウザには CSS グリッドをサポートすると、プロパティの順序を入れ替えることができます。

.layout { padding-left: 2em; padding-right: 2em; }

@supports (display: grid) { .layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1em; padding-left: 1em; padding-right: 1em; }}

注意 :カスケード的な性質があるため、CSS で最初にフォールバック コードを宣言することを常に推奨します。

これは、@supports の両方を使用している場合も意味します。 そして @supports not 、@supports not を宣言する必要があります。 まず。これにより、コードの一貫性が保たれます。

/* Always write "@supports not" first if you use it */@supports not (display: grid) { .layout { padding-left: 2em; padding-right: 2em; }}

@supports (display: grid) { .layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1em; padding-left: 1em; padding-right: 1em; }}

次に、サイトがどのブラウザでも同じように見えるべきかどうかについて話しましょう。

サイトはどのブラウザでも同じように見えるべきですか?

サイトはどのブラウザーでも同じように見えるべきだと信じている人もいます。彼らはブランディングが重要であると考えており、ブランドを維持するにはサイトの見た目に一貫性を持たせる必要があると強調しています。

他の人はノーと言います。彼らは、進歩的な強化の精神を受け入れる必要があると信じています。これらにより、より優れたブラウザをユーザーにさらに多くの愛を与えることができます。

どちらの意見も正しいですが、異なる角度からのものです。

最も重要な視点はユーザーからのものです。 あなたのサイトは、ユーザーが求めているものをユーザーに提供できていますか?

「はい」の場合、一貫性についてあまり厳密にする必要はありません。さあ、より優れたブラウザを使用しているユーザーにさらに優れたエクスペリエンスを提供してください!

まとめ

CSS 機能のサポートを提供するには、以下を使用できます。

<オル>

プロパティのフォールバック

機能クエリ

CSS を記述するときは、サポートが強化されたブラウザ用の他のコード セットよりも前に、フォールバック コードを最初に宣言するようにしてください。

古いブラウザのサポート - JavaScript

古いブラウザに JavaScript サポートを提供するのは簡単です。ほとんどの場合、必要なのはポリフィルを使用するだけです。

しかし、できることは他にもあります。

ポリフィルとは何ですか?

ポリフィルは、ブラウザに JavaScript 機能の実装方法を指示するコードの一部です。ポリフィルを追加したら、サポートについて心配する必要はなくなります。うまくいきます。

Polyfill の仕組みは次のとおりです。

<オル>

機能がサポートされているかどうかを確認します

そうでない場合は、その機能をサポートするコードを追加します

以下はポリフィルが機能する例です。ブラウザが Array.prototype.find をサポートしているかどうかを確認します。 。ブラウザが Array.prototype.find をサポートしていない場合 、それをサポートする方法をブラウザに伝えます。

このコードは MDN で見つけることができます。

if (!Array.prototype.find) { Object.defineProperty(Array.prototype, 'find', { value: function(predicate) { // 1. Let O be ? ToObject(this value). if (this == null) { throw new TypeError('"this" is null or not defined'); }

var o = Object(this);

// 2. Let len be ? ToLength(? Get(O, "length")). var len = o.length >>> 0;

// 3. If IsCallable(predicate) is false, throw a TypeError exception. if (typeof predicate !== 'function') { throw new TypeError('predicate must be a function'); }

// 4. If thisArg was supplied, let T be thisArg; else let T be undefined. var thisArg = arguments[1];

// 5. Let k be 0. var k = 0;

// 6. Repeat, while k < len while (k < len) { // a. Let Pk be ! ToString(k). // b. Let kValue be ? Get(O, Pk). // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). // d. If testResult is true, return kValue. var kValue = o[k]; if (predicate.call(thisArg, kValue, k, o)) { return kValue; } // e. Increase k by 1. k++; }

// 7. Return undefined. return undefined; }, configurable: true, writable: true });}

注意 :ポリフィルはシムのサブセットです。 shim は、古い環境に新しい API をもたらすライブラリです。

ポリフィルの使用

ポリフィルを使用するには 2 つの方法があります。

<オル>

上記の例のように手動でポリフィルを行う

ライブラリを通じて一度に多くのポリフィルを追加する

手動でのポリフィル

まず、ポリフィルを検索する必要があります。 必要です。グーグルで検索すれば見つかるはずです。賢明な開発者は、必要なもののほぼすべてに対応するポリフィルを作成しました。

ポリフィルを見つけたら、上記のプロセスを使用します。 古いブラウザへのサポートを提供するために作成します。

一度に多数のポリフィルを追加する

一部のライブラリには多くのポリフィルが含まれています。 ES6-shim はそのようなライブラリの一例です。古いブラウザ上のすべての ES6 機能のサポートを提供します。

最先端の JavaScript 機能の使用

最先端の JavaScript 機能を使用したい場合は、ビルド プロセスに Babel を追加することを検討してください。

Babel は JavaScript をコンパイルするツールです。このコンパイル プロセス中に、次のことが可能になります。

<オル>

必要なシム/ポリフィルを追加します

プリプロセッサを JavaScript にコンパイルする

2 番目のポイントの詳細:

Babel はビルド プロセスでオフラインで動作します。渡されたファイルを読み取り、それらのファイルをブラウザが読み取れる JavaScript に変換します。

これは、Flow、TypeScript、および聞いたことのあるその他の優れたテクノロジーなどの最先端の機能を使用できることを意味します。最初に Babel を通過させれば、これらはすべてブラウザで動作します。

ポリフィルだけでは不十分な場合はどうすればよいですか?

ポリフィルだけではこの機能をサポートできない場合は、問題のブラウザに提供するサポートの量を再検討してください。

異なるブラウザ間で同じ機能を提供する必要がありますか?代わりに、プログレッシブ エンハンスメントを検討する必要があるかもしれません。

この機能を使用しない方法でコーディングできるでしょうか?

おそらくたくさんの可能性がありますが、傾向はわかります。

ブラウザがこの機能をサポートしているかどうかを確認するにはどうすればよいですか?

まず、caniuse.com をチェックします。必要な JavaScript 機能の名前を書き込むと、ブラウザのサポート レベルを確認できます。

アボート コントローラ

を使用した例を次に示します。

caniuse.com から何も情報が得られない場合は、MDN を確認します。ほとんどの記事の下部にブラウザのサポートが表示されます。

ここでもコントローラーを中止する例を示します。

JavaScript のコストに注意

ポリフィルを使用する場合は、さらに JavaScript コードを追加します。

JavaScript をさらに追加する場合の問題は、JavaScript がさらに多くなるということです。そして、JavaScript の使用量が増えると、さらに多くの問題が発生します。

<オル>

古いブラウザは通常、古いコンピュータにインストールされています。十分な処理能力がない可能性があります。

JavaScript バンドルにより、サイトの読み込みが遅れる可能性があります。詳細については、Addy Osmani 著「JavaScript のコスト」を参照

まとめ

JavaScript 機能のサポートを追加するのは簡単です。ほとんどの場合、ポリフィルを追加して終わりです。ただし、その場合は JavaScript のコストに注意してください。

場合によっては、この機能を完全に廃止した方がよい場合もあります。

なぜ古いブラウザをサポートしているのですか?

なぜ古いブラウザを気にする必要があるのですか?

古いブラウザを使用しているのは誰ですか?おそらく、古いコンピュータを使用しているユーザーでしょうか?

古いコンピュータを使用している場合、新しいコンピュータを購入するお金がない可能性があります。

新しいコンピュータを買うお金がなければ、おそらくあなたからは何も買わないでしょう。

彼らがあなたから何も買わないのであれば、なぜ彼らのブラウザのサポートに気を配る必要があるのでしょうか?

ビジネスマンにとって、それはまったく合理的な思考回路です。しかし、なぜ私たち開発者は依然として古いブラウザのサポートにこだわるのでしょうか?

詳しく見てみましょう

元の思考プロセスには非常に多くの前提条件が存在します。

「古いブラウザを使用しているのは誰ですか? おそらく、古いコンピュータを使用しているユーザーでしょう? 彼らが古いコンピュータを使用している場合、おそらく新しいコンピュータを購入するお金がないでしょう。」

人々が古いコンピュータを使用しているために古いブラウザを使用しているのは事実ですが、人々が新しいコンピュータを購入する余裕がないとは考えられません。

• おそらく会社は彼らに製品を購入したくないのでしょう。
• おそらく彼らは自分のコンピュータに満足していて、アップグレードしたくないのでしょう。
• おそらく、コンピュータをアップグレードするための知識がありません。
• 新しいコンピュータにアクセスできない可能性があります。
• おそらく、優れたブラウザを搭載していない携帯電話を使用している可能性があります。

仮定しないでください。

新しいコンピュータを買うお金がなければ、おそらくあなたからは何も買わないでしょう。彼らがあなたから何も買わないのであれば、なぜ彼らのブラウザのサポートに気を配る必要があるのでしょうか?

この点について話すには、他の領域にズームアウトする必要があります。

車椅子でのアクセス

シンガポールに行ったことがある方は、ほぼすべての階段の隣にスロープまたはエレベーターがあることに気づくでしょう。

しかし、なぜでしょうか？なぜ政府や民間企業はエレベーターやスロープにお金をつぎ込むのでしょうか?人々を低いところから高いところへ運ぶのに階段だけで十分なのに、なぜ階段を建てる必要があるのでしょうか?

階段を使えない人もいるそうです。彼らは自分の足で歩くことができません。彼らは車椅子に座らなければならず、自力で階段を上ることもできません。エレベーターとスロープはこれらの人々に役立ちます。

そして、より多くの人がエレベーターやスロープの恩恵を受けていることが判明しました。

<オル>

膝が弱い人

自転車やスクーターを持っている人

ベビーカーを押している保護者

車輪の付いたものを押していることに気付いたら、何も考えずにスロープやエレベーターを使ってしまうでしょう。あなたにもメリットがあります。

しかし問題は、スロープやエレベーターを操作しても誰も 1 セントも稼がないということです。では、なぜそれらを構築するのでしょうか?

なぜならそれだけの価値があるからです。

また、価値とは必ずしもお金を意味するわけではありません。

地球温暖化について考える

あなたは地球に住んでいます。地球温暖化についてどう思いますか?

気にしない人もいます。森が焼けても大丈夫。企業が河川を汚染し、何トンもの二酸化炭素を大気中に放出しても問題ありません。彼らには影響しません。

しかし、それを気にする人々のグループがいます。彼らは私たちが住んでいる地球を愛しています。彼らは子供たちに、より住みやすい場所を与えたいと考えています。彼らが気にかけている理由はたくさんあります。そしておそらく、できるだけ多くのリソースを節約したいと考えているでしょう。

あなたはどこに立っていますか?

運営中に地球を破壊する会社にお金をあげますか?

もしかしたらそうなるかもしれません。もしかしたらそうしないかもしれません。もしかしたら気にしないかもしれません。 3 つのオプションはすべて有効です。

繰り返しになりますが、重要なのは必ずしもお金の問題ではありません。

ウェブはすべての人のためのものです

ウェブの背後にある夢は、情報を共有することでコミュニケーションを図る共通の情報空間です。

— ティム・バーナーズ・リー

私たちフロントエンド開発者は Web の管理者です。ウェブがどうなるかは私たち次第です。スロープやエレベーターの建設を全員に強制することはできませんが、自分たちで確実に建設することはできます。

実際、選択はあなた次第です。

気にしたくない場合は気にする必要はありません。

私が知っている中で最も優れたフロントエンド開発者は何ですか?彼らは気にしています。彼らは包括的であることを選択します。それが私たちをフロントエンド開発者たらしめているのです。

しかし、時には制約や限界があることもあります。そして、私たちはそれらの制限に対処します。

この記事はもともと私のブログに投稿されたものです。
より優れたフロントエンド開発者になるために役立つ記事をもっと知りたい場合は、ニュースレターに登録してください。

無料でコーディングを学びましょう。 freeCodeCamp のオープンソース カリキュラムは、40,000 人以上の人々が開発者としての職に就くのに役立ちました。始めましょう