YY in Limbo 混沌海狂想 » CSS

HTML5, CSS3, ES5…新的web标准和浏览器支持一览

Dexter.Yy — Mon, 29 Jun 2009 00:40:26 +0000

好罢这篇本来是我私下做的笔记，我特别喜欢在Evernote上做备忘的笔记，虽然上次看到漏屋老师的文章里说我现在的年龄才刚刚进入记忆力的巅峰期……但是我的自信心仍然屡受打击！比如跟别人讨论The Dark Knight里小丑在医院对检察官说了什么让他变成双面人，我一句对白都想不起来，还有big bang theory s2里penny玩age of conan时的人物名字是”Queen Penelope”，我看的时候印象很深，一个月后就连奥德赛都想不起来了。留份笔记总觉得心里踏实些……啊又跑题了

本文整理了一些最重要（或者说人气比较高罢）的新标准，虽然它们多数还只是w3c的草案，离Recommendation级别还早，却已经成为新一轮浏览器大战中备受追捧的明星，开发者社区里也涌现出大量相关的demo和API封装，有些已经进入生产环境（比如google在iphone上实现的gmail离线应用），其实我觉得如今的web领域里，从厂商私有技术转换成委员会标准再转换成通用技术产生杀手级应用的周期已经显著的加速了，是因为现在web application的需求太高了么…… UPDATE：刚才在solidot发软文的时候我突然想明白怎么表述这个问题：其实现在很多浏览器厂商同时也是基于浏览器的应用开发者和web标准的制定者，就好像修筑舞台的工程师同时也是舞台上的演员和舞蹈动作的导演一样，所以google, mozilla, apple们都在不遗余力的实现那些有利于开发web应用的技术标准，即时它们还是W3C Working Draft，相比之下IE team就比较缺乏动力，果然计划经济缺乏活力亚XD……

由于是源自笔记，对每个条目我只会列出称呼和语法特征，暂时没时间写详细的解释和可执行的示例，但是会给出相关的文档地址，除了列出已经支持该特性的浏览器，也会为不支持的浏览器提供替代/过渡的实现。

===================废话结束的分割线=======================

CSS3 Media queries

对整个外链css文件和部分css代码使用的媒体类型侦测，人气高的原因显然是因为移动设备……

<link media=“all and (orientation:portrait)” src="screen.css" type="text/css">

@media all and (min-color: 4) { ... }

w3c标准：http://www.w3.org/TR/css3-mediaqueries/
MDC文档：https://developer.mozilla.org/En/CSS/Media_queries
Opera文档：http://www.opera.com/docs/specs/css/

支持：Firefox 3.5+, Safari 3+, Opera 7+

CSS3 2D Transforms

css变形，有人用这个实现伪3d效果以及旋转效果的jquery插件

-moz-transform: rotate(-45deg) skew(15deg, 15deg);

sprite.style['-webkit-transform'] = 'rotate(' + v + 'rad)';

w3c标准：http://www.w3.org/TR/css3-2d-transforms/
MDC文档：https://developer.mozilla.org/En/CSS/CSS_transform_functions
webkit博客的介绍: http://webkit.org/blog/130/css-transforms/

支持：Firefox 3.5+, Safari 3.1+
替代/过渡：IE5.5+ Matrix Filter http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx

CSS3 Transitions and CSS Animations

备受期待的css动画，webkit团队提出的草案，transition实现简单的属性渐变，animation定义更复杂的动画效果

transition-property: width;
transition-duration: 1s;
animation-name: 'diagonal-slide';
animation-duration: 5s;
animation-iteration-count: 10;
@keyframes 'diagonal-slide' {}

w3c标准：http://www.w3.org/TR/css3-transitions/
w3c标准：http://www.w3.org/TR/css3-animations/
webkit博客的介绍：http://webkit.org/blog/138/css-animation/
约翰同学的介绍：http://ejohn.org/blog/css-animations-and-javascript/

支持：Safari 3.1+

CSS3 Downloadable fonts

能在网页里嵌入任意字体是设计师的梦想……不过这里支持的也仅限truetype和opentype

@font-face {}

w3c标准：http://www.w3.org/TR/css3-fonts/#font-resources
MSDN文档：http://msdn.microsoft.com/en-us/library/ms530303(VS.85).aspx
MDC文档：https://developer.mozilla.org/en/CSS/@font-face

支持：Firefox 3.5+, Safari 3.1+, Opera 10.0+, IE4.0+

附赠：其他CSS3 property的兼容性

ppk同学维护的文档: http://www.quirksmode.org/css/contents.html
css3.info维护的文档：http://www.css3.info/modules/selector-compat/
一个测试页面：http://westciv.com/iphonetests/

HTML5 DOM Storage

简洁的持久存储，键值对的形式

window.localStorage
window.sessionStorage //可跨域，标签页关掉就清空

w3c标准：http://www.w3.org/TR/webstorage/
ppk同学维护的兼容性列表：http://www.quirksmode.org/dom/html5.html#localstorage
MDC文档：https://developer.mozilla.org/en/DOM/Storage
MSDN文档：http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx

支持：Firefox 3.5+, Safari 4.0+, IE 8.0+

HTML5 Offline Application Cache

用一个manifest文件缓存静态资源（图片,css, js之类）在离线状态下使用，不是结构化数据

<html manifest="foo.manifest">

CACHE MANIFEST
index.html
style/default.css
images/logo.png

w3c标准：http://www.w3.org/TR/offline-webapps/#offline
MDC文档：https://developer.mozilla.org/en/Offline_resources_in_Firefox

支持：Firefox 3.5+

HTML5 Database Storage

本地数据库，支持sql，最早是google gears实现，现在的w3c草案的编辑也是google的工程师……但奇怪的是，gears的api跟现在的草案不兼容，chrome甚至为了保留捆绑的gears的数据库api而删除了webkit实现的html5 api……而google在iphone上实现gmail离线功能的时候又采用webkit的api……真纠结……

var db = window.openDatabase("notes", "", "The Example Notes App!", 1048576);
db.transaction(function(tx) {
tx.executeSql(‘SELECT * FROM Notes’, [], function(tx, rs) {});
});

