Google Chromeにのみ特定のCSSルールを適用するにはどうすればよいですか？

特定の CSS ルールを Chrome に適用する: テクニックとソリューション

使用するブラウザに基づいて Web ページ内の特定の要素をターゲットにすると、ユーザー エクスペリエンスが向上しますウェブサイトのパフォーマンスを最適化します。このようなシナリオの 1 つは、Google Chrome でのみ CSS スタイルを特定の div に適用することです。

CSS ソリューション

これを実現するには、特定の -webkit- を使用してメディア クエリを利用できます。次のコードに示すように、プレフィックスを追加します。

@media screen and (-webkit-min-device-pixel-ratio:0) {
  div{top:10;} 
}

このクエリは、最小ピクセル比が 0 のデバイスをターゲットとしています。非特定のブラウザは影響を受けずに、そのアプリケーションを実質的に Chrome に制限します。

さらに、-webkit-min-device-pixel-ratio プロパティと min-resolution プロパティを使用して、より特定のバージョンの Chrome をターゲットにすることができます:

@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    div{top:0;} 
}

Chrome バージョン 22 ～ 28 の場合、-chrome- プレフィックスは次のようになります。使用:

@media screen and(-webkit-min-device-pixel-ratio:0) {
  .selector {-chrome-:only(; 
     property:value;
  );} 
}

JavaScript ソリューション

または、JavaScript を使用してユーザーのブラウザに Chrome が存在するかどうかを確認することもできます:

if (navigator.appVersion.indexOf("Chrome/") != -1) {
  // modify button 
}

このアプローチでは、ブラウザーの種類に基づいて CSS スタイルを動的に適用するオプションが提供されます。ただし、JavaScript 機能が必要なため、すべてのシナリオに適しているわけではありません。

以上がGoogle Chromeにのみ特定のCSSルールを適用するにはどうすればよいですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。