CSS ハックを使用して Safari のみのスタイルを設定するにはどうすればよいですか?

Safari のみをターゲットにする CSS ハック

Safari でスタイルを分ける理由

CSS ハックは、特定のターゲットをターゲットにするためによく使用されますスタイル設定用のブラウザ。この場合、Chrome などの他のブラウザを除外し、Safari にのみスタイルを適用することを目的としています。

現在のハックの無効性

元の投稿で述べたように、 @media 画面と (-webkit-min-device-pixel-ratio:0) ハッキングは、Safari とChrome。

Safari 用の更新されたソリューション

ただし、ここでは、独占的にターゲットとなるいくつかの新しい CSS ハックを紹介します。 Safari:

/* Safari 7.1+ */

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

  color:#0000FF; 
  background-color:#CCCCCC; 

}

/* Safari 10.1+ */

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

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

/ 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 { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

使用法

これらのスタイルを Safari の要素に特に適用するには、次のような safari_only クラスを使用します。 this:

<div class="safari_only">This text will be blue in Safari</div>

注:

これらのハックを実装するときは、意図しない結果を避けるためにカスタム クラス名を使用することが重要です。さらに、これらのハッキングはすべてのシナリオで機能するとは限らず、特に Web サイトで CSS フィルターまたはコンパイラーを使用している場合は、ハッキングが変更または削除される可能性があるため、注意してください。

以上がCSS ハックを使用して Safari のみのスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。