w3c标准：http://www.w3.org/TR/offline-webapps/#sql
webkit博客的介绍：http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/
iphone的文档：http://developer.apple.com/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html#//apple_ref/doc/uid/TP40007256-CH3-SW1

支持：Safari 3.1+
替代/过渡：Gears http://code.google.com/p/gears/wiki/Database2API

HTML5 Web Workers

多线程，在后台执行复杂运算，不能操作dom，线程之间通过消息事件通信

var myWorker = new Worker('my_worker.js');
myWorker.onmessage = function(event) { event.data };
myWorker.postMessage(str);

w3c标准：http://www.w3.org/TR/workers/
MDC文档：https://developer.mozilla.org/En/Using_web_workers

支持：Firefox 3.5+
替代/过渡：Gears http://code.google.com/p/gears/wiki/HTML5WorkerProposal

HTML5 Geolocation

地理api

window.navigator.geolocation

w3c标准：http://www.w3.org/TR/geolocation-API/
MDC文档：https://developer.mozilla.org/En/Using_geolocation

支持：Firefox 3.5+
替代/过渡：Gears http://code.google.com/p/gears/wiki/GeolocationAPI

HTML5 Drag and Drop

原生拖拽事件

ondragstart
ondrag
ondragend
//拖拽过程中
ondragenter
ondragover
ondragleave
ondrop

w3c标准：http://www.w3.org/TR/html5/editing.html#dnd
MDC文档：https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
apple文档：http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html#//apple_ref/doc/uid/30001233

支持：Firefox 3.5+, Safari 2.0+, Chrome 1.0+, IE 5.0+

HTML5 Audio and Video

用html标签来嵌入视频音频的好处并非是“开源格式”，而是“开放性”，让多媒体可以与其他页面元素交互，或者用页面技术去跟视频“mashup”，这种随意组合和交互的能力是web技术兴盛的基石，也是像flash这类封闭RIA容器最大的缺点。

<video controls>
<source src=“zombie.ogg” type=“video/ogg”/>
<source src=“zombie.mp4″ type=“video/mp4″/>
video>

MDC文档：https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
webkit博客的介绍：http://webkit.org/blog/140/html5-media-support/

支持：Firefox 3.5+, Safari 3.0+, Chrome 3.0+
替代/过渡：用video标签嵌套embed http://hacks.mozilla.org/2009/06/html5-video-fallbacks-markup/

HTML5 Canvas

apple发明，最早应用于dashboard，目前主流的js图像技术，mozilla已经在实现OpenGL ES标准的Canvas 3D了，另外据说ie team为支持canvas做了大量工作……实际上canvas api相当底层，特别是交互方面，不如svg直观，所以出现了很多封装它的库

