11

I am making a website, but an element needs margin in Chrome and other browsers, but not in safari. So I want to add a css line to fix it, but I can't find any method to add css for safari 3+ only.

Mohammad Areeb Siddiqui
  • 9,795
  • 14
  • 71
  • 113
Johan
  • 361
  • 2
  • 7
  • 16
  • I believe that's not possible beacause safari and chrome are both `-webkit-` browsers and the CSS may change the style on both of them instead of one, but let's see what other's say. +1 from here... – Mohammad Areeb Siddiqui Jul 14 '13 at 08:50
  • 2
    Know how to search: [Google Safari CSS hack](https://www.google.com/search?q=safari%20css%20hack) (indeed, what you're looking for is a browser-specific hack). – Rob W Jul 14 '13 at 09:01
  • 1
    I tested with css feature detection for safari 9.0 and it is working fine for me. Check my CSS hack below to find how it works. – Iman Sedighi Oct 30 '15 at 04:27
  • Does this answer your question? [is there a css hack for safari only NOT chrome?](https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome) – Vega Nov 05 '19 at 03:58

8 Answers8

13

I believe this should work

Fiddle : http://jsfiddle.net/kHFjM/1/

    var userAgent = navigator.userAgent.toLowerCase(); 
    if (userAgent .indexOf('safari')!=-1){ 
       if(userAgent .indexOf('chrome')  > -1){
         //browser is chrome
       }else if((userAgent .indexOf('opera')  > -1)||(userAgent .indexOf('opr')  > -1)){
         //browser is opera 
       }else{
        //browser is safari, add css
       }
    }

here is the link to detect the browser version https://stackoverflow.com/a/5918791

Community
  • 1
  • 1
user2580076
  • 577
  • 2
  • 10
10

jQuery integrated solution:

<script type="text/javascript">
$(function () {
if (navigator.userAgent.indexOf('Safari') != -1 && 
    navigator.userAgent.indexOf('Chrome') == -1) {
        $("body").addClass("safari");
    }
});
</script>

<style>
div {
  margin:20px;
}

.safari div {
  margin:0;
}
</style>

Pure JS integrated solution:

<style>
div {
  margin:20px;
}

.safari div {
  margin:0;
}
</style>
<body>
<script type="text/javascript"> 
if (navigator.userAgent.indexOf('Safari') != -1 && 
    navigator.userAgent.indexOf('Chrome') == -1) {
        document.body.className += " safari";
    }
</script>
</body>
michaelmcgurk
  • 6,367
  • 23
  • 94
  • 190
Krab
  • 6,526
  • 6
  • 41
  • 78
8

This is not possible since you would be applying the same property to Chrome as well. As Chrome, and Safari both use the -webkit- prefix.

But you could do this in PHP. 

<?php
    $browser = get_browser();
    if(strtolower($browser->browser) == 'safari') {
        echo '<link href="safari.css" rel="stylesheet" type="text/css" />';
    } 
?>

Replace safari.css with your own stylesheet. Credit to @theorise

Abu
  • 124
  • 1
  • 1
  • 7
7

In safari 9.0 (only, not > 9.0) you can do it now in CSS with this nice hack. You don't need any JS code. I did it and its working fine for me. Use this hack: 

@supports (overflow:-webkit-marquee) and (justify-content:inherit) {

/* type your custom css code here */

}

The reason it is working is: Safari 9.0 and above have feature detection. So by detecting a feature which is exclusively for Safari you can detect Safari. overflow:-webkit-marquee and justify-content:inherit are exclusively for safari. Thats why we can detect safari with this simple CSS hack.

Jeff Clayton
  • 7,053
  • 1
  • 31
  • 36
Iman Sedighi
  • 7,624
  • 4
  • 48
  • 55
  • 1
    Great shout! I was hoping for a CSS-only solution, needing to apply a style for mobile Safari but not for Chrome, and this has worked for me. – JonBrave Jan 07 '16 at 13:27
  • 1
    `justify-content:inherit` sounds like something other browsers might implement as well. Is this future-proof? – Berry M. Jan 02 '17 at 10:05
  • 1
    This is actually one of mine, it is future proof because the additional marquee part of the command has been deprecated and is required. This one targets only safari 9, not newer. See my test page https://browserstrangeness.bitbucket.io/css_hacks.html – Jeff Clayton May 09 '19 at 12:11
5

This worked for me for old and new safari browsers:

@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance: none) {
    /* Safari Only CSS here */
  }
}
Tony Tai Nguyen
  • 1,502
  • 13
  • 27
1

Instead of adding more code to fix your problem, since the default margins are different, you could try resetting all off the margins and paddings of surrounding elements to 0 first before changing it. That could solve your issue.

It's completely a personal preference, but I start all of my webpages with:

*{
    margin:0;
    padding:0;
}

I've never had any cross browser issues regarding margins or padding while doing this.

0

There is a question similar to this on the CSS-Tricks forum. But the answer is basically, nope. You could attempt user-agent sniffing server side or with JavaScript and then add a class to the html (like for old IE versions in HTML5 BoilerPlate).

Hope this helps.

--beaten to it by the guys above and below!

Aditya
  • 5,509
  • 4
  • 31
  • 51
Watters
  • 368
  • 1
  • 2
  • 9
0

I have tried almost all of the above-suggested solutions, but nothing is working around until I saw a piece of code in my says:

@-webkit-keyframes fadein { //code here }

And it did the job and applied the required CSS for: Safari, Chrome and Opera > 12.1

Hope this can help someone.

Jodyshop
  • 656
  • 8
  • 12