How Can I Apply Styles Specifically to Safari Browsers?

Solution for Safari restricting style application

Summary: Safari no longer uses @media screen and (- webkit-min-device-pixel-ratio:0) to specifically target it, but there are other methods that can be used.

Workaround:

For Safari 18.0.1 and newer:

/* Safari 7.1+ */

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

For Safari 10.1 and newer versions:

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

For Safari 6.1 to 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;
  }
}}

Other version-specific Safari hacks:

Browse the original article to get more CSS for specific Safari versions Hackers, including Safari 9, 10, and 11.

Use these hacks:

To apply these styles in Safari, use the following tags:

<div class="safari_only">在此处放置您的内容</div>

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