var ctx = $('#canvas')[0].getContext("2d");
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(220, 220, 50, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

MDC文档：https://developer.mozilla.org/en/Canvas_tutorial

支持：Firefox 1.5+, Safari 2.0+, Chrome 1.0+, Opera 9.0+
替代/过渡：excanvas.js http://code.google.com/p/explorercanvas/

SVG

w3c标准：http://www.w3.org/TR/SVG12/
IBM DW教程：http://www.ibm.com/developerworks/cn/views/xml/tutorials.jsp?cv_doc_id=84896

支持：Firefox 1.5+, Safari 3.0+, Chrome 1.0+, Opera 9.0+
替代/过渡：raphael.js http://raphaeljs.com/

XMLHttpRequest 2

主要是增加跨域能力以及请求过程中的事件

w3c标准：http://www.w3.org/TR/XMLHttpRequest2/
MDC文档：https://developer.mozilla.org/En/Using_XMLHttpRequest#Monitoring_progress
XDomainRequest (XDR)
MSDN文档：http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx

支持：Firefox 3.5+（实现了部分）, IE 8.0+（实现了部分）

Access Control

千呼万唤的跨域访问控制，目前firefox3.5和ie8有一些不同，ie8搞的XDR和XDM我也不知道是不是准备提交给w3c标准化的东西……

Access-Control-Allow-Origin: http://foo.example

w3c标准：http://www.w3.org/TR/cors/
MDC文档：https://developer.mozilla.org/En/HTTP_Access_Control
Cross-document Messaging (XDM)
MSDN文档：http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx

支持：Firefox 3.5+, IE8.0+

E4X (ECMA-357)

Firefox和ActionScript3早就实现了的东西……不过其实现在json这么流行，有没有E4X好像都无所谓了～（瞎说的，其实在js代码里直接写dom对象而不是html字符串，会方便很多）

MDC文档：https://developer.mozilla.org/en/E4X

支持：Firefox 1.5+

ECMAScript 5 Native JSON

原生的JSON支持，速度和安全性都比eval强一百倍亚一百倍，另外要注意Douglas Crockford的json2.js是一个用js实现的js解释器，所以安全性更好

JSON.parse( text, translate )
JSON.stringify( obj, translate )
String.prototype.toJSON
Boolean.prototype.toJSON
Number.prototype.toJSON
Date.prototype.toJSON

MDC文档：http://blog.mozilla.com/webdev/2009/02/12/native-json-in-firefox-31/
MSDN文档：http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx

支持：Firefox 3.5+, IE8+
替代/过渡：json2.js http://www.json.org/json2.js

ECMAScript 5 Array Extras

js1.6里实现的数组方法，主要是forEach, map, fliter这几个函数式编程里非常重要的方法，还有反向查询

Array.prototype.indexOf( str )
Array.prototype.lastIndexOf( str )
Array.prototype.every( fn )
Array.prototype.some( fn )
Array.prototype.filter( fn )
Array.prototype.forEach( fn )
Array.prototype.map( fn )

MDC文档：https://developer.mozilla.org/en/New_in_JavaScript_1.6#Array_extras

支持：Firefox2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
替代/过渡：都可以通过扩展Array.prototype来模拟

ECMAScript 5 isArray()

区分数组和对象

Array.isArray([]); // true

支持：无
替代/过渡：Array.isArray = function(a){ return Object.prototype.toString.call(a) === “[object Array]“;};

ECMAScript 5 Object

用GOOGLE I/O演讲里的话来说：更鲁棒(robust)的对象系统

Object.getPrototypeOf( obj )

约翰同学的讲解：http://ejohn.org/blog/objectgetprototypeof/

支持：Firefox3.5
替代/过渡：object.__proto__ 或 object.constructor.prototype

Object.create( proto, props ) //克隆或继承对象
Object.keys( obj ) //数据结构的映射
Object.getOwnPropertyNames( obj )
Object.preventExtensions( obj ) //不能添加新属性
Object.isExtensible( obj )
Object.seal( obj ) //不能删除和修改属性的配置，不能添加新属性
Object.isSealed( obj )
Object.freeze( obj ) //不能删除和修改属性的配置，不能添加新属性，不能写属性
Object.isFrozen( obj )

约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-objects-and-properties/

支持：无
替代/过渡：Object.create和Object.keys可以自己实现

ECMAScript 5 Property Descriptor

对象属性的访问控制

Object.getOwnPropertyDescriptor( obj, prop )
Object.defineProperty( obj, prop, desc )
Object.defineProperties( obj, props )
desc = {
value: true,
writable: false, //修改
enumerable: true, //for in
configurable: true, //删除和修改属性
get: function(){ return name; },
set: function(value){ name = value; }
}

约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-objects-and-properties/

支持：无
替代/过渡：Object.defineProperties其实相当于jQuery.extend，用来实现Mixin

ECMAScript 5 Getters and Setters

python和ruby里都有的属性访问方法

obj = {
get innerHTML() { return …; },
set innerHTML(newHTML) { … }
};

MDC文档：https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters

支持：Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
替代/过渡：

非标准，Firefox1.5里的旧方法

HTMLElement.prototype.__defineGetter__("innerHTML", function () {});
HTMLElement.prototype.__defineSetter__("innerHTML", function (val) {});

支持：Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+

标准

Object.defineProperty(document.body, "innerHTML", { get : function () {} });

MSDN文档：http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx

支持：IE8+ (只能对DOM使用)

ECMAScript 5 Strict Mode

ES5的严格模式，删除了旧版本中容易引起问题的元素，并且会显式的报错，方便调试

"use strict"; //以下情况下抛出异常
//对未定义的变量赋值
//操作被设置为不可写，不可配置或不可扩充的属性
//删除变量，函数，参数
//在对象直接量里重复定义属性
//eval做关键字，在eval的字符串里定义变量
//覆写arguments
//使用arguments.caller和arguments.callee（匿名函数必须具名才能引用自己）
//(function(){ ... }).call( null ); // Exception
//使用with

约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

支持：无
替代/过渡：……从现在开始养成严谨的编程习惯

ECMAScript 5 其他新特性

传递函数的引用时，绑定this

Function.prototype.bind(thisArg, arg1, arg2....) /

支持：无
替代/过渡：prototype http://www.prototypejs.org/api/function/bind

ISO-formatted dates

Date.prototype.toISOString() // Prints 2009-05-21T16:06:05.000TZ

支持：无
替代/过渡：datejs http://code.google.com/p/datejs/

String.prototype.trim()

支持：Firefox3.5
替代/过渡：各种正则实现 http://blog.stevenlevithan.com/archives/faster-trim-javascript

===================废话又开始的分割线=======================

其实我把这个东西发出来是希望能促进创新的氛围，让更多人认识到很多新技术已经进入到“实用”阶段。

如果只是想做个实验性的webgame，或是只能用于特定平台的应用（比如iphone，greasemonkey），firefox3.5+webkit的支持就已经足够罢。

如果不能无视主流平台，有很多技术能让你gracefully degrade（优雅的退化）或者选取不同的方法实现兼容的接口。

如果你等不及IE x在若干年后实现xx，希望提前享受福利，有些技术的设计原则就是让你能在没有native支持的情况下可以自己实现一模一样的功能或语法糖（syntactic sugar），比如ES5对象的继承和访问控制，从ES4/ActionScript3时期那些老土的关键词（class extands private static）改成了Object.create(p, attrs).defineProperty(o, n, attrs).defineProperties(o, attrs).freeze().getOwnPropertyNames().map(fn)，不会只是为了酷炫罢……

很多人都喜欢抱怨“我这辈子都没机会用HTML5”，但是只要把视线从自己脚下那巴掌大块地移开看看别处，会发现世界其实一直都在改变喔XD

新项目”YyOPML”——把OPML转换成web界面——大家一起来晒feed订阅列表吧！

Dexter.Yy — Fri, 30 May 2008 17:28:30 +0000

首先要说一下目前的矛盾现状：一方面feed订阅和在线阅读器都还不够普及，多数普通网民就算经常访问blog网站，也还没养成订阅的习惯，主要还是通过门户媒体获取资讯，另一个方面，较早开始接触RSS订阅的人——特别是那些blogger和互联网geek们——不但已经对各种在线或离线的阅读器了如指掌，把阅读feed变成了上网的主要活动和习惯，而且很多人收集的feed已经多到让自己烦恼焦虑的程度。后者努力的整理删减自己的订阅列表，前者却经常抱怨不知道怎么寻找可订阅的信息来源…………这种不平衡于是引发了一种禁断的活动——朋友之间交换OPML订阅列表……

OPML是Google Reader乃至所有阅读器都支持导入导出的一种XML规范的“大纲(outline)”数据文件（题头图片里那个蓝色的方块就是OPML的标志，跟feed的著名橙色标志对应，说实话写文前我还不知道OPML也有标志……囧），通常包含用户订阅的所有feed，之所以说是“禁断”……是因为交换这种文件，直接导入到双方的阅读器里之后，很容易使信息爆炸的程度翻倍，而且对于这些导入的feed，不能像原主人那样清楚来历和订阅的理由，于是也不知道该如何看……因此直接交换的下场通常都很惨……

这个项目就是我的解决方案：让导出的OPML源文件支持直接在浏览器里作为网页来展示，而界面上使用完全展开的并排布局，可以像hao123或谷歌网站导航那样一目了然的查找网址，让访问者自己来挑选值得订阅的feed。(不过，你要有使用标签分类feed的习惯，否则显示效果肯定不好…不过那样的话，就算用常规的树状布局，效果也很差的…)

以下是示例页面，这里的“dexteryy.xml”就是我从自己的google reader里导出的OPML文件，包含完整的订阅列表：

http://www.limboy.com/yyopml/dexteryy.xml

还有谁像我一样没什么隐私担心暴露愿意分享OPML的话，可以留下网址或opml文件，我会收集到上面来……

项目主页：http://code.google.com/p/yyopml/

下载程序源码：http://code.google.com/p/yyopml/downloads/list

使用方法是：用文本编辑器打开OPML文件，在第一行后面加上以下内容：

xml-stylesheet href="style/yyopml.xsl" type="text/xsl"?>

然后跟解压出来的style目录一起传到服务器上，保持在同一个目录里，就可以直接用浏览器看opml文件了。

目前我提供的界面主题有两种，都是如上所说的“网站导航”风格，一个是灰色的面板风格（默认），一个是GOOGLE风格，对应的CSS文件分别是style/ui/yyopml_panel.css和style/ui/yyopml_google.css

支持在页面里切换皮肤，如果要更换默认皮肤，请修改style/ui/yyopml.js里的以下代码：

theme = theme || "panel";

把“panel”换成你要改成默认设置的css文件的后缀，比如”google”。

也可以在网址里加上参数，直接调用某种皮肤，比如”http://www.limboy.com/yyopml/dexteryy.xml#theme=google“，可以用google风格作为默认皮肤打开页面。

==================面向Coder的分界线====================

源码包括一个用来把XML转换成HTML来显示的XSL文件，和界面效果相关的文件。其中yy_core.js是我开发中的一个轻量级/FP风格的javascript库，很多代码都基于jquery，同名的方法接口也尽量跟jquery保持一致，命名空间跟土豆网的js库一样叫“TUI”，提供DOM选择器（我重写的精简功能）和一些常用工具，比jquery小很多(压缩后12k)，这个东西其实年初就想发出来……但是后来懒了，这次考虑到完成度的问题，也懒得在google code里开项目了，源码包里的yy_core.js是一个base64压缩过的版本……

另外，yyopml.js里有一个滚动条插件，是做这个项目的时候心血来潮写的，可以用类似这样的代码：$(“.list”).scrollbar(); 给那些外部容器overflow:hidden，内部容器高度超长的元素加上CSS定义的滚动条，支持鼠标滚轮，因为是基于“迷你jquery”来开发，所以应该很容易改成jquery的插件，厌倦了overflow:scroll滚动条的同学可以参考一下。

iPhone App开发笔记

Dexter.Yy — Fri, 07 Mar 2008 19:04:13 +0000

第一，标题里的app指的是根正苗红老实本分的Web App，昨天的这个时候，对是在昨天，iPhone Web App就等同于iPhone App，咳咳，虽然现在不是了，但我这笔记是两个星期前的……

第二，不全，主要是我关心的一些细节，以及我自己理解的一些东西……

————————————懒得想小标题的分界线————————————

html里可以调用系统接口，比如电话拨号：

<a href="tel:1-408-555-5555">1-408-555-5555a>

还有mail和google map的接口……

————————————懒得想小标题的分界线————————————

在js里嗅探iphone的safari环境，要注意agent字符串里有额外两处：

“Mobile/1A543″，这个是iphone OS的操作系统版本（注意不是固件版本）
“iPhone”，这个是移动平台的类型，如果是ipod touch的话这里会是“ipod”

此外：

“version/3.0″，Safari的市场版本号
“Safari/419.3″，这个是build版本，虽然iphone跟osx一样都是safari3.0，但build版本号不同

完整的例子：

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like
Gecko) Version/3.0 Mobile/1A543 Safari/419.3

