有没有办法在 CSS 中为特定浏览器设置任何样式？

Question

例如，如果我想在 Webkit、Firefox 等中设置圆角半径，我可以使用以下 CSS：

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

但是这些样式是硬编码的还是只是在浏览器中添加了前缀地址？

例如，如果我只想在 Firefox 中更改边距，我可以简单地添加前缀，如下所示：

-moz-margin:-4px;
margin: 1px;

很高兴知道：
如果可能的话，是否可以解决特定的版本或平台？例如，-moz-4.3-margin:-4px; 不是我想要的，只是想知道。

前缀方法是否可以跨浏览器工作？我想知道，因为 Internet Explorer。

最后，margin:10px 会淘汰-moz-margin:10px 吗？如，“我们，Mozilla，终于支持margin，所以我们将忽略所有旧的-moz-margin 标签，只使用margin 标签中的值”。

Answer 1

在特定的浏览器上应用 css 是非常不好的习惯。但也有解决方案：

只有莫兹：

@-moz-document url-prefix(){
    body {
        color: #000;
    }
    div{
       margin:-4px;
    }
}

丁目和野生动物园：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    body {
        color: #90f;
    }
}

IE9以下：

<!--[if IE 9]>
    body {
        background:red;
    }
<![endif]-->

除非必要，否则我建议不要使用这个 moz 和 safari 前缀。

Answer 2

例如，如果我想在 Webkit、Firefox 等中设置圆角半径，我可以使用以下 CSS

不，它不是这样工作的。

供应商前缀属性用于实验性功能。要么是因为该属性的规范没有被锁定，要么是因为浏览器实现者知道它们的实现存在问题。

一般来说，您不应该在生产代码中使用它们，因为它们是实验性的。

对供应商前缀版本的支持已删除，因为支持稳定。

有没有办法在 CSS 中为特定浏览器设置任何样式？

有几种方法已用于该效果。

解析器错误

通过利用特定 CSS 引擎中的错误或不受支持的功能（例如，某些版本的 IE 将忽略属性名称前面的 * 字符，而其他浏览器将（正确地）丢弃整个规则）。

条件 cmets

旧版本的 Internet Explorer 支持扩展的 HTML 注释语法，可用于专门为某些版本的 IE 添加 <link> 或 <style> 元素。

已放弃对此的支持。

JavaScript

在 JS 中进行浏览器检测后，可以使用 JavaScript 将类添加到元素（通常是 body 元素）。

Answer 3

据我所知，当 CSS3 被不同的浏览器实现时，前缀被添加到属性中，只是 property 不起作用，所以我们会使用 -prefix-property 用于某些属性，如渐变或边框半径。对于大多数浏览器，它们中的大多数现在都可以在没有前缀的情况下工作，并且保留前缀系统只是为了向后兼容。

例如，如果我只想在 Firefox 中更改边距，我可以简单地添加前缀，如下所示：

-moz-margin:-4px; 边距：1px；

这行不通。但是，您可以通过这种方式为不同的浏览器（比如 IE）使用不同的样式表：

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->

特定于浏览器的前缀版本不存在。

希望这能回答你的问题。

Answer 4

作为一种解决方法，您可以在 JS 中检测浏览器版本，并将其添加到根元素的类中。您可以通过user agent 检测浏览器，npm 中有多个库。 使用这个类作为基础，你可以定位浏览器

function detectBrowser() {
  if (navigator.userAgent.includes("Chrome")) {
    return "chrome"
  }
  if (navigator.userAgent.includes("Firefox")) {
    return "firefox"
  }
  if (navigator.userAgent.includes("Safari")) {
    return "safari"
  }
}
document.body.className = detectBrowser()

p {
  display: none;
}
.safari .safariSpecific, .firefox .firefoxSpecific, .chrome .chromeSpecific {
  display: block
}

My Browser is
<p class="chromeSpecific">Chrome</p>
<p class="firefoxSpecific">Firefox</p>
<p class="safariSpecific">Safari</p>