Css Hack Safari Mac Only

| 16-04-2021
[RAND-1-100] Comments



  1. CSS, Safari: Target only Safari browser. GitHub Gist: instantly share code, notes, and snippets.
  2. CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge A set of useful CSS3 media queries to target only specific versions of the various browsers: Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari and Microsoft Edge.

Fatality On Top Config Giveaway (Addon.to Invite Giveaway)

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.

C’mon, if you make professional sites the first thing you learn is that you will have a mainstream CSS, minor fixes for Chrome, some fix for Safari (or Safari Mac) and a load of fixes to support IE6 (still used in China guys), IE7, then odd stuff for IE8, exceptions IE9, just to discover that on IE10 there’s other problems.

i have been trying to use this but it affects chrome as well,

Css target safari

does anyone know of another one that will just apply to safari please?

  • Not using CSS, you'll need to use javascript. stackoverflow.com/questions/5899783/detect-safari-using-jquery
  • I���d be more interested in the actual problem than a fragile and hacky solution. Is it (still) available somewhere?
  • For people who are posting 'does not work' - please realize that you need to know the version of Safari you are testing. There is no 'catch-all' Safari solution for every version. You need to provide that information with your posting or no-one can assist you in finding a solution.
  • Different versions of Safari have different needs - check here for live examples: browserstrangeness.bitbucket.io/css_hacks.html#safari [Or the Mirror] browserstrangeness.github.io/css_hacks.html#safari
  • UPDATED FOR CATALINA & 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):

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.

Try this one if SCSS or other tool set has trouble with the nested media query:

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:

For more 'version specific' Safari CSS, please continue to read below.

One for Safari 11.0:

One for Safari 10.0:

Mac

Slightly modified works for 10.1 (only):

Safari 10.0 (Non-iOS Devices):

Safari 9 CSS Hacks:

A simple supports feature query hack for Safari 9.0 and up:

A simple underscore hack for Safari 9.0 and up:

Another one for Safari 9.0 and up:

and another support features query too:

One for Safari 9.0-10.0:

Safari 9 now includes feature detection so we can use that now...

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.

one for Safari 9.0+ but not iOS devices:

And one for Safari 9.0-10.0 but not iOS devices:

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:

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:

To use them:

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+:

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:

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.

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:

Like the Safari CSS formatting hacks above, these can be used as follows:

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.

  • 11 Just want to say that test page is awesome. I can now browse to that site with any device and see which css rules are applicable!
  • 1 Will this apply to Safari on iPhone or iPad?
  • 1 actually, I just solved my own question using a combination of the example above AND the (;property: value;); below and it worked great!
  • 1 The hack for Safari 6.1+ at the top of this answer throws an error in the Sass compiler. Is there a way to solve it?
  • 2 @Blackbird Sorry but you cannot compile or filter the hacks, it ruins them. They have to be used as-is. (Add them to the completed css file after compilation.) The fact that they are non-standard is why they work.

There is a way to filter Safari 5+ from Chrome:

  • 3 jeffclayton.wordpress.com/2014/07/22/… - I have been working on many (I test and create css hacks for browserhacks.com) and test page here: browserstrangeness.bitbucket.org/css_hacks.html#webkit
  • Note: in iOS [tested in iOS 7], the chrome version is actually running the safari engine, so on ipads or iphones, you use the safari hacks. For other devices, they are different.
  • So, basically the code in the answer works for Safari 5.0 and 6.0 and not 6.1+?
  • To be absolutely accurate, the ::i-block-chrome, .myClass { } construct allows only Safari 5.1-6.0, but also Chrome 10-24 (old version of Chrome not really used anymore so not entirely worth mentioning) but nothing newer - Safari hacks tend to work like that: one batch handles 5.1-6.0, another handles 6.1-7.0, and the newer ones handle 7.1-8.0. They seem to update things a lot until they decide to go to the next numerical version which is very close to the previous '.1' release.
  • At the time of this answer in 2013, Safari 6.1 had just been released, so not enough people had seen that the browser had changed so this was the most accurate one at the time. If you need newer ones check my answer below. This was a great answer at the time it was provided. Time changes however so I posted my work as an update to this one. It took months for me to create the 6.1-7.0 and 7.1-8.0 ones. I hope you like the results. Most likely when a version 8.1 is released if it follows the pattern, it will also require a different hack. Again only time will tell.