————————————懒得想小标题的分界线————————————

调用css的时候，media类型支持CSS3，比如可以用“only”来屏蔽旧浏览器，用“(min-device-width: 481px)”屏蔽小屏幕手机。由于iphone里的safari不支持print和handheld的media类型，可以用它们来对iphone屏蔽一些css文件。
示例：

<link media="only screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet" >

也可以作为css选择器里，比如

@media screen {
#text { color: white; background-color: black; }
}

由于safari支持css3，你还可以享受到的福利包括在background里放6张图片做圆角，给文本加阴影，使用属性选择器之类……

————————————懒得想小标题的分界线————————————

iphone的浏览器里有一个很重要的概念是viewport（视区），系统默认的viewport为980像素，可以用meta标签指定，宽度范围从200到10,000，高度范围从223到10,000，还可以使用user-scalable禁止用户缩放页面（常见的iphone web应用，比如facebook,google reader，因为要仿原生界面，都是这样设置的），minimum-scale和maximum-scale可以设置缩放的限制，initial-scale是默认的缩放程度，范围从>0到10
示例：

<meta name="viewport" content="width = 320" />
<meta name="viewport" content="initial-scale=2.3, user-scalable=no" />

iphone默认的浏览器窗口尺寸是: 竖向（body[orient="profile"]）为宽320px，高356px，横向（body[orient="landscape"]）为宽208px，高480px，但实际上这是显示了浏览器地址栏之后剩余的空间，往下拖动页面时，地址栏会隐藏，所以实际的viewport（竖向）是宽320px，高416px。
页面加载之后可以用 window.scrollTo(0, 1) 隐藏地址栏，自动使用最大化的viewport。

关于viewport，还有一个很重要的概念是：iphone的safari浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，是根本没有这个功能。所以不但iframe, overflow:scroll的元素没有滚动条，整个窗口也没有的，iphone的safari浏览器实际上从一开始就完整显示了这个网页，然后用viewport查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport…………由此引申出的结果很多，比如CSS里的 position:fixed 无效……

————————————懒得想小标题的分界线————————————

浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样：

所有hover动作，还有mouseover，都不存在，链接上的title内容，会在你点击链接并按住不动时弹跳出来（如果你不放开手指，继续移动的话，点击事件不会发生，具体原因下面解释）…………而mouseover，直接转换成了mousedown……

点击页面元素之后发生的事情很复杂…………比如当你用单指按住可点击元素（大约就是默认为block的元素），然后放开，首先触发的event居然是mousemove！接下来如果元素内容不变（这个条件比较难理解，我知道），会陆续触发mousedown，mouseup，click，如果内容改变，就不会再触发任何事件……

