CSS3 属性の前に Webkit を追加する必要があるのはなぜですか?
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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
ブートストラップリストでデフォルトスタイルを削除する方法は？
Apr 07, 2025 am 10:18 AM
ブートストラップリストのデフォルトスタイルは、CSSオーバーライドで削除できます。より具体的なCSSルールとセレクターを使用し、「近接原理」と「重量原理」に従って、ブートストラップのデフォルトスタイルをオーバーライドします。スタイルの競合を避けるために、よりターゲットを絞ったセレクターを使用できます。オーバーライドが失敗した場合は、カスタムCSSの重量を調整します。同時に、パフォーマンスの最適化に注意を払い、重要な！の過剰使用を避け、簡潔で効率的なCSSコードを書いてください。
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
ブートストラップにファイルをアップロードする方法
Apr 07, 2025 pm 01:09 PM
ファイルアップロード機能は、Bootstrapを介して実装できます。手順は次のとおりです。BootstrapCSSおよびJavaScriptファイルを紹介します。ファイル入力フィールドを作成します。ファイルアップロードボタンを作成します。ファイルのアップロードを処理します（FormDataを使用してデータを収集し、サーバーに送信します）。カスタムスタイル（オプション）。
ブートストラップリストのサイズを変更する方法は？
Apr 07, 2025 am 10:45 AM
ブートストラップリストのサイズは、リスト自体ではなく、リストを含むコンテナのサイズに依存します。 BootstrapのグリッドシステムまたはFlexBoxを使用すると、コンテナのサイズを制御することで、リスト項目を間接的に変更します。
ブートストラップリストのネストを実装する方法は？
Apr 07, 2025 am 10:27 AM
ブートストラップのネストされたリストでは、スタイルを制御するためにブートストラップのグリッドシステムを使用する必要があります。まず、外層＆lt; ul＆gt;を使用します。および＆lt; li＆gt;リストを作成するには、内側のレイヤーリストを＆lt; div class =＆quot; row＆gt;に巻き付けます。 and＆lt; div class =＆quot; col-md-6＆quot;＆gt;内側のレイヤーリストに、内側の層リストが行の幅の半分を占めることを指定します。このように、内側のリストは正しいものを持つことができます
ブートストラップのレイアウト方法
Apr 07, 2025 pm 02:24 PM
Bootstrapを使用してWebサイトをレイアウトするには、グリッドシステムを使用してページをコンテナ、行、列に分割する必要があります。最初にコンテナを追加し、その中の行を追加し、行内の列を追加し、最後に列にコンテンツを追加します。ブートストラップのレスポンシブレイアウト関数は、ブレークポイント（XS、SM、MD、LG、XL）に従ってレイアウトを自動的に調整します。レスポンシブクラスを使用することで、異なる画面サイズの下の異なるレイアウトを実現できます。
ブートストラップの日付を確認する方法
Apr 07, 2025 pm 03:06 PM
ブートストラップの日付を確認するには、次の手順に従ってください。必要なスクリプトとスタイルを紹介します。日付セレクターコンポーネントを初期化します。 Data-BV-Date属性を設定して、検証を有効にします。検証ルール（日付形式、エラーメッセージなどなど）を構成します。ブートストラップ検証フレームワークを統合し、フォームが送信されたときに日付入力を自動的に検証します。