Sarari Only

  • 8 Care to add some explanation? Do I literally type root:root?
  • 1 This one is exactly correct for Safari 3.x (and Chrome version 1.0 only though nobody uses Chrome 1.0 since it is in the 30's now...)
  • This one now targets Safari 9.0 as well, so complete stats have updated: /* Chrome 1.0, Safari 3.X, Safari 9.0+ */
  • 4 The :not(:root:root) selector is invalid according to CSS Selectors 3 spec (in which :not() can contain only a simple selector, i.e. one type selector or one ID or one class or one pseudo-class), but completely valid according to CSS Selectors 4 (where :not() accepts list of selectors). It's true that currently only Safari understands CSS Selectors 4 syntax, but this solution is not future-proof.
  • 2 Very few hacks are not (and much actual standard code is not due to version changes) future proof. The best plan is if you are going to use a css hack, use it only as a temporary fix in order to buy time to make a more official cross-browser update.

This hack 100% work only for safari 5.1-6.0. I've just tested it with success.

  • 3 This hack is actually for both Chrome and Safari in different versions. It allows Chrome 10-24 (which nobody uses any more which is why people listed that it blocked Chrome) and Safari 5.1-6.0 only. It does not work for Safari 6.1 and newer however. At the time there was no better hack of its kind.
  • 1 @veronica-lotti, this worked for me too. You get rid of my headache. Thank you
  • People - please be careful. What these comments are describing is a method that does not work for versions of Safari in the last several years and only works for old versions. What that really means is that most people on the internet will not have the result you are looking for, but only people with older computers. This does not work for current operating systems. At this time most people have version 12 and higher (not 6.0 and lower, which were current only during the windows XP era.)

Replace your class in (.myClass)

/* Safari only */ .myClass:not(:root:root) { enter code here }

Safari Css Hack

  • This is a good one for Safari -- the only other browser it targets is Chrome 1 (nobody uses Chome 1 anymore)
  • Exact Specs for people who are not using the latest Macs: Chrome 1, Safari 3.X, Safari 9.0+ (not Safari 4-8)
  • 1 This works with the latest version of Safari 7+ and as far as I can tell should be the accepted answer.
  • Wow thanks this finally worked for me after trying so many browser hacks for Safari!!!

For those who want to implement a hack for Safari 7.0 and below, but not 7.1 and above -- use:

  • I gave this a try on Safari 7 and couldn't get it to work. Can you provide a working example by any chance?
  • @Juicy: There are live tests of these at browserhacks.com -- They work on Safari 7 and lower, and also Chrome 28 and lower. (As mentioned in another posting iOS 7 and 8 maybe others as well use the Safari engine for Chrome, so Chrome and Safari on iPads are both really Safari)
  • You may have been trying it in Safari 7.1, not Safari 7.0. It is valid for 7.0 and earlier, not 7.1 and newer. When this answer was posted, 7.0 was the latest version of Safari so it was true at that time.
  • works for Safari for Windows (version 5.1.7 (7534.57.2))
  • works for Safari for Mac (Version 6.0.2 (7536.26.17))

I like to use the following method:

  • This JavaScript hack method requires the JQuery package to be installed.
  • This is regarded as extremely bad practice, browser sniffing is very error-prone and leads to heaps of false positives. Don't do this, even media-query sniffing is very dirty but could be acceptable for very small changes.

By the way, for any of you guys that just need to target Safari on mobiles, just add a media query to this hack:

And don't forget to add the .safari_only class to the element you want to target, example:

When using this safari-only filter I could target Safari (iOS and Mac), but exclude Chrome (and other browsers):

  • this doesn't filter Edge

Step 1: use https://modernizr.com/

Step 2: use the html class .regions to select only Safari

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.

  • 1 modernizr is a great javascript addon to websites to identify browsers, excellent tool! -- this hack will work (as others) until other browsers decide to support the regions feature
  • 1 CSS regions is not supported anymore.
  • 2 Regions enables me to target Safari 6.1 to 11 and 7.1 to 11.2 on iOS and that alone is great already.
  • @lowtechsun - great posting your stats on this, hacks are only good as the knowledge of what browsers they target.

hi i ve made this and it worked for me

Css Hack Safari Mac Only
  • This is a nice set, good use of the hack with multiple device settings for web sites using responsive views.

This works:

  • This works for me - thanks. Can you explain why?
  • @heLL0 because dcpm unit is not supported by Safari at all (@media not all and...) caniuse.com/mdn-css_types_resolution_dpcm

Note: If iOS-only is sufficient (if you're willing to sacrifice Safari desktop), then this works:

You can use a media-query hack to select Safari 6.1-7.0 from other browsers.

Disclaimer: This hack also targets old Chrome versions (before July 2013).

  • It doesn't work on newer Safari, the stats for this one are surgical however: Safari 6.1-7.0, Chrome 22-28 so still handy.

At the end I use a little JavaScript to achieve it:

then in my CSS to target Apple browser engine the selector will be:

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 Hack Safari Mac Only 1

It working 100% in safari..i tried

  • This works on older versions of Safari, not current ones-- 6.1 and newer.

Css Safari Only

I have tested and it worked for me

If you know CSS, you know that the above just seems to good to be true. Well, it is!

You really can’t make this happen without a little JavaScript. But, with a little JS, we can make our CSS much more complete.

Let’s imagine that we wanted to apply a whole bunch of CSS rules to Mac OS X browsers only. Wouldn’t it be great if we could just do something like:

Ideally, this would force all Mac OS X browsers to style paragraph tags with a 2em line height.

Well, as I said before, with a little JavaScript, we can actually make this possible. The below example uses jQuery.

Safari Custom Css

Essentially, we’re adding the mac-os class name to your body tag if a Mac OS operating system is detected, which makes the above CSS rules possible!

Quick Tips

Css Hack Safari Mac Only Download

  1. You may not have the jQuery library loaded, in which case, this is easily done with “traditional” JavaScript:document.getElementsByTagName('body')[0].className += ' mac-os';
  2. If you wish to target only Webkit browsers on the Mac (Safari and Chrome), you can couple this tip with webkit’s proprietary media query as follows:
  3. Similarly, if you wanted specific styles to target individual Mac browsers, you could do the following:

    Then, within your CSS, you’re able to do something like the following:

  4. Although these tricks may do the job, they may cause issues for you down the line. It may make sense to “reset” your CSS styles first. Each browser has a different set of defaults styles for each element (some might have a line height of 1em for paragraph tags while others have 1.25 em as the height).The best way to ensure consistency is to first set a base style for all elements. This technique is popular within WordPress themes but can be done easily by adding this one line of CSS to the beginning of your stylesheet:
    Minified CSS reset styles