import vs link

2008-09-25

对于 CSS 的载入方式，在这里咬文嚼字下。这篇主要探讨 CSS 的两种载入方式：@import 和 link 元素间的差异。

link 是在 (X)HTML 文档中的语义是「页面资源」（当然也会包括 CSS），而 @import 只是 CSS2.1 的语句。

使用 @import 可以使各 CSS 文件间相互嵌套。在 Explorer5.x 时代，同时也是浏览器间判断是否支持 CSS2.1 的一个方法。

其实，我们最关注的是 @import 和 link 两种不同的 CSS 载入方式的性能问题。先写了两个简单的脚本，让 CSS 文件延时 5 中载入，可以在各浏览器下看看结果使用 @import 使用 link 。

可以看见，Exploer 系列在使用 @import 方式时，会先载入文档，然后再载入样式；而在其他浏览器以及其他情况下，都需要等待样式载入完毕以后统一渲染。

总结下我个人的看法。我个人倾向于使用 link 方式，主要是下面的几个原因

当然，应用 @import 的场合也很多，比如在无法更改页面结构、或者是需要统一的 CSS 入口的情况下等。

参考阅读

我的栅格系统实现

2008-09-20

如果没有了解栅格系统是什么，建议看完这篇文章以后再回来。

其实有很种 CSS 写法实现栅格系统，很多 CSS 库也都会提供类似的栅格系统实现（譬如： YUI ， BluePrint ）。

引用 One True Layout 文中所言，良好的布局应该具有的几个特性：

请允许我「重复造了轮子」，我的栅格系统实现是基于「伪绝对定位布局」，这样可以更好的实现上述所言的几个特征（很难解释，还是直接看 DEMO ）。

http://friable.rocks/grids/index.html 定义的 950px 宽度为公式 W ）

column-24 start-01

因为是上述「伪绝对定位」的布局，所以相应列之间不会相互影响。而理解上述布局可能需要些时间，同时感谢师兄那么详细的讲解，我相信也会给你带来收获。

很难具体的解释其中的细节，但是希望有问题的朋友能够留言，我尽量帮你解答。

2008-09-09

Google Chrome 的发布，使我们更加的注重基于 WebKit 核心的浏览器的表现情况，但我们很多时候「不小心」就会出现问题。考虑下面极端的情况

.box {
    background: red;
    #
    background: yellow;
    background: #green;
}

经过测试发现，Exploer 系列浏览器会显示黄色（yellow），Firefox 与 Opera 则会显示红色（red），而 Safari 以及 Chrome 则会显示绿色（green）。

按照本人的理解，这是各浏览器 CSS 解释上的差异造成的。首先，Safari 会对于 #red 这样的「常量颜色值」会尝试解析，而其他浏览器则取「#」后面的 16 进制色值。

然后对于

.box {
    #
    background: yellow;
}

的理解，Exploer 系列会直接解析成 background: yellow; 而其他浏览器则等待「;」然后连接起来，所以不起作用。类似的可以使用

.box {
    .
    background: yellow;
}

测试下。但如果语句后面加上分号「;」

.box {
    #; /* 或者 .; */
    background: yellow;
}

则会恢复正常。可以参考这里，获得更进步的详细信息。

总结下的结论，首先，比如你想针对 Exploer 仅 Hack 一条语句，那么可以在其上行简单加个「.」或者「#」，这仅适合临时调试使用。

其次，期前如果不小心写成 #red 这样的色值，可能会无关要紧。但就目前众多的浏览器情况而言，可能就会有上述意想不到的结果，所以 CSS 方面的细节我们要更慎重的对待。