web前端小知识

最新推荐文章于 2022-08-19 15:37:30 发布

qq_33309570

最新推荐文章于 2022-08-19 15:37:30 发布

阅读量309

点赞数

分类专栏： web前端文章标签： webkit web前端 css 浏览器

本文链接：https://blog.csdn.net/qq_33309570/article/details/51391909

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

常用的浏览器内核分别是什么？

1.谷歌浏览器使用的是webkit
2.opera 使用的是Presto,这是目前公认网页浏览速度最快的浏览内核
3.Mozilla Firefox,使用的Geckon内核
4.IE 使用的是Trident;

页面中引入css的方式主要有3种：行内添加style属性值，页面头部内嵌调用和外链，其中外链引用有两种：link和@import。

外部引用css两种方式分别为link和@import的方式：

XML/HTML代码：
<link rel="stylesheet"type="text/css" media="all" href="css文件"/>
XML/html代码：
<style type="text/css" media="screen">
@import url('css文件');
</style>

两者都是外部引用css的方式，但是存在一定的区别：
- 区别1：link是xhtml标签，除了加载css外，还可以定义其他；@import属于css范畴，只能加载css
- 区别二：link引用css时，在页面载入时同时加载；@import需要页面完全载入以后加载。
- 区别三： link是xhtml标签，无兼容问题；@import是在css2提出的，低版本的浏览器不支持。
- 区别四：link支持使用javascript控制Dom去改变样式；而@import不支持。
- 补充：@import最优写法
  - @import的写法一般有下列几种：
  - @import ‘style.css’ //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
  - @import “style.css” //Windows IE4/ NS4, Macintosh IE4/NS4不识别
  - @import url(style.css) //Windows NS4, Macintosh NS4不识别
  - @import url(‘style.css’) //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
  - @import url(“style.css”) //Windows NS4, Macintosh NS4不识别
  - 由上分析知道，@import url(style.css) 和@import url(“style.css”)是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。

针对浏览器的兼容性问题你如何检测

- CrossBrowserTesting不用翻墙就可以测试，允许用户与超过100%分辨率/浏览器/操作系统组合，测试网站。还为移动网络浏览器提供重要的支持。
-  ghostLab：提供同步测试滚动，点击，重新加载等，并形成信息输入到所有的连接设备，可以测试整个用户体验，而不仅仅是一个简单的页面。

标准模式与怪异模式

各个浏览器对页面的渲染不同，甚至在同一浏览器的不同版本对页面的渲染也有所不同。要是想要写出跨浏览器的css代码，必须知道浏览器解析css代码的两种模式：标准模式与怪异模式。
- 标准模式是指，w3c标准解析执行代码；
- 怪异模式则是使用浏览器自己的方式解析执行代码，因为不同的浏览器解析执行代码的方式不一样，所以称之为怪异模式。
- 浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明有关，DTD声明定义了标准文档的类型（标准模式解析），会使浏览器使用相应的方式来加载网页并显示，忽略DTD声明，将使网页进入怪异模式。
- 如果你的网页不包含任何声明，那么浏览器就会采用怪异模式来解析，如果你的网页包含DTD声明浏览器就会按照你所声明的标准解析。
- 标准模式与怪异模式有什么不同的？
- IE6不认识！important声明，IE7，IE8，Firefox,Chrome等浏览器认识；而在怪异模式中，IE6/7/8都不认识！important声明，这只是区别的一种，还有很多其他的区别，所以，要想写出跨浏览器的css，你最好采用标准模式.

    document.compatMode=="CSS1Compat" //已经声明DTD（标准模式）
    document.compatMode=="BackCompat" //
    未声明DTD（怪异模式）
    ```
### 浏览器的兼容性问题总结
 - 事件对象
     - 标准浏览器:一般通过函数传参的形式传进什么就是什么，一般会是e
     - IE浏览器下：应该window.event
 - 事件目标对象
     - 标准下：e.target
     - IE浏览器：event.srcElement
 - 阻止默认事件
     - 标准下：e.preventDefault();
     - IE浏览器：event.returnValue=false;
 - 阻止冒泡事件
     - 标准下：e.stopPropagation();
     - IE浏览器：e.cancelBubble=true;

-2. 页面的滚动坐标
    - 正常浏览器（除了ie6/7/8）:window.pageYoffset
    - 已经声明DTD（标准模式）：document.documentElement.scrollTop
    - 未声明DTD（怪异模式）：document.body.scrollTop

因此，可以和写为：
var scrollTop=window.pageYOffset ||document.documentElement.scrollTop || document.body.scrollTop ||0;

//封装一个自己写的scroll()函数
function scroll(){
if(window.pageYoffset){
return {
left:window.pageXoffset,
top:window.pageYoffset
}
}else if(document.compatMode ==’CSS1Compat’){
return {
left:document.documentElement.scrollLeft,
top:document.documentElement.scrollTop
}
}else{
return{
left:document.body.scrollLeft,
top:document.body.scrollTop
}
}
}

““

网页的可视区宽高

 网页的可视区宽高非常常用，但是存在很大兼容性问题
1)正常浏览器（包括IE9+）：window.innerWidth
2)标准模式：document.documentElment.clientWidth
3)怪异模式：document.body.clientWidth

“`
因此可以和写为
var clientWidth=window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth||0;

- 计算后样式的获取 - 工作中经常需要获取一个元素的最终样式然而通过div.style.left只能获取得到行内样式，而样式来自内嵌或者外链的样式表我们是获取不到的，那么应该如何来计算呢？ - ie6/7/8 : 元素。currentStyle.属性名或元素。currentStyle["属性名"]
demo.currentStyle.left
或者 demo.current[“left”]；

```
- W3c：window.getComputedStyle(元素，伪元素)["属性名"]
```
window.getComputedStyle('div',null)['left'];
//一般情况下没有伪元素，我们使用null来替代。
```

- 封装getStyle方法，封装一个自己的方法来获取任意对象的计算后样式的属性，并且兼容所有的浏览器
“`
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,null)[attr];
}
}

“`

事件委托

<body>
<button id="btn">按钮</button>
</body>
</html>
<script>
    var btn = document.getElementById("btn");
    // btn.onclick = function () {
    //     alert("btn被点击了");
    // }
    // document.onclick = function () {
    //     alert("document被点击了");
    // }
    //或者利用事件委托，只要形成父子级关系，父亲绑定的事件，他的子孙后代都会触发该事件。
    //addEventListener第一个参数是一个事件类型字符串(不包含on),第二个是一个回调函数，第三个是布尔值，默认是false，如果是true，则代表先从大的范围具体的目标（捕获事件）,在从具体目标到大的范围（冒泡事件）
    //所以事件委托的事件流机制就是：捕获+冒泡
    document.addEventListener('click',function(e){
      var target= e.target;
      target.onclick=function(){
        alert('你被点击了');
      }
    },true);
</script>

qq_33309570

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端小知识

常用的浏览器内核分别是什么？1.谷歌浏览器使用的是webkit2.opera 使用的是Presto,这是目前公认网页浏览速度最快的浏览内核3.Mozilla Firefox,使用的Geckon内核4.IE 使用的是Trident;页面中引入css的方式主要有3种：行内添加style属性值，页面头部内嵌调用和外链，其中外链引用有两种：link和@import。外部引用css两种方式分别为l
复制链接

扫一扫