'Safari specific css

How to write only safari specific styles without affecting any other browser styles?

I have tried it but it is not working in safari.I'm using Safari 5+.

@media not all and (-webkit-min-device-pixel-ratio:0) {
  .btn-group > .btn + .btn {

      margin-left: -8px;
  }  
  .btn-group:hover a {
      z-index:1;
  }
  .btn-group:hover button{
      z-index:10;
  }
  .input-append input{
      z-index:1;
  }
  .input-append  a{
      z-index:10;
  }

}
csssafari


Solution 1:[1]

Try thi site: http://www.browserhacks.com/#sa

html[xmlns*=""]:root .selector {} should work..

so, for the first rule, try following.

html[xmlns*=""]:root .btn-group > .btn + .btn {
  margin-left: -8px;
}

Solution 2:[2]

Its work perfectly on the Safari browser only

Only for Safari ::i-block-chrome, #your id or class name{ }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Madushan
Solution 2 preety

Related Questions