CSSベンダープレフィックス

CSSベンダープレフィックス、自動プレフィックスの概要と、今後それらがあまり関連性がない理由

ベンダープレフィックスは、CSS開発者がまだ安定しているとは見なされていない新しい機能にアクセスできるようにするためにブラウザーが使用する1つの方法です。

先に進む前に、このアプローチの人気は低下していることを覚えておいてください。実験フラグ、ユーザーのブラウザで明示的に有効にする必要があります。

どうして?開発者は、機能をプレビューする方法としてベンダープレフィックスを検討する代わりに、それらを本番環境で出荷しました。これは、CSSワーキンググループによって有害であると見なされたものです。

主な理由は、フラグを追加して開発者が本番環境でフラグを使用し始めると、何かを変更する必要があることに気付いた場合、ブラウザーは悪い位置にあるからです。フラグを使用すると、すべての訪問者をプッシュしてブラウザでそのフラグを有効にできない限り、機能を出荷することはできません(冗談を言って、試さないでください)。

そうは言っても、ベンダープレフィックスとは何かを見てみましょう。

過去にCSSトランジションを操作したことを特に覚えています。単に使用する代わりにtransitionプロパティ、あなたはこれをしなければなりませんでした:

.myClass {
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-ms-transition: all 1s linear;
	-o-transition: all 1s linear;
	transition: all 1s linear;
}

今、あなたはただ使う

.myClass {
	transition: all 1s linear;
}

プロパティは現在、すべての最新のブラウザで十分にサポートされているためです。

使用されるプレフィックスは次のとおりです。

  • -webkit-(Chrome、Safari、iOS Safari / iOS WebView、Android)
  • -moz-(Firefox)
  • -ms-(Edge、Internet Explorer)
  • -o-(Opera、Opera Mini)

OperaとEdgeはChromiumベースなので、-o-そして-ms-おそらくすぐに時代遅れになるでしょう。しかし、前述したように、ベンダーのプレフィックスも全体として時代遅れになっています。

主に不確実性のために、プレフィックスを書くのは難しいです。実際に1つのプロパティにプレフィックスが必要ですか?いくつかのオンラインリソースも古くなっているため、正しく実行するのはさらに困難です。のようなプロジェクト自動プレフィックスプレフィックスが必要かどうか、または機能が安定してプレフィックスを削除する必要があるかどうかを確認する必要なしに、プロセス全体を自動化できます。これは、ブラウザのサポートに関連するすべてのものの非常に優れたリファレンスサイトであるcaniuse.comからのデータを使用します。

ReactまたはVueを使用する場合、次のようなプロジェクトcreate-react-appおよびVueCLIは、アプリケーションの構築を開始する2つの一般的な方法です。autoprefixer箱から出してすぐに使えるので、心配する必要もありません。

私の無料ダウンロードCSSハンドブック


その他のCSSチュートリアル: