每种浏览器内核都有着对应的浏览器内核前缀。浏览器内核前缀在书写CSS代码时会用到,对于添加了浏览器前缀的CSS代码,只有对应的浏览器内核才能识别。
浏览器内核前缀是为了解决兼容性而存在的。只有一些实验性的、非标准的和私有的CSS属性需要添加浏览器内核前缀,而标准的CSS属性不需要添加浏览器内核前缀,若添加了,这些属性将不会生效。
浏览器内核与对应的浏览器内核前缀如下:
浏览器内核 | 代表浏览器 | 浏览器内核前缀 |
---|---|---|
trident | IE、Edge | -ms |
Blink | Chrome | -webkit |
WebKit | Safari,旧版本chrome,新版本Opera | -webkit |
Gecko | FireFox | -moz |
Presto | 旧版本Opera | -o |
但由于浏览器内核前缀是用于一些实验性的、非标准的和私有的CSS属性,有时我们会忘记甚至不知道这些CSS属性的存在,这会给开发时带来麻烦。有没有办法解决这个问题呢?
答案是有的。我们可以使用autoprefixer等工具自动补全所需要的CSS前缀。关于autoprefixer工具的用法可以看这篇博文《还在手动给css加前缀?no!几种自动处理css前缀的方法简介》