如何仅用于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 selector/property/value hacks是有问题的，如

• 像Sass这样的预处理器可能无法与之合作
• 它们适用的浏览器或浏览器反面，如更改

因此 - 如果您确实需要使用特定于浏览器的CSS-我建议您使用JavaScript将某个类设置为或标签，然后由CSS选择器将其用于仅在这些所需浏览器中样式的样式。

JS：

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

CSS：

body.is-safari .custom-selector {
  property: value;
}

使用JavaScript中的UserAgent检测浏览器和某些版本并不容易，因此您可能应该使用https://github.com/damonoehlman/detect-browser之类的东西，但至少这种检测方式是"很大程度上是"稳定。