0

I want my website to recognize when it is loaded in safari and to follow a given css that works for safari. For example, a css rule may work in any other browser but not safari; so when loaded in safari the site recognizes it and skips to the applicable css that will work with it.
Much like mobile css via the use of @media rules, written as @media only screen and (min-device-width: 300px) and (max-device-width: 979px) { css rules; }where if a screen's width is within a certain range then the following 'css rules;' apply. However, how would one right this up for browser specific. For example, maybe @safari only browser {.body {width:100vw;background:#ffffff;} img {width:90%; left-margin:auto; right-margin:auto;}}. Does anyone know of a clean way to do this? Will @safari only browser { work?

D.Davis
  • 15
  • 1
  • 10
  • https://www.paulirish.com/2009/browser-specific-css-hacks/ – demkovych Sep 17 '19 at 13:27
  • Do u want add the styles only for safari browser? – Manikandan2811 Sep 17 '19 at 13:28
  • 3
    You are much better off using feature detection to detect what features the browser provides rather than detecting which specific browser it is. Take a look at [@supports](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports). – James Coyle Sep 17 '19 at 13:30
  • I agree, avoid CSS browser hacks as long as you are not forced to use them (e.g. because of a bug in the browser). It just leads to headaches further on and since they're hacks, there is no guarantee that they'll work in upcoming versions. Also for Safari it's tricky, since it uses Webkit and may target Chrome too. Maybe consider posting here what you want to achieve or what is not working in Safari? – elveti Sep 17 '19 at 13:35
  • @Satif It did not work – D.Davis Sep 17 '19 at 13:41
  • @Manikandan2811 yes, when the site detects that it is loaded in safari then the following css rules apply. Is it possible to do this in the same way we do for responsive designs for mobile devices, as in '@safari only screen/browser' or something similar? – D.Davis Sep 17 '19 at 13:44
  • @elveti - This css rule works in all browsers **except** safari (currently using 5.1.7 on Win10 machine): ```#s5_center_column_wrap { margin-top: 30px; float: left; left: 51%; position: relative; width: 50%; }``` However I do find that this script will work in safari ```#s5_center_column_wrap { margin-top: 30px; float: left; left: 1.5%; position: relative; width: 50%; }``` . Tag displays content of site's pages so its important. All i need it to do is know when it is loaded in safari, use the 1.5% left attribute when its loaded in safari, the 50% left attribute in any other browser. – D.Davis Sep 17 '19 at 13:55
  • The CSS you listed should work the same in Safari as other webkit browsers. If it doesn't there's a problem you could fix instead of trying to target only one browser. I'd ask a different question focused on solving that problem since detecting just Safari in this case is way more effort than its worth. – Bryce Howitson Sep 17 '19 at 14:26
  • @BryceHowitson - I'm not sure how else to address or ask this question since it is one property and one browser affected. I've tried left:auto; with no luck. That works in safari but not chrome or firefox. I have no problems with any browser but safari; even ie will work with my current css rules. With safari it throws my content off the screen out of site; hence the need to set a different left: property. – D.Davis Sep 17 '19 at 14:47
  • Based on this thread https://stackoverflow.com/questions/51380048/how-to-include-a-safari-only-style-in-scss I tried: ```@media not all and (min-resolution:.001dpcm){ @supports (-webkit-appearance:none) #s5_center_column_wrap { left: 1.5%;} }``` but it did not work either; safari didn't even recognize it. I cleared the browser cache and site cache to no avail. – D.Davis Sep 17 '19 at 14:56
  • Also, just in case i did not enter the code properly I tried this...```@media not all and (min-resolution:.001dpcm){ @supports (-webkit-appearance:none) { width: 102%; } #s5_center_column_wrap { left: 1.5%;} }``` but no luck still. – D.Davis Sep 17 '19 at 14:59
  • @Everyone - thank you for your contributions. I found a workaround; I would not say that it is the fix or the end-all/be-all solution, but this seemed to work for this instance: I used viewport properties instead of pixels or percentages and I targeted the .content ( a container below the original target container #s5_center_column_wrap ) and adjusted its margins accordingly and it seems to have done the trick; now on to my mobile header....I would mark this as the answer but just because this worked for this specific issue doesn't mean it will for all and I wouldn't want to be misleading. – D.Davis Sep 17 '19 at 15:27
  • Have u got the answer? i have a solution to add safari styles using jquery for adding body class.. – Manikandan2811 Sep 18 '19 at 04:24

0 Answers0