【更新】iSpriter - 智能合并CSS精灵图

号外号外,iSpriter更新啦!

什么?你不知道iSpriter是什么?那你太out啦,必须先看看这个文章了。简单的一句话介绍:基于NodeJs的开源CSS精灵图合并工具,不用改变原有的 css 编写方式,就能自动帮你解决 css sprite 的合并问题。目前源码托管在 github(https://github.com/iazrael/ispriter),欢迎各位同学来一起完善。

......

判断浏览器是否支持指定CSS属性

现在css3出来了, 添加了许多新特性,但由于并未全部浏览器都实现了这些特性,使用起来不太顺畅。因此,就想在使用的时候进行判断,如果有这个属性并且支持这种值,就css实现, 否者就用js实现。

比较明显的例子就是text-overflow这个属性,text-flow:clip是大部分浏览器都支持的,而text-flow:ellipsis则在firefox和10.6版本以下opera上工作不......

子节点的margin溢出问题

我们知道,css margin是会合并的,有时会导致一些布局问题。

事实上margin还有存在一个溢出的问题: 当其父节点没设置宽高的时候,子节点的margin超出父节点而存在,会导致父节点的left/top产生了偏移,导致position:absolute的节点定位不准确。

我们先看下面这个例子:

more

<!DOCTYPE html>

<html>......

【魅力CSS】纯CSS多级菜单

下午在看《ajax权威指南》,看了多级菜单部分,想了想,觉得可以用纯CSS做一个。

用了CSS2的子对象选择符“>”和伪类“hover”,可以IE6不支持子对象选择符,除A之外的标签页不支持hover,所以无视IE6,咱们做web前端的已经被IE6害的够惨的了。

兜远了……直接上图,想要多少级就多少级。

关于reset.css的必要性

通常开始写css的时候,我都会先link一个reset.css。

所谓reset,就是将html标签的样式都去掉,变成普通的标签的样子如。

要reset的根本原因就是不同的浏览器对同一个标签样式的解析不一致,导致有些css在一个浏览器显示明明没问题,可是到了另一个浏览器则产生多多少少的错位等问题。加入了reset,就要对很多样式重写,即使你想让他保持原来的样子。

但是对于用......