再来两款多浏览器兼容测试的软件
上篇文章"细数那些多浏览器兼容测试方法",还没看过的朋友可以去看看.介绍了一些进行多浏览器兼容测试的常用小软件.
这次再介绍两款多浏览器兼容测试的软件.出自两巨头,微软跟adobe.
先说adobe的BrowserLab,大概是年前,我用过一次,是基于flash的web应用,感觉还可以.官方地址是http://browserlab.adobe.com,需要注册账号才可以使用.目前还没有中文版.
大公司出品,的确不同凡响.能测试的浏览器种类虽然不全,但是考虑到了苹果系统.
chrome3/win
firefox2,3/os x/win
firefox3.6/os x/win
ie6,7,8/win
safari3,4/os x
再说说微软出品的SuperPreview,跟adobe的不同,这款软件是基于客户端的,集成在微软的expression套件里面.本地化操作的确方便不少,但支持的浏览器就少很多了.只有ie678与firefox3 3.5 3.6.我电脑上expression web3下的superpreview虽然可以看到ff但无法使用.看微软的帮助,说是需要web3的sp2补丁.而且要制定各个版本的安装路径.哎....
细数那些多浏览器兼容测试方法
记得以前做div布局的时候,调试很简单,看看ie,看看ff就可以了.
可如今,要顾及的浏览器太多了,光ie家族就6 7 8 9,firefox下有2 3 3.5，还要顾及safari,opera,chrome等等...不过还好,从内核看,种类并不多.挨个测就好了.
入正题
做浏览器兼容测试,必定就要蹂躏一番自己的爱机,装上一堆浏览器,不同浏览器还好说,相同浏览器不同版本就不好安装了.这里就细数一下搞一堆浏览器的方法跟软件.
前几个是ie个版本共存的解决方案,后面的就牵扯多浏览器了.
IE7-Standalone
这应该算是我最早用的一个东西,老外搞得,系统默认ie6，然后把这东西放到ie7的安装包里,批处理启动ie7。使得ie67共存.不过这东西已经成为历史了.
multiple-ie
然后就应该是这个了.从ie3到ie6,一股脑的都给你安装上.不过实际用处不大,部分浏览器调试的时候有问题,特别是js调试.
ieTester
然后就是这个了,到现在也一直在用,但这东西还是不那么靠谱那.目前发现的问题就是建立ie7页面一段时间后就会崩溃.还有ie6渲染与真正xp下的ie6渲染还是有些区别.
IE Developer Toolbar
捎带提一下这个东西,也是我一直在用的工具,ie6/7要手动安装,ie8默认集成,叫开发人员工具,F12呼出.它可以修改浏览器渲染模式.调试ie7/8之间的问题用它就ok.
Spoon Browser Sandbox
今儿刚发现的东西,基于web的,只能用与ms系统,而且似乎只能用ie启动.需要安装一个spoon的插件.可以启动ie6 7 8, firefox2 3 3.5, safari 3 4, chrome, opera似乎很强大,稍微测试了一下,不晓得为啥打不开ie7。地址:http://spoon.net/browsers/
我见过以及用过的都在上面了.各有千秋.没有百分百好用的.也没必要完美.看项目需求.如果项目没有啥明确要求,我就仅仅在ie678，ff跟chrome上测一下.无大碍就可以了,至于那些1px2px的小细节,从项目本身的成本跟时间上看.几乎都被我忽略了.
css布局之网页栅格化
用css已经好多年了.一直在排版,却从未关注过网页栅格化.
现在最关注的栅格化应该就属960gs了.老早就接触过.但从未应用过...
网上关于栅格化布局的文章一把一把的..我就不叨叨了..
记录一下公式与常见的几种规格.
W=N*C-g
* W总宽
* N单元列个数
* C单元列宽
* g边宽
暂时这么理解这些字母
常见的几种规格如下
950=12*80-10
950=16*60-10
950=24*40-10
栅格系统具有以下优势：
能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节约不少成本。
基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。
对于设计师们来说，灵活地运用栅格系统，能做出很多优秀和独特的设计。（详见《超越CSS》一书）
对于大型网站来说，我相信栅格化将是一种潮流和趋势。
html5的时代即将到来!
这两天工作轻松了不少.于是就把大部分时间用到翻看rss订阅跟学习上了.花了一天时间看了看html5，两天时间重温了一下axure.
最近互联网前端最热门的话题莫过于html5了.有好有坏.说啥的都有.
平时一向很少关注这个东西.虽然ie9已经出来了,但在中国,ie6用户还占70%+.所以根本没必要这么早的接触hmtl5。无意间发现百度与谷歌的声明都换成了html5的声明.不少前端的高手也都做过一个两个基于html5的项目了.
生活上总是跟社会脱节.工作上就不能再脱节了.否则真的成为废人了.粗略的过了一遍html5。标签部分倒是没多多少东西,仅仅是添加了点富媒体标签,这东西不用记,先用先查,熟悉几次就记住了.属性也没加多少,不过都挺有意思,像是是否可以移动draggable,是否可以编辑contenteditable等等.倒是增加了不少JavaScript API,要记住这些估计还要有段时间.再就是增加了本地数据库.新玩意.目前还不晓得有多强大..
目前虽然是还没有几个浏览器完全支持html5，但百度google这种访问量巨大的网站都敢用html5声明.那就应该不存在啥兼容性问题.只要暂时不用新标签新属性就是啦..慢慢往html5上过度~
利用css表达式expression等比例缩小过大图片.
先说说css表达式.说简单点就是动态设置css属性的一个东西,再简单说就是在css里写js.
其实css表达式还是蛮有意思的..可以在js里定义函数,然后在css里调用此函数.
很强大.也很危险.
据说相当吃性能,很容易内存泄露.所以不推荐使用.
而且仅有微软家的IE浏览器支持...而且是IE8-..从ie5开始支持到ie7结束.ie8放弃了这个东西.
不过还是有人用那..比如淘宝前端的某MM07年发表于蓝色的<<一行代码解决网站防挂IFRAME木马方案>>就是用的css表达式.
今儿在这记录一下用css表达式expression等比例缩小过大的图片..
这个效果一般在做文章正文模板的时候常用到.直接上片段
.img {MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}
前端工程师的尴尬处境
前端的尴尬...最近好几个blog都看到...俺也转过来玩玩...
现在的确有这样的问题..
A: 某小白MM，B: 后端程序员，C: 美工，D: 前端
A: 哎～D，你是做什么的呀？
D: 前端啊。
A: 前端是干什么的？
D: 前端… 前端就是做网站的。
A: 唉？我看网站不是 B 写出来的嘛，也没见你整天写代码呀？
D: 额… 我是做网站外观…
A: 唉？外观不是 C 画出来的吗？也没见你整天开 PS 呀？
D: （汗）我的工作就是把他俩的活儿结合起来…
A: [斜视] 唔，就这么轻松的工作嘛，什么都不用你干。
D: [内牛成河]