ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3 属性の前に Webkit を追加する必要があるのはなぜですか?
CSS3 属性の前に Webkit を追加する必要があるのはなぜですか?
- WBOYオリジナル
- 2021-12-16 15:43:364950ブラウズ
CSS はさまざまなブラウザの属性サポートと互換性がある必要があるため、ブラウザの製造元は新しい属性をサポートするために属性の前にプライベート プレフィックスを追加します。プレフィックス「-webkit-」の付いた属性は webkit- で使用できます。 based 通常、「safari」や「chrome」ブラウザなどで使用されます。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
Css3 属性の前に Webkit を追加する理由
CSS3 には、box-reduis、box-orient、 text-overflow など、これらの属性は以前のバージョンでは存在しなかったか、サポートされていなかったため、さまざまなブラウザに対して、これらの新しい属性を解析できるようにカーネル名が指定されています。これは合理的な説明のようです。つまり、-moz- は Firefox 用で、-webkit- は safari と chrome 用です。
-moz は Firefox ブラウザのプライベート プロパティを表します
-ms は ie ブラウザのプライベート プロパティを表します
-webkit は safari と chrome のプライベート属性を表します
標準が決定される前に、一部のブラウザは、safari と chrome との互換性を維持するために、初期ドラフトに従ってすでにいくつかの機能を実装していました。後で決定された標準であるため、各ブラウザは標準と区別するために独自のプライベート プレフィックスを使用します。標準が確立されると、主要なブラウザはプレフィックスのない新しい CSS3 属性を徐々にサポートすることになります。
例は次のとおりです:
<html>
<head>
<style>
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>なぜプライベート プレフィックスが必要なのでしょうか?それは、HTML と CSS の標準を策定する組織である W3C が非常に遅いからです。通常、w3c 組織のメンバーが、rounded border-radius などの新しい属性を提案し、誰もがそれが良いと考えるのですが、w3c はこの属性の標準を設定せず、非常に複雑なプロセスを経て、たくさんのレビュー。
ブラウザ ベンダーは、属性が十分に成熟していると判断した場合、ブラウザにサポートを追加する予定です。ただし、将来 w3c が標準を発表するときに変更を避けるために、事前に新しい属性をサポートするために -webkit-border-radius などのプライベート プレフィックスが追加されます。 border-radius が確立され、ブラウザの新しいバージョンが border-radius の書き込み方法をサポートするようになります。
たとえば、Chrome 10 は border-radius を認識せず、webkit-border-radius のみを使用できますが、Chrome 12 はこれを認識できます。そのため、CSSを記述する場合、このように記述することで、Webページを閲覧するときにChrome10とChrome12の両方が正しく表示されるようにすることができます。
書き込めなくなったプライベート プレフィックスが多数ありますが、古いバージョンのブラウザとの互換性を保つために、プライベート プレフィックスと標準メソッドを引き続き使用でき、段階的に移行できます
(ビデオ共有の学習: css ビデオ チュートリアル)
以上がCSS3 属性の前に Webkit を追加する必要があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。