How Can I Specifically Target Safari with CSS?

Isolating Styles to Safari

While isolating CSS to Safari might seem possible, most methods also apply to Chrome due to their shared WebKit foundation.

Effective and Specific Safari Hacks

To exclusively target Safari, consider these CSS hacks:

Safari 7.1 :

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

Safari 10.1 :

/* Double media query is crucial */
@media not all and (min-resolution: .001dpcm) {
  @media {
    .safari_only {
      color: #0000FF;
      background-color: #CCCCCC;
    }
  }
}

Safari 6.1-10.0:

@media screen and (min-color-index: 0) and (-webkit-min-device-pixel-ratio: 0) {
  @media {
    .safari_only {
      color: #0000FF;
      background-color: #CCCCCC;
    }
  }
}

Usage:

Apply these CSS rules to a class named "safari_only" to target only Safari browsers. For example:

<div>

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