is there a css hack for safari only NOT chrome

Question

im trying to find a css hack for just safari NOT chrome  i know these are both webkit browsers but im having problems with div alignments in chrome and safari  each displays differently   i have been trying to use this but it affects chrome as well     media screen and  -webkit-min-device-pixel-ratio 0        safari   display  block          does anyone know of another one that will just apply to safari please

User · Answer

I like to use the following method   var isSafari    Safari  test navigator userAgent   amp  amp   Apple Computer  test navigator vendor   if  isSafari          head   append   lt link rel  stylesheet  type  text css  href  path to safari css  gt

User · Answer

You can use a media-query hack to select Safari 6 1-7 0 from other browsers    media   0 screen      Disclaimer  This hack also targets old Chrome versions  before July 2013

User · Answer

There is a way to filter Safari 5  from Chrome    media screen and  -webkit-min-device-pixel-ratio 0            Safari and Chrome         myClass        color red                Safari only override          i-block-chrome  myClass        color blue

User · Answer

Step 1  use https   modernizr com   Step 2  use the html class  regions to select only Safari  a   color  blue    html regions a   color  green      Modernizr will add html classes to the DOM based on what the current browser supports   Safari supports regions http   caniuse com  feat css-regions whereas other browsers do not  yet anyway    This method is also very effective in selecting different versions of IE   May the force be with you

User · Answer

hi i ve made this and it worked for me   media max-width  1920px        media not all and  min-resolution  001dpcm              photo row2               margin-left  5 5   important                      media max-width  1680px        media not all and  min-resolution  001dpcm              photo row2               margin-left  15   important                       media max-width  1600px        media not all and  min-resolution  001dpcm              photo row2               margin-left  18   important                        media  max-width  1440px     media not all and  min-resolution  001dpcm              photo row2               margin-left  24 5   important                         media  max-width  1024px     media not all and  min-resolution  001dpcm         media            photo row2               margin-left  -11   important

User · Answer

I have tested and it worked for me   media only screen and  -webkit-min-device-pixel-ratio  1       i-block-chrome   myClass       height  1070px  important

User · Answer

When using this safari-only filter I could target Safari  iOS and Mac   but exclude Chrome  and other browsers     supports  -webkit-backdrop-filter  blur 1px        safari-only       background-color  rgb 76 80 84

User · Answer

At the end I use a little JavaScript to achieve it   if  navigator vendor startsWith  Apple        document documentElement classList add  on-apple      then in my CSS to target Apple browser engine the selector will be    on-apple  my-class

User · Answer

Sarari Only   yourClass not  root root

User · Answer

This works    media not all and  min-resolution  001dpcm        media          your code for Safari Desktop  amp  Mobile        body         background-color  red        color  blue               end

User · Answer

Note  If iOS-only is sufficient  if you re willing to sacrifice Safari desktop   then this works         supports  -webkit-overflow-scrolling  touch           CSS specific to iOS devices

User · Answer

Replace your class in   myClass      Safari only     myClass not  root root         enter code here

User · Answer

For those who want to implement a hack for Safari 7 0 and below  but not 7 1 and above -- use    myclass     property  value       myclass     property  value

User · Answer

It working 100  in safari  i tried   media screen and  -webkit-min-device-pixel-ratio 0       i-block-chrome  Class Name  your styles

User · Answer

