基于浏览器引擎应用 CSS?

Applying CSS based on Browser's Engine?

最近,我一直在为某人构建一个网站,我对一些浏览器以一种方式呈现网站而另一些浏览器以另一种方式呈现网站感到恼火。我决定调查这是为什么,并发现问题可能出在浏览器下方的 HTML 引擎中。例如,Chrome 和 Opera(以及大多数(如果不是全部的话)Chromium 浏览器)使用 Blink 引擎,它是 WebKit 引擎(从 KHTML 引擎衍生而来)的一个分支。 Safari 使用 WebKit。 Internet Explorer 使用 Trident 浏览器; Edge 使用 Trident 的分支,称为 EdgeHTML。 Netscape 和 FireFox 使用(或使用,在 Netscape 的情况下,考虑到浏览器已停产)Gecko 引擎。

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

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

即使有可能(使用供应商前缀),维护代码库也可能很痛苦。我建议你 reset or normalize.

我的重置是重置和正常化的合并。

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

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

Browserhacks 对此有大量的方法。


话虽这么说,你真的、真的不应该。维护起来将是一场噩梦。

浏览器差异是由以下原因造成的:

1) 不同的user-agent 样式(默认浏览器规则); Normalise or reset 会为您处理。

2) 一些实验性功能可能仅适用于某些浏览器,或者它们之间有所不同,通常由供应商前缀表示; Prefix Free or Post CSS's Autoprefixer 之类的自动前缀处理得很好。

3) 不同的特征;知道 what you can and can't do on each 会让你走很长的路,每当你发现限制时,一定要使用回退甚至 polyfills。

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

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