How to give css only for safari browser not a chrome

Question

my safari browser version is 5.0.and my problem is how to give a css for safari browser not a chrome browser.

please, help me.Thanks

Possible duplicate of [is there a css hack for safari only NOT chrome?](https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome) — Gezzasa, Sep 27 '17 at 12:22

score 0 · Answer 1 · answered Sep 27 '17 at 12:27

0

Use this. It will work only in Safari.

/* Css for Safari  */
 @media screen and (-webkit-min-device-pixel-ratio:0){
    ::i-block-chrome, .yourClassName {
         background:#f00;
    }
}

answered Sep 27 '17 at 12:27

VR Patel

61
1
1
11

i also try this but not solve my problem.actually i give my style in scss. – ashu patel Sep 27 '17 at 12:38

score 0 · Answer 2 · answered Sep 27 '17 at 14:07

CSS Selector/Property/Value Hacks are imho problematic, as

preprocessors like SASS might not work with them
browsers or browser-versions they apply to, are subject to change

Therefore - if you really need to use browser-specific css - I'd recommend you to use JavaScript to set a certain class to the or tag, which is then used by a CSS Selector to style only in these desired browsers.

JS:

if(doSomeUserAgentLogic()) {
  document.body.classList.add("is-safari")

}

CSS:

body.is-safari .custom-selector {
  property: value;
}

Detecting the browser and certain versions using the userAgent in JavaScript is not that easy, therefore you should probably use something like https://github.com/DamonOehlman/detect-browser, but at least this way of detecting is "quite" stable.

How to give css only for safari browser not a chrome

2 Answers2