浏览器兼容性之四大内核
【浏览器兼容性之四大内核】近期开发写前端代码比较多些,就网上搜了些资料来学习浏览器兼容性这类问题,兼容性这代码调起来还是很麻烦的。先总结些理论知识。
一、浏览器内核介绍
“浏览器内核”主要指渲染引擎(Rendering Engine), 渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解析也有所不同,因此同一网页在不同的内核浏览器里的渲 染、展示效果也可能不同。主流的四大浏览器内核:
1、Trident内核代表:Internet Explore、搜狗
2、Gecko内核代表:Mozilla、Firefox
3、WebKit内核代表:Safari、Chrome
4、Presto内核代表:Opera
有些浏览器还是双内核比如:360极速、QQ浏览器等。
WebKit内核在手机上 的应用也十分广泛,例如Google的Android平台浏览器、Apple的iPhone浏览器、Nokia S60浏览器等所使用的浏览器内核引擎,都是基于WebKit引擎的。
最后再整体归纳下几种内核的优缺点吧:二、使用css hack来兼容不同的浏览器
①、Trident:因为在早期IE占有大量的市场份额,所以以前有很多网页是根据这个Trident的标准来编写的,但是实际上这个内核对真正的网页标准支持不是很好,同时存在许多安全Bug。
②、Gecko:优点就是功能强大、丰富,可以支持很多复杂网页效果和浏览器扩展接口,缺点是消耗很多的资源,比如内存。
③、Webkit:优点就是Webkit拥有清晰的源码结构、极快的渲染速度,缺点是对网页代码的兼容性较低,会使一些编写不标准的网页无法正确显示。
④、Presto:Presto内核被称为公认的浏览网页速度最快的内核,同时也是处理JS脚本最兼容的内核,能在Windows、Mac及Linux操作系统下完美运行。
CSS Hack大致有3种表现形式(下面的讨论已经不包含IE6了):
1、HTML头部引用Hack:这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
针对所有IE:
针对IE9及以下版本://html兼容ie的写法
//类a某个样式在ie8上有问题时,就可以写成
.ie8 .a{}
2、类内属性前缀法和选择器前缀法:CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期的页面展现效果
文章图片
Paste_Image.png 三、不同浏览器内核对css3跟html5的支持
下面这篇文章介绍很详细了。
http://tools.yesky.com/101/11197101_2.shtml
四、总结
浏览器兼容性是个任重而道远的任务,近期都在看别人写的兼容性好的前端框架,获益不少,看着那些纯css实现的动画效果,让人惊呆了,前端也是门很深的课程。
推荐阅读
- PMSJ寻平面设计师之现代(Hyundai)
- 太平之莲
- 闲杂“细雨”
- 七年之痒之后
- 深入理解Go之generate
- 由浅入深理解AOP
- 期刊|期刊 | 国内核心期刊之(北大核心)
- 生活随笔|好天气下的意外之喜
- 感恩之旅第75天
- python学习之|python学习之 实现QQ自动发送消息