如果你恰好不太走运的给网页上一些inline元素绑过js事件（这比较常见，我也知道），比如span，有一个不用修改标签的方法是给它们都加上onclick=”void(0)”，这样iphone就会认为它们是可点击的元素-_____-b

如果按住元素之后移动手指，当然就不要指望会触发mousemove了，啥事情都没有，不过停下的时候，会触发onscroll （因为你刚才移动了viewport嘛……）

如果你用两个手指做缩放的动作，啥事件都不会有啦，但是如果你用两个手指在屏幕上一起移动，而且所在的位置是一个本来有滚动条的页面元素(比如iframe罢)，会触发一个叫mousewheel的事件（但是别指望iframe本身的内容会滚动-___-b）, 停止移动时同样触发onscroll。

OK，你希望像平时那样用onmousedown,onmouseup,onmousemove来做页面元素的拖拽交互把iphone web app的界面做的像原生界面一样活蹦乱跳的梦想已经破灭了，请努力克制骂乔布斯的欲望。

对了，不用我说也应该想得到，onkeyup，e.charCode，e.keyCode这类玩意都不能用罢？

————————————懒得想小标题的分界线————————————

默认的html控件的样式大家都已经知道很cool了，不过也可以自己修改，具体内容请查看《iphone用户界面指南》的第三章：Metrics, Layout Guidelines, and Tips

iphone里的safari调整了默认的文字样式，这些调整被包括在了一个新的css属性“-webkit-text-size-adjust”里面，相当于“-webkit-text-size-adjust:auto;”，你可以覆盖它，根据需要改成none或者200%

————————————懒得想小标题的分界线————————————

web app可以像原生应用一样，在home界面里上添加一个快捷方式图标，方法是增加一个link标签：

<link rel="apple-touch-icon" href="custom_icon.png" />

这是针对单个页面的，如果你把图片命名为“apple-touch-icon.png”，放在网站的某个目录里面，该目录下所有页面都会获得添加图标的功能……

图标的要求是尺寸57×57，png格式，不用画蛇添足的去做圆角渐变或玻璃反光效果，iphone系统会把图片自动裁剪和渲染成统一的风格……

喔对了……不要高兴太早……这个快捷图标的功能，只有1.1.3或更高的固件版本才支持……考虑到国内那些买旧版本破解机器还被商家反复叮嘱不要升级的用户……呃……

————————————懒得想小标题的分界线————————————

关于网页中的媒体文件，普通图片最大支持200万像素（jpg的话，最大可以显示出3200万的，不过超过200万的jpg都会被压成缩略图），支持的最大尺寸是2 * 1024×1024，gif动画最大支持2m（否则只显示第1帧）

iphone支持的视频格式：

H.264 Baseline Profile Level 3.0 video, up to 640 x 480 at 30 fps. Note that B frames are not supported in the Baseline profile.
MPEG-4 Part 2 video (Simple Profile)
AAC-LC audio, up to 48 kHz
.mov, .mp4, .m4v, .3gp file formats

需要注意的是这里的“Baseline profile”，由于这种编码的质量跟“Extended Profile”和“main profile”相比效果比较差，目前主流的支持“高清”（h264）的视频网站，比如youtube，土豆，都没有采用Baseline profile压缩h264视频，所以iphone不但不能播放网络上流行的flv视频（因为不支持flash），连刚开始流行的h264也不能直接播放…………提供iphone应用的视频网站无法使用现有资源，不得不压缩iphone专用的视频文件，所以不要指望能立即在iphone上观看视频网站上的所有资源……T__T

由于iphone不支持flash播放器，视频文件只能直接嵌在页面里，用自带的quicktime来全屏播放，示例：

<embed src="screen.jpg" href="movie.m4v" type="video/x-m4v" target="myself" scale="1" ...>

更多细节请看官方文档：Including QuickTime In A Web Page

————————————懒得想小标题的分界线————————————

如果想全面了解iphone上的web开发，推荐阅读：

iPhone Human Interface Guidelines(官方还有一份名字类似的文档，简称OSXHIG，是界面设计者的圣经之一)

Safari Web Content Guide for iPhone

Web Page Development: Best Practices(这篇可以凑合看看，2月8号刚更新过的)

此外，ADC on iTunes里有好多iphone相关的视频，讨厌翻文档的可以去弄来看看，这可是iTunes store里少有的免费资源喔……

————————————懒得想小标题的分界线————————————

就像开头说的，这是2周前写的，一直懒得修改整齐了往blog上帖，但是昨天半夜（好罢是今天凌晨）在twitter上不小心看了iphone SDK发布的实况转播……我发现再拖延的话就只能贴到火星去了……

跟华丽的SDK相比，iphone safari上的开发环境可以说很糟糕，非常限制想象力——对javascript和RIA开发者来说，不过只要看看iphone用户上网的热情和相关数据，可以预见在很长一段时间里，iphone平台仍然会是立志开发web app的勇者们争夺的滩头阵地。

啊啊啊啊啊，2.10G的iphone_sdk.dmg终于下载完了，睡觉去……下周买《Cocoa入门–使用Objective-C》……

YY专用Wordpress主题终于完成了……

Dexter.Yy — Wed, 04 Apr 2007 07:43:53 +0000

上次Blogger被GFWED的时候，我说过坚决不转移到WORDPRESS是因为它太迎合我把东西做复杂的欲望，现在实践证明确实如此……

由于形势所迫（不仅因为GFW），我不得不放弃Blogger重新建立一个稳定的BLOG，熟悉WP的插件加上制作这个主题花了4天时间，超乎想象了……时间主要浪费在设计、浏览器兼容上面……本帖我将用来发牢骚，并且分享一些经验教训，没兴趣的同学可以跳转到其他地方去了……

页面设计在中途大幅度修改了3次，这次我想恢复到传统风格，因为如今那种简洁大字体大空白色彩明亮固定宽度居中对齐边缘有阴影的WEB2.0风格太普遍了，作为代表个人形象的BLOG，我希望有一些不同的个性，而且我虽然也喜欢“简洁”，但不喜欢“简单”。本来是想把WEB2.0的设计元素和配色与奇幻游戏元素结合在一起，但尝试过之后发现很困难，主要是配色很难，而且“留白”在WEB2.0风格里确实占很重要的地位，但在这个页面里我没办法留很多空白（何况最初就决定要做三栏布局）。与做图和配色相比，我还是更喜欢写代码，所以我懒得花更多时间来完善目前的设计了……

