How Can I Use CSS Hacks to Style Only Safari?

CSS Hacks to Target Safari Only

Why Separate Styles for Safari?

CSS hacks are often used to target specific browsers for styling purposes. In this case, we aim to apply styles solely to Safari, excluding other browsers such as Chrome.

Ineffectiveness of Current Hacks

As mentioned in the original post, the @media screen and (-webkit-min-device-pixel-ratio:0) hack has been affecting both Safari and Chrome.

Updated Solutions for Safari

However, here are several new CSS hacks that will exclusively target 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; 

    }
}}

Usage

To apply these styles specifically to elements in Safari, use the safari_only class like this:

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

Note:

It's crucial to use a custom class name when implementing these hacks to avoid unintended consequences. Additionally, be aware that these hacks might not work in all scenarios, especially if the website uses a CSS filter or compiler, as they may alter or remove the hacks.

The above is the detailed content of How Can I Use CSS Hacks to Style Only Safari?. For more information, please follow other related articles on the PHP Chinese website!