布罗特的Blog

曾经在某前端开发的招聘要求中看到要知道在IE6.0、IE7.0、IE8.0、Firefox1.5+、Opera下css的不同表现，浏览器兼容性自己也不是很清楚，总是碰到问题了去google，或者用hack，还是慢慢记录下来一点，免得忘记。 Read more...

仅仅改了颜色和宽度，模仿成早期FB的型。CSS调整宽度完全是个体力活，只改了些常用的页面，很多还没有测试过。使用方法：Firefox+Stylish,添加kaixin_blue_style到Stylish。

图中Dreamweaver CS4中正在编辑的网页其实是一个Spry的例子，利用HtmlDataSet从静态页面中获取数据然后填充到Spry区域中，实现简单的ajax效果。Spry这个框架发展到现在已经不再像cs3刚出来时简单的选项卡下拉，它的include目录就有35个js文件，涵盖HTML,XML,JSON,DOM,Effects等等方面，这都是Adobe公司以及开发者的努力完成的，而这个还处在Labs中的产品还在开发之中，最新版本1.6.1。

上面的例子在Adobe的官方文档页可以找到详细的说明，具体是怎样实现最终的效果都有介绍。而我所关注的是范例是否与web标准冲突，考虑用户是否禁用js，是否禁用css，在各种情况下用户能不能看到最重要的内容。这个例子做的比较好，唯一有点不完美的就是HTML中掺杂了Spry数据代码，当用户禁用了js的时候，虽然可以看到默认的内容，但是多除了那些代码，可能会造成困扰。如果用js来生成可以更好，不过那又是一项繁复的工作了。

HP Mini 产品页中有一个功能，产品图中有4个热点，鼠标划过时可以显示说明文字，在firefox下很完美，不过在IE里有些瑕疵，鼠标划过时出现说明框，一开始还有残留的背景图片一角。搜索到淘宝UED上的一篇文章：IE6 中 a:hover 的bug 尝试修改了一下css，position:static解决了问题。效果页:IE6鼠标划过有残影版本 修正后的完美版本。PS:2个页面在Firefox里一样，在IE6里不同。

当然，也可以把strong的绝对坐标移到a之外也可以不出现残留，不过这里主要是考虑解决问题的方法。HP的这种嵌套形式值得借鉴,外层div相对，然后4个span绝对通过ID来确定不同位置,span里面a默认不设position，a:hover才相对span定位,最终strong默认不显示，移过a时才设定为绝对，同时都是对应各自的a,用得及其灵活，不过把热点做到背景图里后期修改就要麻烦设计师了，不过为了实现透明还是有必要的，采用png或者透明gif为background可能会需要多做点功夫。

Gmail Redesigned (via Stylish) 大幅改善了Gmail的视觉体验，就靠一个界面就能让人使用Gmail。严重期待Google Reader Redesigned和Google Docs Redesigned.

在经过我修改模板，CSS，和功能后，用YSlow测试打开首页得分已经可以达到93分了。除了Use a CDN是F级，Make JavaScript and CSS External是n/a外，其他11项全部是A。要说是怎么做的，就是根据Yahoo的14条规则去进行优化，有些技术是以前听过的，有的则没接触过，不过凡事都是慢慢摸索出来的。Yahoo还提供了YSlow这样方便的插件，对于Web Developr来说真是一款利器，不管是自己的Blog,还是工作中碰到提高速度的问题，都可以进行应用。 Read more...