0

I have a client that needs me to support Safari 6 and up. I had to center some text on a rotating banner but the css to center on IE 9 and Safari 6 and 7 has to be different that what I would use on IE 10+ and Safari 8+. I already have an IE9 conditional statement in place for the IE9 fix but how do I get one in place for Safari 6 and 7? Do I need to browser sniff? Is there a conditional for Safari 6 and 7 only? Or is there a CSS hack for Safari 6 and 7. I have search all over but my searches aren't finding an answer for Safari 6 and 7.

Thanks!

Stephen J
  • 15
  • 9
  • I'd be curious to know what centering technique is not applicable in Safari 6/7 versus Safari 8+. Also, just FYI, conditional comments are a non-standard IE exclusive feature. – jeffjenx Nov 25 '15 at 15:23
  • I'm using the css centering from here for more modern browsers: https://css-tricks.com/centering-css-complete-guide/ – Stephen J Nov 25 '15 at 16:05
  • .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } – Stephen J Nov 25 '15 at 16:05
  • but IE 9 and Safari 6 and 7 push that off to the right. So now I need: – Stephen J Nov 25 '15 at 16:06
  • position: absolute; width: 75%; top: 40%; left: 10%; text-align: center; – Stephen J Nov 25 '15 at 16:06
  • And have you tried adding `-webkit-transform: translate( ... );` (in addition to the transform prop)? IIRC, Safari has supported 2D transform since version 3 with the prefix. – jeffjenx Nov 25 '15 at 16:08
  • I didn't use browser specific prefixes for that http://caniuse.com/#search=-webkit-transform - but ultimately it doesn't support Safari 6 or 7 – Stephen J Nov 25 '15 at 17:58
  • Did you click the 'SHOW ALL' button on CanIUse.com? It shows `transform` support goes back to Safari 3.1 with the `-webkit` prefix. If you actually tried it and it doesn't work in your scenario, so be it, but it is actually a good practice to include the prefixed properties, since that is why they are there. Using hacks or user-agent sniffing are not best practices. – jeffjenx Nov 25 '15 at 18:13
  • Even IE9 claims to have support for transform with the `-ms` prefix according to caniuse. – jeffjenx Nov 25 '15 at 19:00

3 Answers3

0

http://browserhacks.com/ is quite helpful. It offers some JS, Media Query, and CSS only browser filters.

I've used var isSafari = /constructor/i.test(window.HTMLElement); in my JS before with great success, but be careful, a lot of Safari bits also target Chrome (but it shows which browsers are affected on the site).

Natalie
  • 546
  • 10
  • 21
  • I've checked out browserhacks.com but i can't find anything for safari 6 and 7 specifically. i see something there for 6 but i need to cover both. if i can find a browser sniffer script for safari 6 and 7 i can have it insert embedded – Stephen J Nov 25 '15 at 15:33
0

A trust way, in my opinion is:

if (
navigator.userAgent.indexOf('Safari') != -1 
&& 
navigator.userAgent.indexOf('Chrome') == -1
)
holden
  • 1,721
  • 12
  • 19
0

The final solution is here: How can you detect the version of a browser?

// I added this to the above solution to change the css $(document).ready(function(){var browser = get_browser_info();if(browser.name == "Safari" && (browser.version == "5" || browser.version == "6" || browser.version == "7")){$(".centerCaption").css({"width": "75%", "top": "40%", "left": "12%"});}});

Community
  • 1
  • 1
Stephen J
  • 15
  • 9