ブラウザ互換性へのイントロ

このポストでは、

ブラウザ互換性

Caniuseからデータを活用する方法を学んでください

ブラウザの接頭辞を定義する

AutoprefixerとGulpでprefixを自動化することを学んでください

これは、初心者のためのウェブ開発を学ぶ上で15番目のポストとビデオです.Learn more about the series and see the post schedule >
次のビデオを見ることができるか、次の拡張された転写と一緒に従ってください.
Review the source code >
このレッスンを始めるためにstarter project あなたはエピソード1、または3で始まったreview the source files エピソード14から.
まず、ブラウザの互換性を意味します.

Browser compatibility refers to the fact that not all CSS properties are supported, or not supported in the same way, across all browsers.

デスクトップの互換性を考えるとき、私たちはしばしばChrome、Firefox、Safari、Internet Explorerに集中します.また、Amazon SilkなどのOpera Miniや独自のメーカーブラウザなどのモバイル固有のブラウザもあります.いくつかのブラウザーは、優先的にアジアの好ましいUCブラウザのような特定の地域に向けられます.

一般的に、クロム、Firefox、Safari、およびInternet Explorer(別名IE)のエッジとに焦点を当て、ほとんどのユーザーのための許容範囲を取得する場合は、主に非米国または非英語圏のユーザーにマーケティングしていない限り.私は個人的にこれらの課題に精通していないので、私はあなたのターゲットオーディエンスのための人気のブラウザを研究することをお勧めします.
つのツールは、CSSのプロパティの両方のブラウザの互換性を発見するのに役立つだけでなく、観客の推定ブラウザの使用は、Caniuseと呼ばれています.
訪問caniuse.com そして、私たちはカードレッスンで使用されるディスプレイ値であり、CSSに比較的新しいプロパティである“Grid”を探します.

このリソースを使用する私の典型的なプロセスは、最初に使用率をチェックすることです.このレッスンを書くことのように、その数は93.5 %で推定されます.そして、それはあなたが訪問者の93.5 %が格子に良い支持を持っているブラウザーを使用すると予想することができることを意味します.
それから、私は我々が言及したトップ4つのブラウザーを見ます.理由は、2020年1月15日まで、Internet Explorerが悪意をもってグリッドを含むCSSへのより最近の追加を支持して遅れているということです.その時点で、IEはChromeブラウザであることに変わりました.そして、それは現在Chromeとの互換性で非常に匹敵することを意味します.
Caniuseは、緑の完全互換性を強調し、赤での非互換性、および黄色の部分的なサポートを強調表示します.IE 12 - 15のような黄色い細胞の上にホバーすることができます、そして、我々はサポートされていないかもしれないことに関する詳細な情報を与えられます.この場合、それはブラウザのバージョンのこのセットのためにだけであると言います-ms プレフィックス
HMM -接頭辞は何ですか?

A prefix refers to the way browser makers flag certain in-progress feature additions and is commonly used to onboard new CSS properties.

ブラウザのメーカーが適切に機能をサポートした後、CSSプロパティスペックが十分に完了したら、CSS仕様で決定された名前と値を支持して、後のバージョンのプレフィックスを削除することができます.
私たちは、接頭語を生成するために別のツールを使用することができますautoprefixer.github.io .

更新します.example 左側のエディタのクラス.card-row ジャストクラスdisplay: grid . 右側では、AutoPrefixerは値のプリバージョンされたバージョンを生成します.-ms-grid .
我々がCaniuseから知っているので、接頭語がIEの古いバージョンで必要とされるだけであるので、プレフィックスと未display 値が含まれます.これは、ほとんどのブラウザ間で互換性の最良のチャンスを提供します.CSSのカスケードのために、それはまた、規則の範囲内で順序で最後に未定義のプロパティ名が最後であることが重要です.
プロジェクトをvscodeで開きましょう.
今日、プロジェクトを実行する前に、AutoPrefixerをビルドに追加して、オンラインツールに来て手動で追加するのではなく、接頭辞を追加することができます.
端末で、型npm install --save-dev autoprefixer AutoPrefixerをインストールするには
インストール完了後、私たちも実行する必要がありますnpm install --save-dev gulp-postcss autoPrefixerをビルドプロセスに利用できるようにするヘルパーとして.
次に、オープンgulpfile.js そして、トップで我々は加えます:

    const postcss = require("gulp-postcss");
    const autoprefixer = require("autoprefixer");

