资讯专栏INFORMATION COLUMN

小谈网站建设的兼容性

soasme / 1855人阅读

摘要:本文的兼容性包含了更多的意思,一些和网站开发注意的实际问题。已经快出生十年了,它就是为了解决浏览器的兼容性而生的,对于桌面端开发我们还是建议采用这个版本。

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

关于浏览器

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

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

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

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



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

文档模式

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

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



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


显示分辨率

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

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


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




    
    
    网站建设
    
    
    
    
    

    
    
    


    
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老师的个人博客

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/9009.html

相关文章

  • php global 全局变量小谈

    摘要:的全局变量看起来很好用,但稍有不慎,很容易被套住。比如如果一个简单的配置文件如下当我们想要使用这个的时候,都知道使用就行了。没错,这样可以。 php 的全局变量看起来很好用,但稍有不慎,很容易被套住。 比如: 如果一个简单的php配置文件如下: $name=Yi_Zhi_Yu; 当我们想要使用这个$name的时候,都知道使用include就行了。没错,这样可以。但假如我想把这个$nam...

    Lionad-Morotar 评论0 收藏0
  • #yyds干货盘点#小谈startup类ConfigureServices方法作用

    摘要:依赖注入在应用程序启动时提供服务。我们可以通过在类的构造方法或方法中包含适当的接口作为参数来请求这些服务。方法只能接受参数,但是可以从这个集合中检索任何已注册的服务,因此不需要额外参数。使用在启动方法中提供需要的任何服务。 这个是我在面试中遇到的一道面试题,记录下来分享给大家。 简单说ConfigureServices是配...

    不知名网友 评论0 收藏0
  • python classmethod 与 staticmethod 小谈

    摘要:而类的实例并不会影响类的静态变量,只是会修改对象实例本身的值,所以后面两个的结果总是同样,如果我们使用和结果也将仅仅是静态变量变化后的结果,与类的实例无关以上是对和的暂时做的了解的总结,如有纰漏,请及时指正 概念 python 的classmethod 与staticmethod 这两个有什么区别? 二者又有什么联系?在google和baidu之后, 得到的大致的联系就是二者都是对类的...

    keke 评论0 收藏0
  • workerman / 小谈PHP中几种运行模式

    摘要:话说当下一共有种运行模式,分别是和模块模式。使用,全称进程管理器进行管理。工作原理启动时载入进程管理器进程管理器自身初始化,启动多个解释器进程并等待来自的连接当客户端请求到达时,进程管理器选择并连接到一个解释器。 我们知道 workerman 程序需要在php-cli模式下运行,也就是命令行模式,这块我们有必要了解一下。 话说PHP当下一共有4种运行模式,分别是CGI、FastCGI、...

    darkbaby123 评论0 收藏0
  • 小谈日志与其实践

    摘要:对于日志级别的分类,有以下参考表示需要立即被处理的系统级错误。注意日志的切片设置,以免文件过大不方便操作。过期的日志定期清理。 本文首发于泊浮目的专栏:https://segmentfault.com/blog... 前言 前阵子在论坛上看到一个问题,大致的意思就是日志该怎么打?或者说是,我们应该在日志中打印出哪些内容? 看了该问题,笔者真是有所感慨:从实习到现在,从接的外包小项目到...

    lidashuang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<