CSS » 比特客栈的文艺复兴

CSS 2.1的隐藏技能：多背景，多边框，等高容器

[1]次炮击 / 扯淡日期: 15-Jun-2010 / 扯淡主持: David Frank

相比CSS3的新特性，CSS 2.1标准下的pseudo（伪类选择器）已经通用于所有主要浏览器的稳定版本（FF 3.5，Safari 4，Chrome 4，Opera 10以及IE8），这样一来我们就可以三次装饰同一个容器而不用建div巢了。Nicolas Gallagher最近写了一篇文章，看完两个DEMO（1,2）之后我清楚认识到自己没掌握CSS 2.1的事实。

为什么IE的盒子模型是错的

[6]次炮击 / 扯淡日期: 13-Jun-2010 / 扯淡主持: David Frank

ppk曾经说IE的传统盒子模型比W3C的定义好理解，但为什么IE的盒子还是比W3C的糟糕呢？因为IE盒子的定义连IE盒子的支持者自己都搞不清楚。与文中所述相反，IE盒子并不包括margin，而只是纯粹的计算padding与border的占位。为什么IE传统盒子这么烦？因为需要反向推导一个盒子的内容宽度，而浏览器渲染时期望尽快知道内容的宽度。再有，IE传统盒子硬是把微软自己的开发团队都搞晕了，有些bug还穿越出现在标准模式下，哦，你不知道IE6的标准模式使用W3C的盒子定义？支持IE传统盒子的同学，没有为IE5.x开发过的同学，请你考虑这个问题：如今CSS3支持图片border了，使用IE盒子模式，浏览器应该怎么计算内容宽度？CSS3是为设计者方便提供帮助，请不要以box-sizing为借口，为IE5.x的顽固不化辩护。延伸阅读： Internet Explorer and the CSS box model The Box Model Problem Box model tweaking Internet Explorer box model bug

CSSplay老头子的挑战

[2]次炮击 / 扯淡日期: 12-Apr-2010 / 扯淡主持: David Frank

你真的懂CSS？那就来理解一下他的最新杰作：“在不知道图片大小尺寸的情况下，仅使用CSS与(X)HTML完成图片的跨浏览器等比缩放”吧！听起来简单，看起来简单，却不是三脚猫网页开发者能解决的。假如你嫌页面源代码太乱，自己下载这个精简版玩玩吧～

再看CSS字体堆栈

[3]次炮击 / 扯淡日期: 09-Feb-2010 / 扯淡主持: David Frank

A Way Back上有一篇重新审视网站字体排序的文章。虽然中文世界的字体堆栈一般只有宋体和雅黑两种（而且是浏览器默认，不是CSS定义……），但随着不同操作系统的出炉，默认字体的比率也发生了变化，这篇文章尝试探索CSS字体家族定义的优化（仅用系统内的默认字体，而不是embed）。顺便一提，此站也是经典的blogazine + typography爱好者。

吹毛求疵：解决IE6-7给链接加黑点边框的三种方案

[3]次炮击 / 扯淡日期: 21-Jan-2010 / 扯淡主持: David Frank

先定义问题：大家都知道，CSS超链接的outline属性一直是为键盘用户增加易用性的好帮手（按Tab键focus下一条链接，是除Safari Win外的默认操作）。可以说，outline通常伴随着:focus事件出现。但如果你重新定义了:focus的样式，这个边框就显得很多余了。对于标准的浏览器而言（IE8+，FF2.0+等），定义:focus时的outline:0足以解决问题。但不支持:focus的IE6和只支持超链接:focus的IE7的黑点边框又怎么解决呢？