ベンダー プレフィックス: ブラウザ エンジン プレフィックスが必要なのはなぜですか?

ベンダー プレフィックス: ブラウザ エンジン プレフィックスが必要なのはなぜですか?

ベンダープレフィックスとは何ですか?

ベンダー プレフィックス - ブラウザー エンジン プレフィックスは、CSS プロパティの前に置かれる小さな文字列で、そのプロパティが特定のブラウザー レンダリング エンジンでのみ認識され、有効になることを保証します。 Google Chrome と Safari は WebKit レンダリング エンジンを使用し、Firefox は Gecko エンジン、Internet Explorer は Trident エンジンを使用し、Opera は以前は Presto エンジンを使用していましたが、後に WebKit エンジンに切り替えました。ブラウザ エンジンは通常、他のエンジンのプレフィックスでマークされた CSS プロパティを実装しません。ただし、WebKit ベースのモバイル ブラウザは非常に人気があるため、Firefox などのブラウザもモバイル バージョンで WebKit エンジン プレフィックスでマークされたいくつかの CSS プロパティを実装しています。

ブラウザ エンジン プレフィックス (ベンダー プレフィックス) とは何ですか?

-moz- /* Firefox および Mozilla ブラウザ エンジンを使用するその他のブラウザ*/
-webkit- /* Safari、Google Chrome、その他の Webkit エンジンを使用するブラウザ*/
-o- /* Opera ブラウザ (初期) */
-ms- /* Internet Explorer (必ずしもそうとは限りません) */

ベンダープレフィックスが必要なのはなぜですか?

これらのブラウザ エンジン プレフィックス (ベンダー プレフィックス) は、主にさまざまなブラウザで新しい CSS3 プロパティ機能を実験またはテストするために使用されます。それは次の3つの点に要約できます。

  • まだ標準化されていない、あるいは今後も標準化されない可能性のあるCSSプロパティを試してみる
  • 新しい標準 CSS3 プロパティの実験的な実装
  • CSS3 の新しいプロパティに対する同等の意味論のパーソナライズされた実装

これらのプレフィックスがすべて必要なわけではありませんが、通常は追加しても問題はありません。プレフィックスなしのバージョンを最後の行に置くことを忘れないでください。

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-境界線の半径: 10px;
境界線の半径: 10px;

いくつかの新しい CSS3 プロパティは長い間実験的なものであり、一部のブラウザではすでにこれらのプロパティのプレフィックスの使用が停止されています。 Border-radius プロパティは非常に典型的な例です。最新のブラウザはプレフィックスなしの Border-radius 属性をサポートしています。

ベンダープレフィックスを必要とする CSS3 プロパティ

ベンダー プレフィックスを追加する必要がある主なプロパティは次のとおりです。

  • @キーフレーム
  • 移動と変換のプロパティ (transition-property、transition-duration、transition-timing-function、transition-delay)
  • アニメーションのプロパティ (animation-name、animation-duration、animation-timing-function、animation-delay)
  • 境界線の半径
  • ボックスシャドウ
  • 背面の可視性
  • 列のプロパティ
  • フレックスプロパティ
  • 遠近法プロパティ

リストはこれで終わりではなく、今後も増え続ける予定です。

ベンダープレフィックスの使用

ベンダー プレフィックスが必要な場合は、プレフィックスを最初に配置し、標準プレフィックスを最後に配置するのが最適です。例えば:

/* シンプルなプロパティ */
.myClass{
	-webkit アニメーション名: fadeIn;
	-moz-アニメーション名: fadeIn;
	-o-アニメーション名: フェードイン;
	-ms-アニメーション名: フェードイン;
	animation-name: fadeIn; /* プレフィックスなしのものを最後に置く*/
}
/* 複雑な属性キーフレーム */
@-webkit-keyframes フェードイン {
	0% { 不透明度: 0; } 100% { 不透明度: 0; }
}
@-moz-keyframes フェードイン {
	0% { 不透明度: 0; } 100% { 不透明度: 0; }
}
@-o-keyframes フェードイン {
	0% { 不透明度: 0; } 100% { 不透明度: 0; }
}
@-ms-keyframes フェードイン {
	0% { 不透明度: 0; } 100% { 不透明度: 0; }
}
/* プレフィックスのないものについては最後に置く */
@keyframes フェードイン {
	0% { 不透明度: 0; } 100% { 不透明度: 0; }
}

