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

号外号外,iSpriter更新啦!

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

由于最初写的时候不怎么注意代码自量,写得比较搓。在应用在几个项目之后,修复了一些 bug,发现再加新功能比较困难。最近终于下决心重构了下,并在重构的基础上增加了一些新特性。

目前 iSpriter 的特性......

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

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

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

废话少说,判断的代码如下:

var element = document.createElement('div');

if('textOverflow'......

子节点的margin溢出问题

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

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

我们先看下面这个例子:

more

<!DOCTYPE html>

<html>

<head>

<title>Margin Overflow Test</title>

<meta http-equiv="Content-ty......

【魅力CSS】纯CSS多级菜单

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

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

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

more

demo请点击这里 , CSS代码如下:

#menuList{

}

#menuList ul,......

关于reset.css的必要性

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

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

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

但是对于用户产生内容的网站来说,比如Blog,都用到了富文本可视化编辑器,而大部分编辑器都使用了execCommand来实现格式化的。execCommand在不同的浏览器会生成不同的代码,如“粗体”,执行execCommand(......