小谈网站建设的兼容性

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

关于浏览器

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

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

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

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

<!--[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的新标签。这是最近六个月的操作系统统计数据：

图片描述

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

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

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

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

显示分辨率

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

图片描述

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

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

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

<!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的新属性需要写很多兼容方式，想下面这种写法应该很烦了吧。

.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这样的工具，这里借助自动化方案结合它使用是很爽的。只要写标准的方式即可，其他的都交给它吧。

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

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

网站性能

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

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

小谈网站建设的兼容性

关于浏览器

文档模式

显示分辨率

css样式和Jquery

网站性能

桃源小盼聊技术

引用和评论

前端规范与思考(三)—— JavaScript规范

企业博客SEO优化：8个必备工具与资源指南