How Can I Apply CSS Hacks to Specifically Target Different Safari Versions?

Safari-Specific CSS Hack

While the provided code failed to differentiate Safari from Chrome, alternative CSS hacks are available that exclusively target Safari versions 6.1 and higher. Here's one such hack:

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

Version-Specific Safari Hacks

For Safari versions 10.1 and higher, use this hack:

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

For Safari versions 6.1 to 10.0, use this hack:

/* 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;
    }
  }
}

To apply these hacks, add a class named "safari_only" to the elements you want to style for Safari only.

The above is the detailed content of How Can I Apply CSS Hacks to Specifically Target Different Safari Versions?. For more information, please follow other related articles on the PHP Chinese website!