这个BLOG的布局可以说是实验风格的……三栏的液态布局，左栏的宽度是自适应的，还有一部分内容固定在窗口顶部，无论怎样拖滚动条，它都会随着页面移动，实际上我是受了Westeros的启发才想用这种相对窗口固定的设计，但是实现起来很麻烦（Westeros的效果其实也只支持IE7和FIREFOX，在IE6里会变得像框架布局一样），如果用JS来实现，移动就不可能是平滑的，衔接的效果不好，用CSS来实现却有很严重的缺陷，首先IE7以下版本的浏览器不支持position:fixed属性，必须用HACK来模拟，我采用的方法是用一个DIV来包含所有元素，在IE7以下版本里给它height:100%;overflow-y:auto;的属性，把顶部元素的定位改成绝对，所以IE6用户看到的右侧滚动条其实不是浏览器本身的……

由于用了两种布局方式，而液态布局的三栏里既有浮动也有非浮动，再加上中间的羊皮纸效果必须在左右边缘采用不同的背景图，很多地方的定位都要精确到像素……所以这个主题的CSS写起来很头疼，DEBUG花了很多时间，目前在opera里似乎还有一个毛病，但我一向都是歧视opera用户的（因为占有率才0.8%左右嘛），暂时懒得改了……

由于设计上的限制，有2个地方的布局不得不用JS来调整，一个是改变顶部fixed层的宽度，因为它的定位方式是fixed或absolute，无法做出液态的宽度（也就是说宽度随浏览器的大小自动填充，但是与右侧总保持固定距离），另一个是让左栏和中栏的高度相等，由于无法使用统一的背景图片，所以这里也只能用JS来调整……

我倒不在意什么“预留退路”、“无障碍”之类的JS设计观念，反正如今在WEB上混没有JS已经寸步难行了，而且我没有用JS来影响内容…………但是用JS来调整布局会遇到另一个问题，如今的JS代码都是放在window.onload里运行的，因为页面加载完成、DOM建立之前，很多方法都不能用，但问题在于，window.onload不仅要等DOM加载完，还要等图片（指img标签）加载完，我的BLOG页面里整合了很多东西，每篇文章的题图、YUPOO的相册、豆瓣的封面……如果要等这些东西都加载完才修正布局，显然是不现实的，幸好我在国外一个BLOG上找到解决办法（地址忘记了，抱歉），可以在onload事件触发之前、DOM刚加载完时就执行修正布局的函数：

// for Mozilla DOM onloaded
if (document.addEventListener)
{
document.addEventListener("DOMContentLoaded", DOMsinit, null);
}

DOMsinit就是我要执行的函数，第三个参数本来是布尔值，用来决定事件在冒泡还是捕获阶段触发，但DOM加载的事件显然没这些东西，所以必须传空值，以上是适合标准兼容浏览器的方法，对IE要用完全不同的代码（放在HTML里）：

ie_onload.js就是要执行的函数……为了IE要专门增添一个JS文件，真是麻烦……我还没搞清除defer是什么鬼东西，反正这样用就没错了……

就算你只是使用window.onload，也要考虑到：WP本身和某些插件，都可能有自己的JS函数，会用到window.onload，如果你直接写window.onload=function(){……..}，就会把其他功能覆盖掉，一定要用这类方法：

if ( typeof window.onload!='function')
{
window.onload=function()
{
yysinit(); //页面加载完成时调用的函数
}
}
else
{
var oldonload=window.onload;
window.onload=function()
{
oldonload();
yysinit(); //页面加载完成时调用的函数
}
}

本来我还希望用户在改变浏览器窗口大小后，顶部的宽度也能跟着调整（因为用CSS实现的自适应都有这种效果），所以用了window.onresize事件，但大家都知道，即使是液态布局，当窗口小于一定宽度后，布局也会乱掉，因为容器虽然可以自动变形，但内容却不会改变，浮动定位在这方面最敏感……由于我的BLOG页面里内容比较多，所以宽度不能少于900多px，在window.onresize里我也做了相应的处理，但是问题就出来了……这个该死的事件在不同浏览器里的行为不一致，在按住窗口边框——拖动——放开鼠标的操作之后，onresize在firefox里会触发1次，在IE7里会触发2次，而在IE6里……居然触发3次……结果就是：限制最小宽度的函数在IE6里会导致浏览器假死……我觉得没必要为这种BUG自找麻烦，所以把onresize改成这样了：

window.onresize=function(){
var aVersion=navigator.appVersion;
var version=parseInt(aVersion.split("MSIE")[1]);
if(document.body.offsetWidth<941)
{
if(version>=7 || aVersion.indexOf("MSIE")==-1)getid('outwrapper').style.width="942px";
}
else
{
if(version>=7 || aVersion.indexOf("MSIE")==-1)getid('outwrapper').style.width="";
}
getid('top').style.width=getid('sidebar-1').offsetLeft+"px";
}

version>=7 和 aVersion.indexOf(“MSIE”)==-1 都是浏览器校验，表示只有当IE版本大于或等于7，或者在非IE浏览器里，才限制页面的最小宽度……

本来还想加一些JS效果，比如可折叠的侧栏widget之类，但是把兼容性改下来之后就完全没心情了………………

最后还是回到设计话题，自适应宽度的布局其实还是比较迎合大屏幕（高分辨率），可以充分利用空间，改善用户体验，但是如果页面里内容比较紧凑，那么对于普通分辨率的用户（1024×768）来说，效果反而不如固定宽度……目前主流的BLOG设计是固定宽度，单栏或两栏，底部再加上一栏放各种列表，所以我的布局方法虽然技术上麻烦的多，但也许并不讨好，那也没办法的事……

YY流界面之动态图标导航栏

Dexter.Yy — Sat, 03 Mar 2007 06:10:03 +0000