これはこれらのツールをロードします、そして、それから、我々はstyle したがって、以下のようにして関数を含めることにします.

    // .src(paths.styles.src)
    .pipe(postcss([autoprefixer({ grid: true })]))
    // .pipe(gulp.dest(paths.styles.dest))

順序が問題であるので、私たちはファイルを送る前にそれを含んでいますdist 最終的に、配布されたファイルがブラウザ接頭辞を含むように、フォルダ.
最後に、我々は開く必要があるpackage.json を追加し、browserslist ファイルの最後に配列を指定します.

    "browserslist": [
        "last 2 versions",
        "> 0.2%",
        "not dead"
      ]

これはブラウザの最後の2つのバージョンをサポートするために必要なものをプレフィックスにすることを意味します.これをチェックすることによって何が含まれているブラウザを正確に表示することができますbrowserl.ist サービス

デモンストレーション目的のために、我々は一時的にもう一つのものを変えますgulpfile.js ファイル.
にwatch 関数を設定しましょうbaseDir: "./dist/" ソースファイルの代わりにコンパイルファイルをブラウザに提供する.ブラウザーでプリフィックスされたスタイルを見ることができます.
次のコマンドを入力します.npm run start プロジェクトを実行し、ブラウザURLを更新するには/card-layout.html .
我々は開く必要があるcard-layout.css とだけでトリガをトリガするautoprefix 実行するプロセス.事前に修正を加えたので、以前に保存したファイルにはまだ行っていません.
ブラウザを見る前に、私たちは、グリッドの特定のプロパティとIEとの互換性に関して、端末にカップルの新しいメッセージを持っていることを確認します.

ブラウザで我々のスタイルを見るために変わりましょう.我々はクロムを使用しているので、我々は完全なグリッドをサポートしている.しかし、検査し、見てみましょう.card-row .

あなたは今、検査官は、固定されたバージョンが交差表示されることがわかります.それは、それらの接頭辞がChromeでサポートされていなくて不要であるからです.代わりに、それはそれらの上にスキップされ、単にdisplay: grid .
テストをトグルするdisplay: grid , Chromeは、それを認識していないので、すべてのグリッドディスプレイを使用することはできません-ms プレフィックス

我々は、我々が2009年にした変化を戻すことができますgulpfile.js 仕えるsrc 再び.
今、私たちが学んだように、あなたのCSSを書き続けることができます、そして、AutoPrefixerがプロパティがprefixedを必要とすると認めるならば、それは自動的にあなたのためにそれをします!
我々は完全にこのレッスンでそれを探索する時間がかかることはありませんが、ツールは、デスクトップとモバイルブラウザの多くをシミュレートすることにより、CSSのレイアウトを確認するために利用可能です.最も人気のあるものはBrowserStack , そして、限られた無料のアカウントがご利用いただけます.このツールを使用すると、視覚的なチェックを行うには、単独で事前に修正することはできません他の問題をキャッチするために様々なブラウザ内であなたのウェブサイトを開くことができます.
一度公開されたウェブサイトを持って、あなたの訪問者が実際に使用しているブラウザーを学ぶためにAnalyticsツールを使用することができます.次に、そのデータを使用して、それらのブラウザの問題を解決するためにあなたの時間の価値ある投資があるかどうかを確認できます.

Next up in Episode 16: Responsive Design