CSS ハックを適用して、特に異なる Safari バージョンをターゲットにするにはどうすればよいですか?

Safari 固有の CSS ハック

提供されたコードでは Safari と Chrome を区別できませんでしたが、Safari のバージョンのみを対象とした代替 CSS ハックが利用可能です6.1以降。そのようなハックの 1 つを次に示します:

_::-webkit-full-page-media, _:future, :root .safari_only {
  color: #0000FF;
  background-color: #CCCCCC;
}

バージョン固有の Safari ハック

Safari バージョン 10.1 以降の場合は、次のハックを使用します:

/* Safari 10.1+ */
@media not all and (min-resolution: .001dpcm) {
  @media {
    .safari_only {
      color: #0000FF;
      background-color: #CCCCCC;
    }
  }
}

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 {
      color: #0000FF;
      background-color: #CCCCCC;
    }
  }
}

これらのハックを適用するには、Safari 専用にスタイル設定したい要素に「safari_only」という名前のクラスを追加します。

以上がCSS ハックを適用して、特に異なる Safari バージョンをターゲットにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。