一般的な CSS プロパティのブラウザ互換性の概要 (推奨)

CSS プロパティのブラウザ互換性をまとめる必要があるのはなぜですか?使用する際は、Can I Use にアクセスして、ブラウザと属性の互換性を確認したほうがよいのではないでしょうか。

css3.jpeg

実際、実際の開発プロセスでは、開発効率を大幅に向上させ、適切にデグレードできるコードを書くために、一般的な CSS 属性の互換性を明確にする必要があります。 CSS 属性の互換性をすべて覚えなければならないという意味ではありません。使用率が低いものについては、直接 Can I Use を使用して検索することができます。

フレーム：

• border-radius: IE9 との互換性は最低限あり、他のブラウザとの互換性も優れています。
• box-shadow: IE9 との互換性は最低限あり、他のブラウザとの互換性は優れています。

背景：

background-size: IE9 との互換性が最低限必要ですが、他のブラウザとの互換性は優れています。

フォント：

@font-face: IE9 以降のバージョンの IE ブラウザは、あらゆる形式のフォント ファイルのインポートをサポートしていますが、IE9 より前のブラウザは EOT 形式のフォント ファイルのインポートのみをサポートしています。 他のブラウザも互換性があります。

2D変換:

transform: IE9 との最低限の互換性 (-ms- プレフィックスを追加する必要があります)、他のブラウザとの互換性は優れています。 transform プロパティの前にブラウザ カーネル プレフィックスを追加することをお勧めします。 svg 要素で transform 属性を使用することは推奨されません。また、最新バージョンの IE ではこの使用法はサポートされていません。

3D変換:

IE10 と Firefox は 3D 変換をサポートしています。 Chrome と Safari ではプレフィックス -webkit- が必要です。 Opera はまだ 3D トランジションをサポートしておらず、2D トランジションのみをサポートしています。

遷移：

移行: IE10 との最低限の互換性があり、他のブラウザとの互換性も優れています。 Safari ブラウザではプレフィックス -webkit- が必要ですが、他のほとんどのブラウザではこのプレフィックスは必要ありません。したがって、特別な状況を除いて、他のブラウザのプレフィックスを追加する必要はありません。

アニメーション：

animation: 互換性は transition プロパティとほぼ同じです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。