小谈网站建设的兼容性

本文属于原创文章,转载请注明–来自桃源小盼的博客

本文的兼容性包含了更多的意思,一些和网站开发注意的实际问题。对注重seo的网站帮助更多一些。

关于浏览器

现在的前端开发已经开始放弃兼容ie6,ie7,并且也在有条件的放弃ie8。像chrome这样的现代浏览器对新特性支持度都很棒,只是在某些新特性上的实现方式并不太统一。

这是百度统计最近六个月的数据,ie6和ie7合起来还是有9.03%,360是被统计到各种内核中了。

compatibility-1

而现在需要我们考虑的就是ie浏览器了。对于ie6,ie7需要去写很多hack代码,非常丑陋并且还要花费大把的时间去调试,然而现在真正使用这两个浏览器的人却是不多的,与其这样还不如把精力投入到大部分用户群体上,为他们提供更好的体验。

所以是时候放弃兼容他们了,但是我们也不能把使用这两个浏览器的用户放弃掉,所以我们应该加一些让他们更新浏览器的提示,像下面这样:

1
2
3
4
5
6
7
8
9
10
11
<!--[if lte IE 8]>
<div>
您正在使用的浏览器版本过低,无法达到最佳体验效果。建议使用以下浏览器:
<a href="http://se.360.cn" target="_blank">360浏览器</a> /
<a href="http://ie.sogou.com" target="_blank">搜狗浏览器</a> /
<a href="http://browser.qq.com" target="_blank">QQ浏览器</a>/
<a href="http://www.google.cn/intl/zh-CN/chrome/browser/desktop/index.html"
target="_blank">Chrome</a> /
<a href="http://http://www.firefox.com.cn" target="_blank">火狐浏览器</a>
</div>
<![endif]-->

之所以把喜爱的chrome放到后面,是因为既然他们正在使用低版本浏览器就并不太会使用chrome,而国产浏览器更适合大多数人使用

文档模式

ie8在win7和XP下的表现也是不同的,因为文档模式,在旧有的文档模式下,并不能正确识别HTML5的新标签。这是最近六个月的操作系统统计数据:

compatibility-2

首先在head加文档模式的选择,和浏览器内核的选择

1
2
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="renderer" content="webkit">

而xp系统下的ie8并没有edge文档模式,所以这里使用modernizr,它能让你放心使用HTML5标签,并且还能检测浏览器的能力,根据不同的能力来实现不同的东西。压缩版已经足够小了,这里把它放到头部。

1
<script src="/dep/Modernizr/modernizr.js"></script>

显示分辨率

现在屏幕的分辨率也是各种尺寸了,下面是各种分辨率的统计数据:

compatibility-3

大屏已经是趋势了,但是1024*768这个附近应该还有不少,分辨率这个问题我们不能像浏览器那样提示更换显示器吧,毕竟有不小成本,所以还是要借助代码来实现响应式,对于比较复杂的网页实现1200px和1000px就可以了,因为桌面端的网站并不适合手机端,就算你使用响应式,也存在很多其他问题。尤其ie8并不能识别@media语法,所以要借助Respond.js

1
2
3
<!--[if lt IE 9]>
<script src="/dep/respond/dest/respond.min.js"></script>
<!--<![endif]-->

到这里我们的头部看起来是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>网站建设</title>
<meta name="keywords" content="" />
<meta name="description" content="">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

<link rel="stylesheet" href="/static/main.css">
<script src="/dep/Modernizr/modernizr.js"></script>
<!--[if lt IE 9]>
<script src="/dep/respond/dest/respond.min.js"></script>
<!--<![endif]-->
</head>
<body>
<!--[if lte IE 8]>
<div>
您正在使用的浏览器版本过低,无法达到最佳体验效果。建议使用以下浏览器:
<a href="http://se.360.cn" target="_blank">360浏览器</a> /
<a href="http://ie.sogou.com" target="_blank">搜狗浏览器</a> /
<a href="http://browser.qq.com" target="_blank">QQ浏览器</a>/
<a href="http://www.google.cn/intl/zh-CN/chrome/browser/desktop/index.html"
target="_blank">Chrome</a> /
<a href="http://http://www.firefox.com.cn" target="_blank">火狐浏览器</a>
</div>
<![endif]-->

css样式和Jquery

现在的前端开发已经翻天覆地了,less和sass大行其道,没有使用小伙伴赶快尝试吧。css3的新属性需要写很多兼容方式,想下面这种写法应该很烦了吧。

1
2
3
4
5
6
7
8
9
.gradient{
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#000000), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
}

所以我们要感谢Autoprefixer这样的工具,这里借助自动化方案结合它使用是很爽的。只要写标准的方式即可,其他的都交给它吧。

1
2
3
.gradient{
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
}

Jquery已经快出生十年了,它就是为了解决浏览器的兼容性而生的,对于桌面端开发我们还是建议采用jquery-1.11.1这个版本。而我们也很清楚它的性能并不高,比原生的js性能最多能差出几十倍,所以我们也不一定并非要使用它,要根据自己网站的真实用户统计数据来决定未来的解决方案,不断的引导自己网站用户使用更新的浏览器,当低端浏览器的份额足够低的时候,就是你可以抛弃jquery的时候了。

网站性能

网站性能其实也能和兼容性搭上个边,服务器开启gzip,前端压缩合并各种静态资源,一方面减轻了整个网站的大小,同时也能减轻http的请求数量,而这对于性能不够好的浏览器能更好的减轻他们的负担。

而关于这方面的东西都是需要结合自动化解决方案的,这方面的文章请看fouber老师的个人博客