CSS スタイルで特定のブラウザをターゲットにする方法は?

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

問題ステートメント:

特定のブラウザを実装する必要があるシナリオに遭遇しました。ユーザーのブラウザに応じた CSS スタイル。具体的には、Internet Explorer、Mozilla、Chrome で #container 要素のパディングをカスタマイズしたいとします。

考えられる解決策:

実行できるアプローチはいくつかあります。これを実現するには:

1. によるブラウザ検出PHP:

   • PHP の get_browser() 関数を使用してユーザーのブラウザを検出し、検出されたブラウザの特定のスタイルを含む動的 CSS ファイルを作成します。

2. CSSハック:

   • CSS ハックを利用して、特定のブラウザ バージョンをターゲットにし、必要なスタイルを適用します。たとえば、IE7 で #container 要素のパディングを調整するには、 *:first-child html #container { padding: 5px; を使用できます。 }.

3. プラグインによるブラウザ検出:

   • ベースのドキュメント本文にクラスを追加するブラウザ検出プラグインをインストールします。検出されたブラウザ上で。これらのクラスを CSS で使用して、適切なスタイルを適用できます。

PHP を使用した例:

<?php
$browser = get_browser();
switch ($browser['browser']) {
    case 'IE':
        $css = '.container { padding: 5px; }';
        break;
    case 'Mozilla':
        $css = '.container { padding: 7px; }';
        break;
    case 'Chrome':
        $css = '.container { padding: 9px; }';
        break;
}

file_put_contents('browser-specific.css', $css);
?>

CSS ハックを使用した例:

/* Target IE7 */
*:first-child+html #container { padding: 5px; }

/* Target Mozilla */
html>form #container { padding: 7px; }

/* Target Chrome */
html>**/*body #container { padding: 9px; }

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