栅格系统（Grid System）的辅助工具不少，而那些工具多数让人填栏宽，间距，栏数这些。但是我在实际应用栅格系统的时候，是知道页宽并估计 12 栏会比较适合，虽然有公式去计算，都会觉得麻烦。
为什么就没有这么一个工具：输入页宽和分栏数，自动计算出所有可能的情况呢？因为不会有半个像素的情况，精准到像素的话，还是可能有几种情况的，还夹杂一些不实际的情况。那么根据具体效果去选择，会比埋头计算然后看效果要方便得多。
于是做了这个 webapp：Grid System Calculator
参考了 Bootstrap 和 960 Grid System 两种 CSS 实现方案，感觉更加倾向于 Bootstrap 的方案，于是参照其做法，用于生成显示效果。
为了方便 Bootstrap 的用户，以其参数配置方式输出具体参数。也提供了基于 960 Grid System 的 CSS 下载服务链接（引用 grids.heroku.com 的服务）。
这个 栅格系统计算器 采用 MIT 协议开源使用。
Bootstrap 里的 grid system 里面 (源代码) 有这么一段，
[class*="span"] {
float: left;
margin-left: @gridGutterWidth;
}
用 RECESS 去跑会看到提示：Universal selectors should be avoided。这个既可以说是 selector 的问题，也可以说是 RECESS 的问题，但可以在运行的时候加个参数忽略掉。
自己去写扩展时也会写到类似的规则，比如需要兼容某浏览器，如果不这样写，就会需要像 Bootstrap-IE6 那样写 Continue reading
从 v1.4 开始使用 Bootstrap，从此（内部）项目的 UI 告别了自制样式的时代，风格清新而且使用简便，是目前见过最好使的 CSS 框架。对于哪个妙句 “Build for and by nerds”，我都不知道说什么好了。如果想自定义样式，对于了解 LESS 的是非常容易的，但门槛并不在 LESS 本身，而是在于有些资源在国内是不能访问的。
而 v2.0 之后引入了 由 Glyphicons 提供的 Icons，应用到项目中去，顿时使整个 UI 的感觉上升了一个档次，真是锦上添花的好东西啊。
但是，需求总有惊喜的部分存在。
比如，想在字号较大的 title 位置也应用 icons；
又比如，在一个希望可以起到警惕作用的位置使用 .icon-ban-circle，无论是黑色还是白色（目前只有这两种颜色可供选择）都不能达到这个要求；
幸好是内部系统，不需要兼容什么老的 IE 版本，使用 png 实现的 icons，欸～～
解决方案总是会有的。 Continue reading
CSS 文字的发光效果通过 text-shadow 实现起来很方便的。
text-shadow: 1px 0 1px #8B4513, 0 1px 1px #8B4513,
0 -1px 1px #8B4513, -1px 0 1px #8B4513;
在 Firefox, Chrome, Opera, Safari 中的效果：
看上去这几款浏览器都支持。不过就是在 Chrome 里面，可以看见出来的效果并不好，奇怪的一点是为什么它的模糊会往里发展了，开始还以为 webkit 都这样，看了看 Safari，表现挺好的，边缘比 Firefox 还要锐利。 Continue reading
早有听闻 IE7+ 是支持 png 的，用下来感觉也还可以。但忽然之间，发现有一张 png 图片莫名其妙地黑底了，最先想到的是 png 的输出设置可能出现问题，于是试了 N 种设置黑底，只是黑底的形状有点不太一样，相当纳闷。没办法了，还原基本步。
<div id="box">I Believe</div>
<style>
#box {
background: url(http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png) no-repeat;
color: #FFFFCC;
text-shadow: 1px 0 2px #897461, 0 1px 2px #897461, 0 -1px 2px #897461, -1px 0 2px #897461;
filter: Dropshadow(offx = 1, offy = 0, color = #897461) Dropshadow(offx = 0, offy = 1, color = #897461) Dropshadow(offx = 0, offy = -1, color = #897461) Dropshadow(offx = -1, offy = 0, color = #897461);
height: 200px;
padding: 5px;
width: 200px;
}
</style>
这个应用场景很简单，有一张 png 作为背景图，上面有些文字，对文字施加了一些发光效果（实际上阴影来实现）。在 firefox 和 IE 下的表现见下图： Continue reading
也不是第一次拿 IE 说事了，不过这次 IE 的 bug 还是有点意思的，也看到过有人提及这个 bug，解决的方法就是在CSS里设置它的 width 或者 height，要看具体的应用场景了，好像下面的这个例子。
<div class="composite">
<div class="item">AAA</div>
<div class="item">BBB</div>
<div class="item">CCC</div>
<div class="item">DDD</div>
</div>
<style type="text/css">
.composite {
background-color:#CCC;
padding: 0 0 0 40px;
}
.item {
background-color: #666;
padding: 0;
}
</style>
简单得就是两层 div，有深浅不同的灰色背景。当里面那层 div 只包含像 text、input 这类的元素（我暂时还不致于无聊到逐一去尝试）时，它的背景色就不显示的，不过也不是永远不显示。
DIV no background in IE
DIV 的背景出现在重绘之后
.exprItem {
background-color: #666;
_height: 1px;
padding: 0;
}
上面通过一个 CSS hack 是其中一个解决方法，这种写法只有 IE 认得出来。因为通常情况下，我都希望元素自己去管理其领地而不要来问我应该拨多少地。
* IE version is 6.0.2900.2180.xpsp_sp2_gdr.080814-1233
我一般用脚本创建元素的同时多数会附加css来控制大小，背景色，etc.
但在<canvas>上却表现比较怪，
var canvas = new Element('canvas', {styles: {width: '150px',height : '150px'}});
再在上面画东西的时候居然发现变形了
我记得mozilla上面说是可以改变它的大小的
分析一下，canvas最终表现和一个png图像差不多，而它的默认大小是300/150，当应用css时，相当于宽度压缩了。
那不用css怎么办呢？其实很简单
var canvas = new Element('canvas', {width: 150,height : 150});
诶，被css惯坏了……
注: Element指的是mootools里的那个