Chrome 固有の CSS ルールをターゲットにするにはどうすればよいですか?

Chrome 固有の CSS ルールをターゲットにする方法

CSS を使用して Web 要素をカスタマイズする場合、特定の DOM 要素にのみ特定のスタイルを適用する必要がある状況が発生することがあります。 Chromeブラウザ。これを実現するためのいくつかのソリューションを次に示します。

CSS ソリューション

1. Webkit メディア クエリ: Chrome は、CSS プロパティの多くに「-webkit」プレフィックスを使用します。 。以下に示すように、「-webkit-min-device-pixel-ratio」メディア クエリを使用して Chrome 固有のスタイルをターゲットにできます。

/* Chrome, Safari, Edge, Firefox */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  div{top:10;} 
}

2. Chrome 固有のメディア クエリ: Chrome バージョン 29 の場合、次のメディア クエリを使用して Chrome をターゲットにできます。のみ:

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

3. Chrome 固有の CSS 構文 (Chrome 22 ～ 28): Chrome バージョン 22 ～ 28 では、「-chrome- :only" 構文を使用して、ブラウザ:

/* Chrome 22-28 */
@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 
}

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