solvit.io

Apply some CSS styles only in the Safari browser

Web browsers contain bugs and defects, some of them unique to each browser. Forcing those defects on purpose is one of the best tricks to apply some CSS styles only in some specific browsers, such as Safari.

Any Safari version
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
    /*
      Define here the CSS styles applied only to Safari browsers
      (any version and any device)
     */
}}
Safari 9
@supports (overflow:-webkit-marquee) and (justify-content:inherit)
{
    /*
      Define here the CSS styles applied only to the Safari 9 version when
      running in any device
     */
}
@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
    /*
      Define here the CSS styles applied only to the Safari 9 version when
      running in iOS devices (iPhone, iPad, ...)
     */
}
_:-webkit-full-screen:not(:root:root), .your-selector-here
{
    /*
      Define here the CSS styles applied only to the Safari 9 version when
      not running in iOS devices (iPhone, iPad, ...)
     */
}
Safari 6 & 7
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0) {
    /*
      Define here the CSS styles applied only to the Safari 6 and 7 versions when
      running them in any device (computers, iPhone, iPad, ...)
     */
}

Visit Browserhacks.com for a more complete and updated list of hacks.

Find more solutions about: , , , , ,