如何只为safari浏览器而不是chrome提供css

Question

我的Safari浏览器版本 5.0 。我的问题是如何为safari浏览器提供css而不是Chrome浏览器。

拜托，帮助我。谢谢

Answer 1

使用它。它只适用于Safari。

/* Css for Safari  */
 @media screen and (-webkit-min-device-pixel-ratio:0){
    ::i-block-chrome, .yourClassName {
         background:#f00;
    }
}

Answer 2

CSS选择器/属性/价值黑客是不成问题的，如

• 像SASS这样的预处理器可能无法与它们一起使用
• 他们适用的浏览器或浏览器版本可能会发生变化

因此 - 如果你真的需要使用浏览器特定的css - 我建议你使用JavaScript将某个类设置为or标签，然后由CSS Selector使用它来仅在这些所需的浏览器中设置样式。

JS：

IAuxDataKey

CSS：

if(doSomeUserAgentLogic()) {
  document.body.classList.add("is-safari")

}

在JavaScript中使用userAgent检测浏览器和某些版本并不容易，因此您应该使用类似https://github.com/DamonOehlman/detect-browser的内容，但至少这种检测方式“非常”稳定。