他のブラウザとの競合を避けながら、CSS スタイルを Safari にのみ適用するにはどうすればよいですか?

Safari 専用にコンテンツをスタイル化することは可能ですか?

問題:

あなた'以前の方法は両方の理由で Chrome にも影響を与えるため、Safari にのみ影響する CSS を見つけるのに苦労しています。現在 WebKit を使用しているブラウザ。 Safari と Chrome では配置が異なるため、スタイル設定が特に難しくなります。

解決策:

/* Safari 7.1+ */

_::-webkit-full-page-media, _:future, :root .safari_only {

  color:#0000FF;    /* Example text color */
  background-color:#CCCCCC;   /* Example background color */

}

または、Safari 10.1 以降の場合は、次を使用します:

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { @media {

    .safari_only { 

        /* CSS styles */

    }
}}

または

/* Safari 10.1+ (alternate method) */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {

    .safari_only { 

        /* CSS styles */

    }
}}

Safariの場合6.1 ～ 10.0、以下を利用します:

/* Safari 6.1-10.0 (not 10.1) */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
    .safari_only { 

        /* CSS styles */

    }
}}

特定の Safari バージョン向けの追加のハックは、提供されているセクションにあります。応答。

使用法:

<div>

注:

これらのハックは、提供されたライブ テストで必ずテストしてください。 Web サイトに実装する前に、ページを参照してください。テスト ページが意図したとおりに動作し、CSS の競合の可能性が排除されることを確認します。

以上が他のブラウザとの競合を避けながら、CSS スタイルを Safari にのみ適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。