做这个导航栏的初衷，是想在公司产品的后台界面里，模仿MAC OS X系统的dock效果，所谓dock，就是OS X桌面底部那条显眼的工具栏，我的UBUNTU桌面里也有类似的效果……

实际上我也没用过MAC，所以是凭想象做的，演示页面在此

右上角的导航栏是默认的效果，鼠标滑过时图标变大，会推挤旁边的图标。
下面第一排去掉了推挤效果。
第二排加入了左右移动的功能，图标的数量远远超出页面的宽度，只显示其中一部分，在导航栏上左右移动鼠标时，整个导航栏会向相反方向滑动，显示出隐藏的图标。
第三排把移动的操作改到了左右两侧的箭头，鼠标停留在箭头上时，导航栏就会向对应的方向滑动，鼠标离开箭头时滑动停止，当滑动到最末端的图标时，自动停止。

先实现导航栏的默认效果，HTML如下：

<div class="iconbarout">
<div id="iconbar0" class="iconbar" >
<ul style="margin-left:0px;">
<li>
<a href="#">
<img src="images/icon7.png" style="width:68px;height:68px;" onload="alphaPNG(this);" onmouseover="largeIcon(this);" onmouseout="reIcon(this);" />
<span>link7span>
a>
li>
<li>
<a href="#">
<img src="images/icon6.png" style="width:68px;height:68px;" onload="alphaPNG(this);" onmouseover="largeIcon(this);" onmouseout="reIcon(this);" />
<span>link6span>
a>
li>
ul>
div>
div>

为了追求立体感，图标不能有背景色，所以必须用透明PNG图片，这里用标签插入图片，是因为要实现图标的缩小放大效果（CSS背景里的图片只能控制位置，不能改变大小），图标的长宽要写在元素的style属性里，方便JS程序控制。

由于IE6不支持PNG的透明背景，必须用滤镜来做HACK才能达到一样的效果，而滤镜只能写在CSS的背景属性里…………为了解决这个矛盾，就要依靠JS了：

function alphaPNG(png)
{
var aVersion=navigator.appVersion.split("MSIE");
var version=parseInt(aVersion[1]);
var pp=png.parentNode;
if( (version>=5.5) && (version<7) && (document.body.filters) )
{
var mout=png.onmouseout.toString();
var mover=png.onmouseover.toString();
alphaHTML="\"cursor:pointer;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='"+png.src+"');display:block;width:"+png.style.width+";height:"+png.style.height+";\" onmouseover=\""+mover.substring(mover.indexOf("{")+1,mover.lastIndexOf("}"))+"\" onmouseout=\""+mout.substring(mout.indexOf("{")+1,mout.lastIndexOf("}"))+"\" >";
png.outerHTML=alphaHTML;
}
}

这个函数已经写在图片的onload事件里了，会在IMG标签的内容加载完后触发（这个事件虽好，也不能到处乱用，根据伟大的犀牛书V5，onload只支持body, frameset, img），函数先判断浏览器类型和版本（IE7支持透明PNG），先创建一个span元素，IMG标签的所有属性、事件都原样COPY到SPAN上，而PNG图片则放到SPAN的背景里，用滤镜处理成透明，注意滤镜属性里必须要有sizingMethod=scale。最后用outerHTML（只有IE支持）把该IMG替换成span。

导航栏的样式：

.iconbarout
{
width:770px;
position:absolute;
top:40px;right:10px;
}
.iconbar{
overflow:hidden;
float:left;
}
.iconbar li{
float:right;
padding:0px;
width:auto;
text-align:center;
margin:0 16px 0 0px;
}
.iconbar li span{
color:#333;
font-weight:600;
width:auto;
display:block;
float:none;
margin:0px auto;
}
.iconbar li a img{
margin:0px auto;
float:none;
}
.iconbar li a{
text-align:center;
float:none;
margin:0px auto;
}
.iconbar li img{
border:0px;
float:left;
}

这样就在IE和Firefox里实现一样的视觉效果了（这里存在一个问题，为了保证图标放大后的清晰度，初始的图标都是缩小的，在IE7和Firefox里都会看到一点锯齿，而IE6由于用了滤镜，缩小的图标边缘仍然是平滑的-_____-b）

接下来做鼠标滑过的放大缩小效果。JS的动画效果一般是利用setTimeout或setInterval的延迟功能，反复循环来实现的。为了避免这些图标在运行函数时发生冲突，我把缩放的动画效果封装到了一个类里：

/* zoom class by Dexter.Yy
********************************************************/
function animeZoom(ico,gWidth,gHeight,nWidth,nHeight)
{
this.png=ico;
this.iheight=nHeight;
this.iWidth=nWidth;
this.goWidth=gWidth;
this.goHeight=gHeight;
this.rico;
}
animeZoom.prototype.zoomEvent=function()
{
if(this.iWidth<this.goWidth)
{
this.goEnlarge();
}
else if(this.iWidth>this.goWidth)
{
this.goReduce();
}
}
animeZoom.prototype.goEnlarge=function()
{
this.png.style.width=this.goWidth+"px";
this.png.style.height=this.goWidth+"px";
}
animeZoom.prototype.goReduce=function()
{
var obj=this;
var h=parseInt(this.png.style.height);
var w=parseInt(this.png.style.width);
if(w>this.goWidth)
{
this.png.style.width=w-2+"px";
this.png.style.height=h-2+"px";
this.rico=setTimeout(function(){obj.goReduce();},30);
}
else
{
window.clearTimeout(this.rico);
}
}

使用时要传5个参数：目标对象、期望达到的宽度、期望达到的高度、原始宽度、原始高度，像这样：

function largeIcon(png)
{
var lIco=new animeZoom(png,91,91,68,68);
lIco.zoomEvent();
}
function reIcon(png)
{
var rIco=new animeZoom(png,68,68,91,91);
rIco.zoomEvent();
}

OK完工……如果是在FLASH里做这种推挤效果，可能还要写一大堆AS，但这里有CSS的浮动属性帮忙，就很省事……

YY流界面之三栏液态布局 & 圆角边框

Dexter.Yy — Sat, 03 Mar 2007 05:15:25 +0000

