应用基于浏览器引擎的 CSS？答案

【问题标题】：Applying CSS based on Browser's Engine?应用基于浏览器引擎的 CSS？
【发布时间】：2018-07-27 23:55:39
【问题描述】：

最近，我一直在为某人构建一个网站，并且对某些浏览器以一种方式呈现网站而其他浏览器以另一种方式呈现感到恼火。我决定研究为什么会这样，并发现问题可能出在浏览器下面的 HTML 引擎上。例如，Chrome 和 Opera（以及大多数（如果不是全部）Chromium 浏览器）使用 Blink 引擎，它是 WebKit 引擎（源自 KHTML 引擎）的一个分支。 Safari 使用 WebKit。 Internet Explorer 使用 Trident 浏览器； Edge 使用称为 EdgeHTML 的 Trident 的分支。 Netscape 和 FireFox 使用（或在 Netscape 的情况下，考虑到浏览器已停产）使用 Gecko 引擎。

考虑到所有这些，是否可以将 CSS 应用于特定引擎而不是浏览器？或者当我们尝试使用特定于浏览器的 CSS 时，这是否已经完成？用户代理字符串的目的是为了做到这一点（显然被想要模仿其他浏览器的开发人员搞砸了）？

注意，通过比较这些引擎的相关性，我认为有 3 个主要引擎：基于 KHTML、基于 Trident 和 Gecko。所以我猜这个问题的答案至少会给出三种不同的方法（每个主要引擎一个）。

【问题讨论】：

标签： html css browser cross-browser

【解决方案1】：

即使有可能（使用供应商前缀），维护代码库也可能很痛苦。我建议你reset 或normalize。

我的重置是重置和标准化的合并。

【讨论】：

1+，即使在浏览器、chrome 和 firefox 之间的打印预览中，我也遇到了同样的问题。它是否在打印预览中应用了相同的重置和规范化？谢谢。
它通常被应用，但关于如何在打印中应用 CSS，似乎没有跨浏览器观察指南。在移动优先布局中，chrome 通常会应用第一个样式，因此我还指定在桌面媒体查询中打印，例如：@media (min-width:769px), print { ... }
值得尝试并了解更多关于它们的信息，非常感谢您的回复；）

【解决方案2】：

您可以使用供应商前缀，甚至通过使用供应商前缀的支持查询来定位其中一些，例如

@supports (-webkit-appearance:none) {}

Browserhacks 对此有很多方法。

话虽如此，你真的，真的不应该。维护将是一场噩梦。

浏览器差异的原因是：

1) 不同的用户代理样式（默认浏览器规则）； Normalise 或 reset 会为您解决这个问题。

2) 一些实验性功能可能仅适用于某些浏览器，或者它们之间不同，通常由供应商前缀解决；诸如Prefix Free 或 Post CSS 的Autoprefixer 之类的自动前缀可以很好地处理这个问题。

3) 不同的功能；知道what you can and can't do on each 会带你走很长一段路，当你发现一个限制时，一定要使用fallbacks 甚至是polyfills。

99.999% 可以通过规范化、自动前缀以及对浏览器功能和回退的充分理解来实现。

请记住，您的项目应该在所有浏览器上工作正常（或者尽可能多，没有人希望在 2018 年支持 IE6..），但它可以在某些浏览器上看起来并有更好的体验 /最多。这就是渐进增强和优雅降级的目的。

【讨论】：