2009-4-17
迟来的 CSS3 新属性：box-sizing
说到 IE 的 bug，一个臭名昭著的例子是它对于“盒模型”的错误解释：在 IE5.x 以及 Quirks 模式的 IE6/7 中，将 border 与 padding 都包含在 width 之内。这为前端工程师的工作平添了不少麻烦，几户每个需要定义尺寸的 box 都要思量一下：是否触发了“盒模型 bug”？
同时，由于另一撮浏览器对标准的遵从，我们在精确定义一个在有限空间内显示的 box 时，也需要计算一下：留给它的空间只有那么大，刨去 border 和 padding，我们该把它的 width 写成多少呢？
这种情况在 CSS3 时代有了改善，得益于这个叫做 box-sizing 的属性，它具有“content-box”和“border-box”两个值。
- 定义 box-sizing: content-box; 时，浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准；
- 定义 box-sizing: border-box; 时，浏览器对盒模型的解释与 IE6 相同；
为什么说这个属性“迟来”呢？IE 对于盒模型的解释固然不符合 W3C 的规范，但是也有它的好处：无论如何改动 border 与 padding 的值，都不会导致 box 总尺寸发生变化，也就不会打乱页面整体布局。而在 Firefox 等现代浏览器下，如果我们要改变一下 padding 的值，就不得不重新计算 box 的 width。现在 IE6 寿终正寝，这个 CSS 属性未免有些姗姗来迟。
试用这个新属性，Firefox 请使用 -moz-box-sizing，Safari / WebKit 请使用 -webkit-box-sizing，Opera 直接用 box-sizing 即可。
Hoo! —— iPhone template for Pixelpost
Pixelpost 是一款开源的图片博客源程序，体积小巧，而且可扩展性非常强大。我的 Hoo! 美女站正是基于此搭建的。
前段时间做了一个适合于 iPhone 浏览的模版，现在将此模版提供到了 Pixelpost.org，任何人都可以自由下载并应用于自己的 Photoblog。
下载地址：Hoo! (Pixelpost template for iPhone)。
UCDChina 产品设计工坊
上周六参与了白鸦和 Angela 组织的 UCDChina 设计工坊，第一次参加，完全是学习的心态。
一天的时间，上午是白鸦和 Angela 在讲产品设计的流程，信息量很大，收获很大，需要消化的东西很多。下午是项目模拟。
我说一下我的感受：
- 流程与分工的混乱
- 这是目前业内的现状，在模拟过程中很明显。尤其是先期市场研究，用户定位等环节，固然跟小组中没有经验丰富的用户研究人员有关，但整个过程确实不甚漂亮。流程混乱，过早的跑到细节讨论的误区。出现这些问题并不可怕，毕竟我们从错误中学到了经验，在以后的实战中终会受益的。关于分工合作的关系，白鸦 Keynote 中的一张图表现的很形象。
- 面对分歧
- 经验不足导致分歧严重，对待分歧也没有很好的处理，是快速消除分歧，还是放到下一环节，还是不了了之？
- 用户需求不等于产品功能
- 单独说出这句话来都能达成共识，但是在真正的模拟过程中，概念上还是混淆了。过早的用功能来描述需求，只会在后续的产品开发中禁锢住头脑，Angela 提到的一个文字游戏的说法很有说服力。
- 概念图/流程图的绘制
- 以前接触的少，这次白鸦现场演示了一个简单的概念图的绘制，很受教育，一会儿在电脑上画个。
- 用户访谈
- 与用户交流的确是一门艺术，Angela 深谙此道。两个小组的互相访谈很有趣，没看到的只能说很遗憾。
白鸦也提到了一些界面设计中的观点，一些印象比较深刻的：
- 在决定一个功能在界面上的显示方式时，可参考有多少人使用，以及其被使用的频率；
- 每个功能由不同的工程师来开发，每个工程师都认为自己开发的那个功能极其重要，都想在显赫的位置得到体现；
- 对于一些成功案例，应该考虑该案例在其演变过程中的实际情况，有时是不可复制的，白鸦举了一个 IM 的例子；
非常感谢白鸦和 Angela 的工作，在整个活动中，Angela 非常关注各位的接受程度，可谓用心良苦。感谢叽歪提供场地，叽歪的办公环境不错。
活动中认识了思域、Mason、Redfall 等朋友，以及其他暂时还叫不上名字的牛人们，对 Tony 提出批评，一块吃过饭了还不知道我的名字，虽然那次饭是他请客，也理当该诛。
IE 的 text-indent Bug
今天遇到的一个 Bug，主要表现为：当容器的第一个子元素为 inline 属性，并且为该子元素定义了 text-indent 的话，IE 渲染出错。阅读全文...
例子 1：
<div style="margin: 10px auto; padding: 10px; width: 400px; border: 3px solid #EEE;">
<span style="background: #FF0; color: red; text-indent: 50px;">Indent</span>
正文
</div>
在 Firefox 中，渲染正常：
在 IE6 中，错误：
错在 text-indent 只在 block 级别的元素中体现，在本例中的 span 元素中，应予忽略。
例子 2：
给 span 加个浮动，让它自动成为 block 元素看看。
<div style="margin: 10px auto; padding: 10px; width: 400px; border: 3px solid #EEE;">
<span style="float: left; background: #FF0; color: red; text-indent: 50px;">Indent</span>
正文
</div>
在 Firefox 中，渲染正常：
在 IE6 中，错误：
错在 span 将自身的 text-indent 属性传递给了它的父元素 div。
例子 3：
负值的 text-indent 会是怎样呢？
<div style="margin: 10px auto; padding: 10px; width: 400px; border: 3px solid #EEE;">
<span style="background: #FF0; color: red; text-indent: -9999px;">Indent</span>
正文
</div>
在 Firefox 中，渲染正常：
在 IE6 中，错误，我们什么也看不到了：
错在 span 不但将自身的 text-indent 属性传递给了它的父元素 div，而且还将超出的内容隐藏了，在没有定义 overflow 属性时，元素的默认 overflow 属性应该是 visible。
例子 4：
既浮动，又负值的 text-indent 呢？（事实上我正是在这种情况下遭遇了这个 Bug）：
<div style="margin: 10px auto; padding: 10px; width: 400px; border: 3px solid #EEE;">
<span style="float: right; margin-left: 5px; width: 40px; background: #FF0; color: red; text-indent: -9999px;">Indent</span>
正文
</div>
在 Firefox 中，渲染正常：
在 IE6 中，仍然是错误：
依然是 span 将自身的 text-indent 属性传递给了它的父元素，并将超出的内容隐藏了。
以上的 Bug 在 IE8 的“IE7 mode”中得到了部分修正，当 span 为浮动时基本是正常的，但默认情况下仍然错误。其他版本未测试。
标签： browser-bugs, css, ie, web
浏览器与 Web 开发工具
面对 Mozilla、MS IE、Webkit（Safari）、Opera 这四大家族的浏览器，不管你正在调教哪款，总有与之相对应的一款 Web Developer Tool 正在等着你。阅读全文...
Mozilla Firefox
作为一款以强大的可扩展性著称的浏览器，用于 Web 开发的插件自然不胜枚举，我想这也正是伊为众多 Web 工作者所钟爱的原因之一吧。Web Developer、JSView、HTML Validator 等插件都能为我们的工作带来很多方便。本人重点推荐的是 FireBug，这款插件经过作者孜孜不倦的开发，在查看 DOM 结构，实时修改 CSS，调试 Javascript，甚至提升网站的访问速度等方面都堪称上品，可谓一×在手，别无所求。
Microsoft Internet Explorer
作为目前市场占有率最高的浏览器，伊使所有的 Web 工作者都不敢小觑。这款由微软开发的 Internet Explorer Developer Toolbar，使我们在解决 IE 下各种稀奇古怪的问题时，不再如同盲人摸象般手足无措。
Webkit（Safari）
所有 Mac 用户都不忍心将如此优秀的浏览器打入冷宫，随着 Safari 进驻 Windows 平台，伊的用户数量相必会逐渐攀升。万事俱备，只欠一款 Web Developer Tool ？Webkit 已经把它带来了，Web Inspector，这不是 Plugin，也不是 Add-on，而是包含在 Webkit Nightly 版本中的一个功能，下载最新的 Webkit Nightly Build，安装之后，在终端中开启 Inspector：
defaults write com.apple.Safari \
WebKitDeveloperExtras -bool true
启动 Webkit 之后，右键菜单中的 “Inspect Element” 就是了，只是你需要用 Webkit 来代替 Safari，问题……不是很大吧？
Opera
这款速度迅猛的浏览器，就如同乱世中的哲人一般，精巧而专心地做着自己。伊不乏铁杆 Fans，而且其中的 Web 工作者不算少数，因此 Opera 下的 Web Developer Tools 也颇有几款，例如 Web Accessibility Toolbar、Web Developer Toolbar & Menu，而 Opera 官方出品的 Opera developer tools，实为其中集大成者。
怎么样，您今天来哪款 :D
标签： Software, web, Web-developer-tools
Somthing about HTML 5
- 一个元素中的 block 元素与 inline 元素不能并列共存?
- 新引入了不少用户布局的标签，诸如 header、footer、nav、article，我们现在习惯使用的 <div id="header"> 就可以用一个 <header> 来代替了，这方面应该是最迫切需要浏览器来支持的；
- 还有一堆新标签，例如 time、datagrid、datalist ……
- input 标签拥有了一堆新的 type：
- datetime
- datetime-local
- date
- month
- week
- time
- number
- range
- url
- 表单元素的新属性：required、autofocus 等，将有效提升表单验证的友好度，只是到时候又要忍受不同浏览器的解释方式了；
- target 属性仍然可用，无论是针对 base 还是 a 标签。
坦然面对浏览器的多样化
对于Web工作者来说，不需要抱怨，要坦然面对，标准迟早会建立并执行，而浏览器多样化的状况一定会存在。任何一种产品，都不会任由一个品牌垄断。
日本的光学设备够出色，产品线够全面，但我们还是可以选择血统纯正的Leica，适合家用的Kodak，甚至HP、Sansung、GE都能分得一杯羹，因为消费者能够接受，也正享受着这个行业产品的多样性。
我们需要一个标准，一如我们毫不怀疑Philips的光盘能够放进Lite-On的光驱中，Michelin的轮胎能够装在Jeep汽车上。这不是，也不应该是某一个企业独立完成的事情。
微软在这几年的时间里占有了浏览器市场的大部分份额，但几年的时间对于一个行业来说只不过是须臾。
对于用户来说，不需要抱怨，坦然面对自己的选择。选择IE，保证在网络上大部分时间的畅通无阻；选择Firefox，享受其众多附加软件带来的便利；或者选择Opera、Safari等任何你想选择的浏览器。不能坐在麦当劳里面抱怨没有老北京鸡肉卷，也不能坐在肯德基里面抱怨没有巨无霸。
利用CSS按比例缩小图片
当然，生成缩略图这个工作如果交给程序来完成，效果会好很多，但是有时出于某种因素，例如服务器不支持GD之类的，难免就要请CSS代劳。
把一副大图片按比例缩小到某个尺寸，对于现代浏览器，直接使用max-width和max-height两条CSS属性即可。阅读全文...
对于IE 6.0及以下版本，以上两条CSS属性均不会被理会。之前处理这种事情，我们往往会借助Javascript，然后为图片加上onload事件。例如：
<img src="..." alt="..." onload="resizeImage(this)" />
<script type="text/javascript">
function resizeImage(obj) {
obj.width = obj.width > 50 && obj.width > obj.height ? 50 : auto;
obj.height = obj.height > 50 ? 50 : auto;
}
</script>
这固然能解决问题，但是对以后页面的升级会带来麻烦——随着浏览器对CSS支持的完善，我们迟早会把图片上的onload事件统统去除。该是Expression的Show Time了，既然IE支持通过Expression在CSS中放置一些脚本，而这段脚本又只是提供给IE 6.0及以下版本使用，那么把它写到Expression中再合适不过。
最终，把一副大图片按比例缩小到50px*50px以内，可以参照以下这段CSS：
.thumbImage {
max-width: 50px;
max-height: 50px;
}
* html .thumbImage {
width: expression(this.width > 50 && this.width > this.height ? 50 : true);
height: expresion(this.height > 50 ? 50 : true);
}
至于图片是如何保持其高宽比例的，这张图片可以解释：
标签： css, Expression, max-width, web
用百分比进行背景图片定位
大部分人应该习惯于使用描述性词语（left、top、center…）或者数值（20px、1em…）对背景图片定位，百分比可能比较少用，常见的有50%、100%等数值。例如希望背景图片水平居中，距离容器顶部20px，可以使用
background-position: 50% 20px;
之所以不使用
background-position: center 20px;
是因为类似这种描述性词语和数值混用的形式不被W3C推荐。（单纯的描述性词语组合使用是没有问题的，例如：background-position: right bottom;）阅读全文...
使用百分比进行定位的好处是可以利用CSS的计算功能，达到px定位所难以完成的任务。例如在一个宽高均为300px的容器中，使用
background-position: 150px 150px;
可以看到背景图片的左上角顶点（坐标0,0）定位到了齐容器的中心点（坐标150px,150px）。
而把150px替换为50%，使用
background-position: 50% 50%;
看到的并不是如下的效果
而是这样
可见，CSS计算出了背景图片的中心点。这也可以解释为什么我们在使用
background-position: 100% 100%;
定位的时候，图片被放置在容器的右下角，而并没有跑出容器。（如果使用 background-position: 300px 300px; 的话，背景图片会被移出容器）
同样，如果使用
background-position: 20% 20%;
会将背景图片的坐标点(20%,20%)定位到容器的坐标点(20%,20%)。
利用outline以及IE的button背景图Bug制作双线边框的按钮
首先声明一下，这篇文章中所讲的实例使用到了浏览器的Bug，这是不被推荐的，仅供大家参考一下。或者在确认这个方案对整个网站的整体效果影响不大的时候，可以小用一下。
我们都知道，在CSS默认的边框属性中，有double这个选项，代表双线，但是在实际运用中，这个属性的效果并不理想，两层边框只能使用一种颜色，而且各个浏览器的解释也略有差异。
在一次工作实例中，我本想给<button>添加一个背景图片，做一个好看点的按钮，却发现IE在显示<button>的背景图片时，存在一个Bug：IE总是在<button>的边框和背景图之间，显示1px宽的间隙，间隙的颜色由<button>的背景颜色决定。
这个发现非常好玩，本来<button>只有一层边框，现在看起来就像是内外两层边框了。这样不就可以做出双层边框效果的按钮了吗。不过说到底，这只是IE的Bug，其他的现代浏览器在显示<button>的背景图片时，还是非常标准的，不存在这1px的间隙。好在CSS 2有另外一个属性：outline，这个属性理所当然的不被IE支持，Firefox，Opera，Safari等浏览器的当前版本都可以正常显示它。这样，我们就可以有一个方案了：
- 对于IE，使用border做外边框，使用Bug中提到的1px间隙做内边框
- 对于现代浏览器，使用outline做外边框，使用border做内边框
完整的方案如下图所示：
经过美化后的CSS方案：
button {
line-height: 40px;
color: #1e3182;
background: #FFF url(button_bg.png) repeat-x 0 0;
padding: 0 1.5em 0 2em;
letter-spacing: 0.5em;
cursor: pointer;
}
*>button { /*for modern browser*/
height: 40px;
outline: 1px solid #9DAAE2;
border: 1px solid #FFF !important;
}
* html button { /* for IE 6.0/IE 5.* */
border: 1px solid #9DAAE2;
}
*+html button { /* for IE 7 */
border: 1px solid #9DAAE2 !important;
}
这个方案的优点是：
- 可以随意变换双层边框的颜色，内外边框可以不同
- 按钮的宽度不用定死，由其内部的文字多少来决定
- 按钮所用到的图片只是很窄的一幅背景图
当然缺点就是双线边框中的内边框在IE下只能是1px，而且由因IE修补Bug而导致方案失效的危险。
您可以在这个页面看到实例，虽然由于浏览器的其他原因，显示的效果略有差异：IE 6高出了3px，IE 7.0又矮了两个象素，而且IE显示的宽度都比实际定义的宽出一些，但双线的效果总算都还可以接受。
标签： browser-bugs, css, ie, web
Opera下max-width与display:table-cell的显示bug
max-width和disply:table-cell是非常好用的两个CSS属性。利用max-width和max-height，可以非常方便的将网页中的图片缩小到一定尺寸，而且保证较小的图片不会被放大，图片的宽高比例也不会被强行改变。而disply:table-cell和其他的disply:table等属性结合，可以用div等标签模拟出table的结构，对于页面的排版也非常有用。
但是现在看来，Opera(9.00)对max-width的解释有些跟其他浏览器不一致。如果一个图片的原始宽度是300px，在CSS中定义它的max-width为100px，Opera确实能够按照max-width的值显示，但是这个图片在页面中所占据的实际位置却仍然按照原始宽度300px来计算。这点在普通情况下不太明显，一旦把图片放置在一个disply为table-cell的元素中，例如常规的td，或者是disply定义为table-cell的div或其他元素，问题就出来了。Opera会依照图片的原始宽度，把table-cell撑开到300px，虽然显示的图片只有100px宽。而高度却显示正常。阅读全文...
下图说明了Firefox对这种情况的显示方式，这也正式我们希望的：
而Opeera却是这样显示的：
这里有一个实例，您可以在不同的浏览器中查看本页的显示结果，当然，不要对IE抱有太大的希望。
这是一张原始图片，尺寸为300px/300px，我们把它max-width和max-height都定义为100px：
img {
max-width: 100px;
max-height: 100px;
}
把它放置在一个宽度和高度均为200px的单元格td中：
td {
width:200px;
height:200px;
vertical-align: middle;
text-align: center;
background: #F5F3FF;
border: 1px solid #CCC7E1;
}
|
|
把它放置在一个disply为table-cell，宽度和高度均为200px的span标签中，之所以选择span标签，是为了更能体现出IE的显示效果，另外，span之外需要有一个display为table的元素，我们选用一个div：
span {
disply: table-cell;
width:200px;
height:200px;
vertical-align: middle;
text-align: center;
background: #F5F3FF;
border: 1px solid #CCC7E1;
}
标签： browser-bugs, css, max-width, opera, web