UPDATED FOR CATALINA  amp  SAFARI 13  early 2020 Update     PLEASE PLEASE -- If you are having trouble  and really want to get help or help others by posting a comment about it  Post Your Browser and Device  MacBook IPad etc    with both browser and OS version numbers   Claiming none of these work is not accurate  and actually not even possible   Many of these are not really  hacks  but code built into versions of Safari by Apple  More info is needed  I love the fact that you came here  and really want things to work out for you  If you have issues getting something from here working on your site  please do check the test site via links below -- If a hack is working there  but not on your site  the hack is not the issue - there is something else happening with your site  often just a CSS conflict as mentioned below  or perhaps nothing is working but you may be unaware that you are not actually using Safari at all  Remember that this info is here to help people with  hopefully  short term issues  The test site  https   browserstrangeness bitbucket io css hacks html safari AND MIRROR  https   browserstrangeness github io css hacks html safari NOTE  Filters and compilers  such as the SASS engine  expect standard  cross-browser  code -- NOT CSS hacks like these which means they will rewrite  destroy or remove the hacks since that is not what hacks do  Much of this is non-standard code that has been painstakingly crafted to target single browser versions only and cannot work if they are altered  If you wish to use it with those  you must load your chosen CSS hack AFTER any filter or compiler  This may seem like a given but there has been a lot of confusion among people who do not realize that they are undoing a hack by running it through such software which was not designed for this purpose  Safari has changed since version 6 1  as many have noticed  Please note  if you are using Chrome  and now also Firefox  on iOS  at least in iOS versions 6 1 and newer  and you wonder why none of the hacks seem to be separating Chrome from Safari  it is because the iOS version of Chrome is using the Safari engine  It uses Safari hacks not the Chrome ones  More about that here  https   allthingsd com 20120628 googles-chrome-for-ios-is-more-like-a-chrome-plated-apple  Firefox for iOS was released in Fall 2015  It also responds to the Safari Hacks  but none of the Firefox ones  same as iOS Chrome  ALSO  If you have tried one or more of the hacks and have trouble getting them to work  please post sample code  better yet a test page  - the hack you are attempting  and what browser s   exact version   you are using as well as the device you are using  Without that additional information  it is impossible for me or anyone else here to assist you  Often it is a simple fix or a missing semicolon  With CSS it is usually that or a problem of which order the code is listed in the style sheets  if not just CSS errors  Please do test the hacks here on the test site  If it works there  that means the hack really is working for your setup  but it is something else that needs to be resolved  People here really do love to help  or at least point you in the right direction  That out of the way here are hacks for you to use for more recent versions of Safari  You should try this one first as it covers current Safari versions and is pure-Safari only  This one still works properly with Safari 13  early-2020      Safari 7 1         -webkit-full-page-media    future   root  safari only      color  0000FF     background-color  CCCCCC       To cover more versions  6 1 and up  at this time you have to use the next pair of css hacks  The one for 6 1-10 0 to go with one that handles 10 1 and up  So then -- here is one I worked out for Safari 10 1   The double media query is important here  don t remove it     Safari 10 1       media not all and  min-resolution  001dpcm     media         safari only             color  0000FF           background-color  CCCCCC              Try this one if SCSS or other tool set has trouble with the nested media query     Safari 10 1   alternate method       media not all and  min-resolution  001dpcm     supports  -webkit-appearance none          safari only             color  0000FF           background-color  CCCCCC              This next one works for 6 1-10 0 but not 10 1  Late March 2017 update  This hack I created over many months of testing and experimentation by combining multiple other hacks  NOTES  like above  the double media query is NOT an accident -- it rules out many older browsers that cannot handle media query nesting  -- The missing space after one of the  and s is important as well  This is after all  a hack    and the only one that works for 6 1 and all newer Safari versions at this time  Also be aware as listed in the comments below  the hack is non-standard css and must be applied AFTER a filter  Filters such as SASS engines will rewrite undo or completely remove it outright  As mentioned above  please check my test page to see it working as-is  without modification   And here is the code     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              For more  version specific  Safari CSS  please continue to read below     Safari 11       media not all and  min-resolution  001dpcm     supports  -webkit-appearance none  and  stroke-color transparent          safari only             color  0000FF           background-color  CCCCCC              One for Safari 11 0     Safari 11 0  not 11 1      html  gt  gt     safari only      color  0000FF     background-color  CCCCCC       One for Safari 10 0     Safari 10 0  not 10 1         -webkit- host not  root root    safari only      color  0000FF     background-color  CCCCCC       Slightly modified works for 10 1  only      Safari 10 1      media not all and  min-resolution  001dpcm     supports  -webkit-appearance none  and  not  stroke-color transparent           safari only             color  0000FF           background-color  CCCCCC              Safari 10 0  Non-iOS Devices      Safari 10 0  not 10 1  but not on iOS        -webkit- -webkit-full-screen host not  root root    safari only      color  0000FF     background-color  CCCCCC       Safari 9 CSS Hacks  A simple supports feature query hack for Safari 9 0 and up   supports  -webkit-hyphens none        safari only       color  0000FF       background-color  CCCCCC           A simple underscore hack for Safari 9 0 and up    not a b    safari only      color  0000FF     background-color  CCCCCC       Another one for Safari 9 0 and up     Safari 9        default not  root root    safari only      color  0000FF     background-color  CCCCCC       and another support features query too     Safari 9       supports  -webkit-marquee-repetition infinite  and  object-fit fill          safari only             color  0000FF           background-color  CCCCCC             One for 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 now includes feature detection so we can use that now       Safari 9      supports  overflow -webkit-marquee  and  justify-content inherit         safari only       color  0000FF       background-color  CCCCCC           Now to target iOS devices only  As mentioned above  since Chrome on iOS is rooted in Safari  it of course hits that one as well     Safari 9 0  iOS Only       supports  -webkit-text-size-adjust none  and  not  -ms-ime-align auto   and  not  -moz-appearance none         safari only       color  0000FF       background-color  CCCCCC           one for Safari 9 0  but not iOS devices     Safari 9   non-iOS        default not  root root    safari only      color  0000FF     background-color  CCCCCC       And one for Safari 9 0-10 0 but 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 are hacks that separate 6 1-7 0  and 7 1  These also required a combination of multiple hacks in order to get the right result     Safari 6 1-7 0      media screen and  -webkit-min-device-pixel-ratio 0  and  min-color-index 0          safari only            color  0000FF         background-color  CCCCCC               Since I have pointed out the way to block iOS devices  here is the modified version of Safari 6 1  hack that targets non-iOS devices     Safari 6 1-10 0  not 10 1   non-iOS       media screen and  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   lt div class  quot safari only quot  gt This text will be Blue in Safari lt  div gt    Usually  like in this question  the reason people ask about Safari hacks is mostly in reference to separating it from Google Chrome  again NOT iOS   It may be important to post the alternative  how to target Chrome separately from Safari as well  so I am providing that for you here in case it is needed  Here are the basics  again check my test page for lots of specific versions of Chrome  but these cover Chrome in general  Chrome is version 45  Dev and Canary versions are up to version 47 at this time  My old media query combo I put on browserhacks still works just for Chrome 29      Chrome 29       media screen and  -webkit-min-device-pixel-ratio 0  and  min-resolution  001dpcm         chrome only           color  0000FF          background-color  CCCCCC             An  supports feature query works well for Chrome 29  as well    a modified version of the one we were using for Chrome 28  below  Safari 9  the coming Firefox browsers  and the Microsoft Edge browser are not picked up with this one     Chrome 29       supports  -webkit-appearance none  and  not  overflow -webkit-marquee   and  not  -ms-ime-align auto   and  not  -moz-appearance none          chrome only           color  0000FF          background-color  CCCCCC             Previously  Chrome 28 and newer were easy to target  This is one I sent to browserhacks after seeing it included within a block of other CSS code  not originally intended as a CSS hack  and realized what it does  so I extracted the relevant portion for our purposes    NOTE    This older method below now pics up Safari 9 and the Microsoft Edge browser without the above update  The coming versions of Firefox and Microsoft Edge have added support for multiple -webkit- CSS codes in their programming  and both Edge and Safari 9 have added support for  supports feature detection  Chrome and Firefox included  supports previously     Chrome 28   Now Also Safari 9   Firefox  and Microsoft Edge      supports  -webkit-appearance none          chrome and safari           color  0000FF          background-color  CCCCCC             The block of Chrome versions 22-28  If needed to support older versions  are also possible to target with a twist on my Safari combo hacks I 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 you are new  change class name but leave this the same- gt   -chrome- only    Like the Safari CSS formatting hacks above  these can be used as follows   lt div class  quot chrome only quot  gt This text will be Blue in Chrome lt  div gt   So you don t have to search for it in this post  here is my live test page again  https   browserstrangeness bitbucket io css hacks html safari  Or the Mirror  https   browserstrangeness github io css hacks html safari The test page has many others as well  specifically version-based to further help you differentiate between Chrome and Safari  and also many hacks for Firefox  Microsoft Edge  and Internet Explorer web browsers  NOTE  If something doesn t work for you  check the test page first  but provide example code and WHICH hack you are attempting for anyone to assist you

User · Answer

By the way  for any of you guys that just need to target Safari on mobiles  just add a media query to this hack    media screen and  max-width  767px           -webkit-full-page-media    future   root  safari only           padding  10px    or any property you need           And don t forget to add the  safari only class to the element you want to target  example    lt div class  safari only  gt  This div will have a padding 10px in a mobile with Safari   lt  div gt

User · Answer

This hack 100  work only for safari 5 1-6 0  I ve just tested it with success    media only screen and  -webkit-min-device-pixel-ratio  1           i-block-chrome   yourcssrule           your css property

User · Answer

https   stackoverflow com a 17637937 3174065 it is answered here though this method does use some JS  if used  be sure to put the js in the footer  the body has to be fully loaded for this to fire properly  when placed in the head it errors because it fires before the body is loaded   it then adds a  safari class to the body  but only in safari  making targeting the css very easy

[css] is there a css hack for safari only NOT chrome?

Examples related to css

Examples related to safari