インターネットエクスプローラー

Internet Explorer 9 は、CSS3 の新しいプロパティの多く (すべてではありません) をサポートしています。たとえば、IE ではベンダー プレフィックスなしで border-radius プロパティを使用することもできます。

IE6 から IE8 は CSS3 をサポートしていません。残念ながら、これらの低バージョンのブラウザを使用しているユーザーはまだ多くいます。したがって、CSS3 をサポートしていなくても、Web サイトのデザインが適切に表示されるかどうかを確認してください。 border-radius、linear-gradient、box-shadow などの一部のプロパティについては、CSS3Pie を使用できます。これは、Web サイトのルート ディレクトリに配置する小さなファイルで、これにより、ページが IE6 および IE8 でこれらのプロパティをサポートするようになります。

<<:  CSS で隠し要素を実現する 7 つの興味深い方法

>>:  mysqlはコンマに基づいてデータ行を複数の行に分割します

推薦する

Docker.v19 で Docker Compose オーケストレーション ツールをインストールして構成する方法

1. Compose の紹介Compose は、マルチコンテナ Docker アプリケーションを定義...

ReactHooks バッチ更新状態とルートパラメータの取得例の分析

目次1. 一括更新の方法コンソール出力2. フックがルーティングパラメータを取得する方法実行効果1....

Dockerfile を使用して Docker イメージをカスタマイズする方法

Dockerfile を使用したイメージのカスタマイズイメージのカスタマイズとは、実際には各レイヤー...

ウェブデザインにおけるインタラクション: ページングの問題に関する簡単な説明

機能: 前のページまたは次のページにジャンプします。要素: ページングの基本要素は、前のページ + ...

過去の Linux イメージの問題を修正するためのサンプル分析

過去の Linux イメージに関する問題を修正従来の Linux イメージで作成された ECS クラ...

Linux 7.7 でスワップ パーティション SWAP を設定する方法

Linux システムの Swap パーティション、つまり swap パーティションは、一般に仮想メモ...

MySQL の一般的な問題とアプリケーション スキルの概要

序文MySQL の日常的な開発やメンテナンスでは、パスワードの紛失やテーブルの破損など、避けられない...

HTMLハイパーリンクaタグのhrefジャンプとonclick間の実行順序の例

HTMLハイパーリンクaタグのhrefジャンプとonclickの実行関係htmlのaタグのhrefは...

CentOS7.5 の MySQL8.0.19 のインストールチュートリアルの詳細な手順

1. はじめにこの記事には MySQL インストール部分のスクリーンショットがないので、ある程度の基...

Mac M1 での Nginx のマルチサイト構成の実装

注: nginxはbrew経由でインストールされますウェブサイトのルートディレクトリ: /opt/h...

Vueブラウザが監視を再開するための具体的な手順

序文ページを共有するときに、ブラウザの戻るボタンをクリックしてプロジェクトのホームページに戻り、訪問...

Mysql と Oracle でよく使用される複数テーブルの変更ステートメントの概要

今日、SQLトレーニングの質問バンクでこの質問を見ました。これは、非常に代表的なマルチテーブル変更の...

CSSリストのスライドにより、下部に隠れるのを防ぎ、長い画面モデルの処理に適応します。

1. モバイル端末がリストスライドを処理するとき、WeChat には下部にページに戻るボタンが組み...

Vue プロジェクトでよく使用されるツール機能の概要

目次序文1. カスタムフォーカスコマンド1. 方法1 2. 方法2 3. 方法3 2. 入力ボックス...

JavaScript の基礎: エラーキャプチャメカニズム

目次序文エラーオブジェクト投げる試して…捕まえて…最後に最終ルールトライ/キャッチパフォーマンスウィ...