how can I give different css for safari browser

Question

I wanna give different css for safari. Because my code works perfect in chrome and Firefox. But it destroy the structure in safari. so, I want to give different stylesheet for safari. I already tried,

button{
       margin: 0px 10px 0px 0px /* Safari */;
       margin: 0px 10px 0px 20px /* chrome */;
}

This is just one example, but there are so many things, which break in safari.

You can check this answer for clarified details - http://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome — Murshid Ahmed, Oct 15 '15 at 05:44
You can check the browser by php or Javascript then if it's Safari add a class to the element and give it the extra style. — Mossen, Oct 15 '15 at 05:52
Safari shouldn't give that many problems. Are you testing Safari for Windows? That's a dead browser which hasn't been supported for years and is packed with security holes. You should encourage people to stop using it instead. — Quentin, Oct 15 '15 at 06:55

score 1 · Answer 1 · answered Sep 17 '16 at 12:22

I agree rajveer mori, try this code

 <head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <style type="text/css">audio {display: none;}</style>
    </head>
    <body>
    <ul id="nav-two" class="nav">
        <li>
            <a href="#">Home</a>
            <audio id="sound" controls preload="auto"><source src="http://soundbible.com/mp3/MP5_SMG-GunGuru-703432894.mp3" controls></source></audio>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
    <script>
    $("#nav-two a")
      .each(function(i) {
        if (i != 0) {
          $("#sound")
            .clone()
            .attr("id", "sound" + i)
            .appendTo($(this).parent());
        }
        $(this).data("beep", i);
      })
      .mouseenter(function() {
        $("#sound" + $(this).data("beep"))[0].play();
      });
    $("#sound").attr("id", "sound0");
    </script>
    </body>

score 0 · Answer 2 · answered Oct 15 '15 at 06:49

You can use jQuery to target Safari specifically, and load alternate CSS or an entirely different stylesheet if you wish:

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1){
  // do something for Safari only
} else {
  // do something else in all other browsers
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

how can I give different css for safari browser

2 Answers2