CSS で特定のブラウザをターゲットにするにはどうすればよいですか?

CSS で特定のブラウザをターゲットにする

さまざまなブラウザ向けに CSS をカスタマイズするには、それぞれの固有のレンダリング特性に対処するための特定のアプローチが必要です。

CSS 条件文

条件文のサンプルを提供しましたが、それらは CSS ではサポートされていません。ブラウザ固有のスタイルを実現するための代替方法は次のとおりです。

ブラウザ検出と動的 CSS

• ユーザー エージェントをスキャンしてブラウザとブラウザのバージョンを識別します。
• get-browser.php などの PHP 関数を使用してブラウザ情報を検出します。
• 検出されたブラウザに基づいて動的 CSS ファイルを作成し、それに応じて適用します。

CSS ハック

CSS ハックは、ブラウザー固有の動作を利用して目的の効果を達成する特定のディレクティブまたはセレクターです。一般的な CSS ハックのリストは次のとおりです。

• html #selector ターゲット IE6 以下
• *:first-child html #selector ターゲット IE7
• *:nth -of-type(1) #selector ターゲット Safari 3 、 Chrome 1 、 Opera 9

JavaScript または Plugin

• JavaScript を使用して、
• 「CSS Browser Selector」(http://rafael.adm.br/css_browser_selector/) などのプラグインを利用して、ブラウザ固有の CSS スタイルシートを挿入します。

例

<code class="css">/* IE7 and below */
<!--[if lt IE 8]>
#container { top: 5px; }
<![endif]-->

/* Mozilla Firefox */
@-moz-document url-prefix() {
  #container { top: 7px; }
}

/* Safari, Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  #container { top: 9px; }
}</code>

これらの手法を実装すると、Web サイトがさまざまなブラウザー間で一貫した最適なユーザー エクスペリエンスを確実に提供できます。

以上がCSS で特定のブラウザをターゲットにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。