Is there any CSS property for Safari only?

Answer 1

There is no CSS property to detect browser type, but there are ways of doing it.

1) Javascript. You could write some code to detect what type of browser you're in.

var isOpera = navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1

var isChrome = navigator.userAgent.indexOf("Chrome") != -1 )

var isFirefox = if(navigator.userAgent.indexOf("Firefox") != -1 )

var isIE = navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true ))

And then you could set your styles accordingly.

You could also use Sass or Less to do this.

Sass Mixin

@mixin browser($browsers: Mozilla) {

  @each $browser in $browsers {

    html[data-browser*="#{$browser}"] & {

      @content;

    }

  }

}

Less Mixin

@import "for-loop.less";

.browser(@browser: Mozilla, @content) {

  .for(@browser);

  .-each(@value) {

    html[data-browser*="@{value}"] & {

      @content();

    }

  }

}