首页 文章

基于浏览器引擎应用CSS?

提问于
浏览
0

最近,我一直在为某人 Build 一个网站,我对一些浏览器以某种方式渲染网站以及其他浏览器呈现另一种方式感到恼火 . 我决定研究为什么会这样,并发现问题可能在浏览器下面的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 . 所以我猜这个问题的答案将至少提供三种不同的方法(每个主要引擎一个) .

2 回答

  • 4

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

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

    Browserhacks有很多方法可供选择 .


    话虽如此, you really, really shouldn't . 维持这将是一场噩梦 .

    浏览器差异由以下原因引起

    1)不同的用户代理样式(默认浏览器规则); Normalisereset将为您处理 .

    2)某些实验性功能可能仅适用于某些浏览器,或者它们之间有所不同,通常由供应商前缀解决; Autoprefixer如Prefix Free或Post CSS的Autoprefixer处理完全没问题 .

    3)不同的功能;知道what you can and can't do on each将带您走很长的路,每当您发现限制时,请务必使用后备甚至填充 .

    使用规范化,自动修复程序以及对浏览器功能和后备的理解可以实现99.999% .

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

  • 1

    即使有可能(使用供应商前缀),维护代码库也是一件痛苦的事 . 我建议你resetnormalize .

    我的重置是重置和规范化的合并 .

相关问题