浏览器引擎

主流浏览器内核私有属性css前缀:  mozilla内核 (firefox,flock等)        -moz
                                                      webkit内核(safari,chrome等)       -webkit
                                                      opera内核(opera浏览器)              -o
                                                      trident内核(ie浏览器)                   -ms

浏览器 最重要 最核心的部分是“解释引擎”,也就是“浏览器内核”: 负责对网页语法的解释(如HTML、JavaScript)并渲染(显示)网页

网页的工作过程需要使用到 两个引擎 渲染引擎和javascript引擎
什么是JavaScript引擎?简单来讲,就是能够 提供执行JavaScript代码的运行环境
所以,通常所谓的 浏览器内核 也就是 浏览器所采用的渲染引擎 排版引擎 (Rendering Engine,也有称 渲染引擎 ),渲染引擎决定了 浏览器如何显示网页的内容以及页面的格式信息 。不同的浏览器内核对 网页编写语法的解释 也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是 网页编写者 需要在 不同内核 的浏览器中 测试 网页显示效果的原因。
浏览器内核很多,如果加上所有的几乎没有什么人在用的 非商业的免费内核 ,那么可能大约有 10款以上甚至更多 ,不过通常我们比较常见的大约只有以下四种:

- Trident :
IE浏览器(遨游、世界之窗、腾讯TT…都是IE)Trident内核最慢
IE 以Trident 作为内核引擎 ,前缀为–ms。

- Gecko:
- 开放源代码、以C++编写的网页排版引擎,是跨平台的
FireFox是基于 Gecko 开发;
- presto:
目前公认网页浏览速度最快的浏览器内核,然而代价是牺牲了网页的兼容性。由Opera Software开发的浏览器排版引擎,Opera(欧朋浏览器),但由于市场选择问题,主要应用在手机平台–Opera mini
- Webkit:
苹果公司自己的内核,google的chrome也使用webkit作为内核。
是一个开源的浏览器引擎,同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称,它拥有清晰的源码结构、极快的渲染速度,包含的 WebCore 排版引擎和 JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来。
许多网站都是按照IE来架设的,很多网站不兼容Webkit内核,比如登录界面、网银等网页均不可使用Webkit内核的浏览器。
Safari, Google Chrome, 傲游3, 猎豹浏览器, 百度浏览器 opera浏览器 基于 Webkit 开发。

注:2013年2月Opera宣布转向WebKit引擎
注:2013年4月Opera宣布放弃WEBKIT,跟随GOOGLE的新开发的blink引擎

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用Webkit浏览器引擎私有属性"-webkit-mask-image"将一个名为"heart.png"的图像作为遮罩层应用于元素,并将其大小设置为与div相同,可以使用以下CSS代码: ``` div { width: 300px; height: 300px; background-image: url(background.jpg); /* 设置div的背景图片 */ -webkit-mask-image: url(heart.png); /* 将heart.png作为遮罩层 */ -webkit-mask-size: 100% 100%; /* 将遮罩层的大小设置为与div相同 */ -webkit-mask-position: center; /* 将遮罩层居中 */ -webkit-mask-repeat: no-repeat; /* 禁止遮罩层重复 */ mask-image: url(heart.png); /* 兼容性写法,用于其他浏览器 */ mask-size: 100% 100%; /* 兼容性写法,用于其他浏览器 */ mask-position: center; /* 兼容性写法,用于其他浏览器 */ mask-repeat: no-repeat; /* 兼容性写法,用于其他浏览器 */ } ``` 在这个例子中,我们使用Webkit浏览器引擎私有属性"-webkit-mask-image"将"heart.png"图像作为遮罩层,并使用"-webkit-mask-size"属性将遮罩层的大小设置为与div相同。我们还使用"-webkit-mask-position"属性将遮罩层居中,并使用"-webkit-mask-repeat"属性禁止遮罩层重复。 为了在其他浏览器中实现相同的效果,我们还添加了通用的"mask-image"、"mask-size"、"mask-position"和"mask-repeat"属性,并将它们设置为相同的值。这样可以确保在不同的浏览器中都能够正确地显示遮罩层效果。 需要注意的是,"-webkit-mask-image"是一个Webkit浏览器引擎私有属性,只有在Webkit浏览器引擎中才能生效。在其他浏览器中,该属性可能被忽略。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值