在公司做了好几个项目的WEB前端开发工作，其实很早就想写一些技术心得，类似以前发的《[造车轮计划]今天写了一个右键菜单的JS类》，可惜……好罢这句话我已经重复过无数次了：太累 & 没时间。

今天终于整理了一部分以前写过的代码，我准备以后陆续在BLOG上发一些WEB交互界面方面的文章，并且逐步补充完善，争取凑出一套原创的控件库和JS效果库。如果你觉得这些东西对自己的开发有帮助，我当然非常欢迎你拿去自由使用，不过我也希望能收到反馈信息——比如你在开发中遇到的问题、或是你在这些代码基础上做的修改和补充——嗯，这也算是一种开源协议，比什么BSD什么阿帕契都要厚道罢……XD

那么先帖篇简单的：一种实现“三栏液态布局”和“圆角边框”的方法，所谓“液态布局”，就是网页内容的宽度能随屏幕分辨率/浏览器的大小而改变，自动撑满。

根据我的经验……目前网页设计中最常见的还是采用固定宽度居中对齐的布局，也就是说当用户的分辨率提高时，页面左右会出现空白，强调用户体验的WEB2.0网站们翰注重个性的BLOG们，经常会针对这些空白专门设计BODY背景和边缘。而采用液态布局的网页中，又有很大一部分是采用两栏式结构。这里我要做的，是同时包括正文、左侧栏和右侧栏，始终撑满整个窗口，中栏的宽度会随浏览器窗口的大小而变化，当然了，在IE和Firefox里不能有差别。

这是我做的效果演示：http://demo.limboy.com/3c.htm

注意：在这个页面里，圆角方块的底部已经做成可以上下拖动的了，类似软件窗口的拖动效果，方便大家测试高度的自适应效果。

首先是HTML，建立三个容器，放在一个层里面，作为左、中、右三个竖栏：

<div id="main">
<div id="leftColumn">div>
<div id="rightColumn">div>
<div id="centerColumn">div>
div>

注意：中栏的DIV必须写在左右侧栏的“下面”，否则CSS就达不到效果：

#main{
background:#464646;
width:100%;
margin:0px auto;
padding:0;
text-align:left;
float:left;
}
#leftColumn{
float:left;
width:200px;
}
#rightColumn{
float:right;
width:200px;
}
#centerColumn{
width:auto;
margin:0px 200px 0px 200px;
}

左右侧栏分别采用了左浮动和右浮动，限定宽度。中栏采用居中对齐的样式，只是不限定宽度，而且左右的margin设置为侧栏的宽度，而不是auto。

需要注意的是，为了让容器高度随着内容而增加，三栏外面的容器#main也必须设置为浮动，如果它的下面还有容器，也要设置为浮动，比如演示页面中的#foot，而#main上面的容器则不需要浮动，比如演示页面中的#head和#top。

但只是这样还不够，如果在容器里面加入内容，就会发现在该死的IE里出现了一些瑕疵，IE6和IE7一样，凭这一点就可以猜测是属于layout属性BUG，经过一些测试可以证实。所以解决办法是，给#centerColumn层加入某种能触发layout属性的样式，这里我采用的是IE的专有样式zoom：

#leftColumn{
margin-left:0px;
}
#rightColumn{
margin-right:0px;
}
#centerColumn{
zoom:1;
}

以上代码应该放在一个IE专用的样式表里，这样既不会影响其他浏览器，也能通过W3C校验 :D

用微软的专有技术“条件注释”来实现：

注释内的代码只有符合条件判断的IE浏览器会解释。

接下来在三栏中都加入若干圆角方框，作为基本容器。我的圆角方框是这样的：

<div class="widgetBox">
<div class="widgetTop">
<div class="widgetLeftTop">div><div class="widgetRightTop">div>
div>
<div class="widgetCenter">
<div class="widgetMain" >
div>
div>
<div class="widgetBottom">
<div class="widgetLeftBottom">div><div class="widgetRightBottom">div>
div>
div>

样式：

.widgetBox{
margin:0px;
padding:0px;
}
.widgetTop{
background:url(../images/boxtbg.jpg) repeat-x;
height:21px;
}
.widgetLeftTop{
background:url(../images/boxlt.jpg) no-repeat;
height:21px;width:16px;
float:left;
}
.widgetRightTop{
background:url(../images/boxrt.jpg) no-repeat;
height:21px;width:16px;
float:right;
}
.widgetBottom{
background:url(../images/boxbbg.jpg) repeat-x;
height:20px;
}
.widgetLeftBottom{
background:url(../images/boxlb.jpg) no-repeat left;
height:20px;width:16px;
float:left;
}
.widgetRightBottom{
background:url(../images/boxrb.jpg) no-repeat right;
height:20px;width:16px;
float:right;
}
.widgetCenter{
background:#343434;
margin:0 3px 0 3px;
}
.widgetMain{
width:auto;
margin:0 3px 0 3px;
background:#fff;
border-left:2px solid #CCCCCC;
border-right:2px solid #CCCCCC;
padding:8px;
}

为了适应各种大小，顶部边缘和底部边缘用了单独的圆角图片和横向重复的背景，而中间没有任何图片，用边框颜色和内外两个层之间的空隙颜色来做出边缘阴影的效果。

当页面里内容不足的时候，这些圆角方框都会显得不够长，可以在样式里加入最小高度来解决这个问题：

.widgetCenter{
min-height:130px;
}

min-height属于CSS2标准，IE6并不支持，但可以利用IE6的一个最常见的overflow BUG：当容器内的东西大小超过容器时，按照W3C标准，超出的内容会“飘”出来显示在容器外面，而在IE6里容器会被撑大，所以只要直接在IE专用样式表里写.widgetCenter{height:130px;}就行了……然则，IE7修正了overflow BUG，而且支持min-height属性-_______-b…………所以，必须写成这样：

*html .widgetCenter{
height:130px;
}

*html是某种只有IE6认识的东西……而IE7不认识……因此以上样式只对IE6及以下的浏览器生效……(随便说一下，也有一种只有IE7能识别的前缀：*+html )-_______-b

这样就做出了一个比较灵活的三栏布局，只改动少量代码和背景图片就可以适应不同的页面设计（代码重用性在网页中同样重要）。更详细的内容请自行查看演示页面的代码。