How do I add a css line ONLY for Safari

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


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>

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.


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

Tags:

Html

Css

Safari

Stylesheet

Recent Posts