is there a css hack for safari only NOT chrome? -

im trying find css hack safari not chrome, know these both webkit browsers im having problems div alignments in chrome , safari, each displays differently.

i have been trying use affects chrome well,

@media screen , (-webkit-min-device-pixel-ratio:0) {    #safari { display: block; }  }  

does know of 1 apply safari please?

• updated safari 10.1 (late march 2017 update) *

note: filters , compilers (such sass engine) expect standard 'cross-browser' code -- not css hacks these means rewrite, destroy or remove hacks since not hacks do. non-standard code has been painstakingly crafted target single browser versions , cannot work if altered. if wish use those, you must load chosen css hack after filter or compiler. may seem given there has been lot of confusion among people not realize undoing hack running through such software not designed purpose.

safari has changed since version 6.1, many have noticed.

please note: if using chrome [and firefox] on ios (at least in ios versions 6.1 , newer) , wonder why none of hacks seem separating chrome safari, because ios version of chrome using safari engine. uses safari hacks not chrome ones. more here: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/

also: if have tried 1 or more of hacks , have trouble getting them work, please post sample code (better yet test page) - hack attempting, , browser(s) (exact version!) using device using. without additional information, impossible me or else here assist you.

often simple fix or missing semicolon. css or problem of order code listed in style sheets, if not css errors. please test hacks here on test site. if works there, means hack working setup, else needs resolved. people here love help, or @ least point in right direction.

the test site:

https://browserstrangeness.bitbucket.io/css_hacks.html#webkit

and mirror!

https://browserstrangeness.github.io/css_hacks.html#webkit

firefox ios released in fall 2015, , responds safari hacks, none of firefox ones, same ios chrome.

that out of way here hacks use more recent versions of safari.

you should try 1 first covers current safari versions , pure-safari only:

this 1 still works safari 10.1:

/* safari 7.1+ */  _::-webkit-full-page-media, _:future, :root .safari_only {    color:#0000ff;    background-color:#cccccc;   } 

to cover more versions, 6.1 , up, @ time have use next pair of css hacks. 1 6.1-10.0 go 1 handles 10.1 , up.

so -- here 1 worked out safari 10.1+:

the double media query important here, don't remove it.

/* safari 10.1+ (which latest version of safari @ time) */  @media not , (min-resolution:.001dpcm) { @media {      .safari_only {           color:#0000ff;          background-color:#cccccc;       } }} 

try 1 if scss or other tool set has trouble nested media query:

/* safari 10.1+ (alternate method) */  @media not , (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) {      .safari_only {           color:#0000ff;          background-color:#cccccc;       } }} 

this next 1 works 6.1-10.0 not 10.1 (late march 2017 update)

this hack created on many months of testing , experimentation combining multiple other hacks.

notes: above, double media query not accident -- rules out many older browsers cannot handle media query nesting. -- missing space after 1 of 'and's important well. after all, hack... , 1 works 6.1 , newer safari versions @ time. aware listed in comments below, hack non-standard css , must applied after filter. filters such sass engines rewrite/undo or remove outright.

as mentioned above, please check test page see working as-is (without modification!)

and here code:

/* safari 6.1-10.0 (not 10.1, latest version of safari @ time) */  @media screen , (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)  { @media {     .safari_only {           color:#0000ff;          background-color:#cccccc;       } }} 

for more 'version specific' safari css, please continue read below.

one safari 10.0:

/* safari 10.0 (not 10.1) */  _::-webkit-:host:not(:root:root), .safari_only {    color:#0000ff;    background-color:#cccccc;   } 

safari 10.0 (non-ios devices):

/* safari 10.0 (not 10.1) not on ios */  _::-webkit-:-webkit-full-screen:host:not(:root:root), .safari_only {    color:#0000ff;    background-color:#cccccc;   } 

safari 9 css hacks:

one safari 9.0-10.0:

/* safari 9.0-10.0 (not 10.1) */  _::-webkit-:not(:root:root), .safari_only {    color:#0000ff;    background-color:#cccccc;   } 

safari 9 includes feature detection can use now...

/* safari 9 */  @supports (overflow:-webkit-marquee) , (justify-content:inherit)  {    .safari_only {     color:#0000ff;      background-color:#cccccc;    }  } 

now target ios devices only. mentioned above, since chrome on ios rooted in safari, of course hits 1 well.

/* safari 9.0 (ios only) */  @supports (-webkit-text-size-adjust:none) , (not (-ms-ime-align:auto)) , (not (-moz-appearance:none)) {    .safari_only {     color:#0000ff;      background-color:#cccccc;    }  } 

and 1 safari 9.0-10.0 not ios devices:

/* safari 9.0-10.0 (not 10.1) (non-ios) */  _:-webkit-full-screen:not(:root:root), .safari_only {    color:#0000ff;    background-color:#cccccc;   } 

below hacks separate 6.1-7.0, , 7.1+ these required combination of multiple hacks in order right result:

/* safari 6.1-7.0 */  @media screen , (-webkit-min-device-pixel-ratio:0) , (min-color-index:0) {      .safari_only {(;        color:#0000ff;        background-color:#cccccc;       );} } 

since have pointed out way block ios devices, here modified version of safari 6.1+ hack targets non-ios devices:

/* safari 6.1-10.0 (not 10.1) (non-ios) */  @media screen , (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)  { @media {     _:-webkit-full-screen, .safari_only {           color:#0000ff;          background-color:#cccccc;       } }} 

to use them:

<div class="safari_only">this text blue in safari</div> 

---

usually [like in question] reason people ask safari hacks in reference separating google chrome (again not ios!) may important post alternative: how target chrome separately safari well, providing here in case needed.

here basics, again check test page lots of specific versions of chrome, these cover chrome in general. chrome version 45, dev , canary versions version 47 @ time.

my old media query combo put on browserhacks still works chrome 29+:

/* chrome 29+ */  @media screen , (-webkit-min-device-pixel-ratio:0) , (min-resolution:.001dpcm) {     .chrome_only {         color:#0000ff;         background-color:#cccccc;       } } 

an @supports feature query works chrome 29+ well... modified version of 1 using chrome 28+ below. safari 9, coming firefox browsers, , microsoft edge browser not picked one:

/* chrome 29+ */  @supports (-webkit-appearance:none) , (not (overflow:-webkit-marquee)) , (not (-ms-ime-align:auto)) , (not (-moz-appearance:none)) {     .chrome_only {         color:#0000ff;         background-color:#cccccc;       } } 

previously, chrome 28 , newer easy target. 1 sent browserhacks after seeing included within block of other css code (not intended css hack) , realized does, extracted relevant portion our purposes:

[ note: ] older method below pics safari 9 , microsoft edge browser without above update. coming versions of firefox , microsoft edge have added support multiple -webkit- css codes in programming, , both edge , safari 9 have added support @supports feature detection. chrome , firefox included @supports previously.

/* chrome 28+, safari 9+, firefox, , microsoft edge */  @supports (-webkit-appearance:none)  {     .chrome_and_safari {         color:#0000ff;         background-color:#cccccc;       } } 

the block of chrome versions 22-28 (if needed support older versions) possible target twist on safari combo hacks posted above:

/* chrome 22-28 */  @media screen and(-webkit-min-device-pixel-ratio:0) {     .chrome_only {-chrome-:only(;         color:#0000ff;         background-color:#cccccc;       );} }  note: if new, change class name leave same-> {-chrome-:only(; 

like safari css formatting hacks above, these can used follows:

<div class="chrome_only">this text blue in chrome</div> 

so don't have search in post, here live test page again:

https://browserstrangeness.bitbucket.io/css_hacks.html#webkit

[or mirror]

https://browserstrangeness.github.io/css_hacks.html#webkit

the test page has many others well, version-based further differentiate between chrome , safari, , many hacks firefox, microsoft edge, , internet explorer web browsers.

note: if doesn't work you, check test page first, provide example code , hack attempting assist you.