css sprites基础指南(一)
关于css sprites大家并不陌生，把多张小图拼凑到一张大图里，从而减少页面的http请求数，提高网站性能的一门技术。
以前有同学说，css sprites是鸡肋，因为图片是拥有缓存的，所以对性能并不会产生多大影响。
我认为当服务器是通过cdn来连接的话，那么的网页每个http请求都将通过cdn服务器来转发，这样将会增加cdn服务器的负担，相对的判断一个图片版本是否和缓存文件版本统一也是要通过cdn服务器的，当然这只是很小的一部分好处，减少HTTP请求是最直接的提高网站性能的方法之一了。
css sprites的功能显而易见，不过它的维护难度让许多同学望而生畏，当然这也是仁者见仁智者见智，不予深论。
css sprites的图片我姑且就分为三类。
一、背景型
这类图片里面大多都是背景，常常出现在页首，页尾的统一样式中，在三种类型中也最为广泛，排法也五花八门。
图片出自淘宝
二、图标型
这类图片全由图标组成，常常出现在一些强交互型网站，他们可能会有几十甚至上百个ico。
图片出自qzone
三、文字型
一些设计师经常会使用一些非系统字体来作为title文字，这会给前端增加不少工作量，不过聪明的前端们把他们都放在了一起，从而维护更加简单，新浪是典型案例。
图片出自sina
可以发现以上三个网站的图片排法都有各自的风格，淘宝紧凑，qq中庸，新浪分散。
如何排列图片成为了许多新手的困扰，紧凑显然可以减少一些图片大小，不过这个量微乎其微，分散可以提高维护性，但体现在哪里呢？
下章我将从css sprites的基础开始说起。
还没有评论.
还没有引用.
css sprites之img sprites
2010-05-05 - 17:16
标签: css, css sprites
分类为 css/(x)html | 2 comments
最先听到img sprites这个词汇是在D2上，口碑网的工程师提出这样一个理论：
在浏览器渲染的过程中，img是顺序加载的，而background是最后加载的，所以会导致背景载入延迟，给用户的体验不好。
于是他想了个办法，把logo加入css sprites的图片，然后用img来引用它，用position的方法来定位。从而让这张图片事先加载，解决背景载入延迟问题。
事实上我在以前就看到过这样的案例，google地图的tips就是用这个方法。
不过现在口碑网并不使用这个方法，口碑的logo也换成了独立的了，据说在圈子里说这个方法鸡肋。
我认为可能性大概有如下几点：
1.图片预加载，不过图片巨大，会影响整个网页的加载进度。
2.当用户用右键另存为的方法存取口碑的logo时，存下来的却是整张背景。
另外在ico css sprites中有种方法是：
使用透明的img来当做容器，使用css sprites来定位图案，生成一个img的ico，这样的好处是减少了http请求，而img在布局中非常容易控制。
大家知道，ico可能会存在任何地方，比如一个高30px的title，比如一个高20的list，甚至可以存在于一段文字当中，如此多变的情况，也只有给图案一个独立容器来的保险。
css sprites之布局排法
2010-05-05 - 16:50
标签: css, css sprites
分类为 css/(x)html | 没有评论
在使用css sprites技术的时候，图案的排法是根据设计稿来设定的。
设计搞意味着你的图案如何留出所需的空隙。
如图，我们还是用网易的图片
大家可能看出了，网易这里图标之间的空隙并不是没有道理的，因为设计稿中设定了这么大的间隙。
另外，如果这里你给图标一个额外的容器来陈放，那么你也可以使用紧凑型来布局，当然这样做并不语义，而且增加了标签。
从淘宝、网易的图片可以看出，一般列表符号都放在最右侧，例如网易的新闻列表连接。
事实上一张css sprites制作的图片，四个边都是很重要的位置，特别是左右两侧，例如图案在图片的右侧，那么你的容器可以把图案放在容器左侧，右侧则可以无限延伸，反之亦然，当然这里背景是不能循环的，否则在图片左侧的图案会跑到容器上去。
这就是为什么前面看到qzone的ico图片是竖排的，因为ico右侧往往会跟上文字，这样右侧可以无限延伸的优势就可以体现出来了。
css sprites基础指南(二)
2010-05-05 - 09:31
标签: css, css sprites
分类为 css/(x)html | 没有评论
在网页中，背景循环可分为四类:
1.横向循环
2.纵向循环
3.横纵向循环
4.不循环
一般在css sprites中，横纵向循环的背景是不存在的，更多的是使用不循环或者单向循环。
另外，在一张css sprites的拼合图片中，一般只能存在横向循环或者只能存在纵向循环，也就是说，纵向循环和横向循环在css sprites中是不能在一起出现的。
css sprites的思想很简单：
利用background获取容器背景，并在指定容器中显示，利用background-position来指定背景上的图案。
原理如图：
图片出自网易
如图，你必须创建一个容器，显然，这个容器的大小不得超过图案边缘的空白处，否则就会出现别的图案。
这里图案离图片的左边距和上边距是你用来定位图片background-position的参数。
这里要达到图片上容器中的效果，定位参数为:background-position:-3px -131px;
当然，你也得加入容器的大小，容器为block元素，大小也可以根据父层来定，总之，容器大小不可超过它所取图案的周边极限大小如图。
在css sprites中，极限宽度是根据图案的布局来设定的，一般情况下，容器的极限宽度是根据图案和它的上下左右其他图案的边距来指定。
如果图案某侧是图片的边缘，而不存在任何其他图案，那么容器将可以由此无限延伸，如果图案两侧都没有图案，则这块背景就可以循环了，上下没有图案则是纵向循环，左右没有图案则是横向循环。
很常见的就是某个背景横向循环，不过在css sprites中，你的循环背景必须填满整个宽度或者高度，并不是以前常用的1px，如图。
我写了一个关于css sprites的demo，你可以微调各项参数来看容器和背景图的变化。css sprites demo
链接文字下划线贴住问题研究
在使用PS设计的时候，会发现给12px的文字加下划线的时候，下划线会紧紧贴在文字下面，很不美观，FW CS3以下都很漂亮的分离了这两对小冤家。
但在编写页面的时候也会出现这样的情况。
以下是测试结果：
从以上测试看出，当字体为tahoma的时候，下划线却紧紧的粘在了一起，而arial和verdana正常，另外gb2312下的宋体也正常。
其他浏览器我也做了测试，XP中：火狐在任何情况下，下划线均不粘在一起，chrome/opera/safari/ie8(正常渲染模式)，任何情况下均粘在一起。
==============华丽的分割线================
而在VISTA中，问题更加严重，VISTA使用的宋体，让下划线再粘一层。
以上测试均为IE8，vista下IE6/7可以忽略(默认安装的是IE8)，另外，先前测试的chrome/opera/safari表现均和IE8相同。
而火狐表现则稍微好些，另外IE8开启EmulateIE7模式也和火狐一样了。
这时我发现，只要把字体设置为13px，IE8和火狐下的下划线就乖乖的分开了，而chrome之类的也和先前12px的火狐相同，但郁闷的是tahoma在IE6下13PX字体表现为14px的字体。
这里是我用chrome截取的新浪网页（下划线较多），感觉就像字被隐藏了一半似地，很痛苦。
结论：
方法1. 字体使用tahoma 12px，开启IE8的EmulateIE7模式。
优点 表单对齐兼容性好，且文本对齐容易控制，空格不会太细。
缺点 IE6/chrome等浏览器下划线贴住，chrome等浏览器在vista下下划线帖掉某些文字最下面一个笔画。
方法2.字体使用arial和verdana 12px，开启IE8的EmulateIE7模式。
优点 IE6/ie7/IE8/FF3表现可接受，只有CHROME等国内不常用的浏览器会贴住，遇到表单对齐时独立定义tahoma字体。
方法3.字体使用字体使用arial和verdana 13px。
优点 所有浏览器在XP，VISTA下均不会产生下划线遮住笔画的问题，遇到表单时独立定义tahoma字体。
缺点 不能使用12px字体。
滑动门真正的魅力
许多人把滑动门当成tab/选项卡，认为滑动门只是简单的鼠标滑过JS切换效果，事实上滑动门是一项基于CSS的自适应技术，它的魅力远比tab/选项卡来的吸引人。
下面是滑动门的演示。
滑动门的原理：
废话不多说，直接上demo，自行领悟。
demo预览
demo打包下载
注意：这样的滑动门好处显而易见，没有无语意空标签，结构清晰，弊端则是无法透明，如果要透明加上一个空标签即可，在demo中制作tips的时候我就用到了这样的技巧。
另外，tips中如果三角在右边则这个标签不得使用float:right;浮动，在IE6中，此元素会跑到屏幕最右侧，所以我使用了定位和right:-10px;来做。
超级无敌各种浏览器css hack
?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.styleName{
color:#FFF;/* FF,OP,IE8 */
[;color:#0F0;]/* Sa,CH */
*color:#FF0;/* IE7 */
_color:#F00;/* IE6 */
}
.styleName{
background-color:#332200;/* FF*/
}
html* .styleName{
background-color:#FF00FF;/* Sa IE7 CH */
}
*+html .styleName{
*background-color:#0000FF;/* IE7 */
}
* html .styleName{
background-color:#00FFFF;/* IE6 */
}
html*~/**/body .styleName{
background-color:#055000;/* IE8 */
}
@media all and(min-width:0){
.styleName{
background-color:#FF5500;/* OP */
}
}
另加一则简化版。同样适用
?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
.styleName{
color:#FFF;/* FF,OP */
[;color:#0F0;]/* Sa,CH */
color:#FFF\9;/*IE6、7、8*/
*color:#FF0;/* IE7、6 */
_color:#F00;/* IE6 */
}
@media all and(min-width:0){
.styleName{
background-color:#FF5500;/* OP */
}
}
真爱生命 远离hack
IE下边框(border-bottom)消失显示不全解决方法
当inline元素加上border的时候，会遇到下边框消失的情况。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字的border</title>
<style type="text/css">
span { border:1px solid red; }
</style>
</head>
<body>
<div> <span>这里是文字</span> </div>
</body>
</html>
提示：你可以先修改部分代码再运行。
当使用tahoma字体的时候，IE6上下边框都不见了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字的border</title>
<style type="text/css">
body{font-family:Tahoma;}
span { border:1px solid red; }
</style>
</head>
<body>
<div> <span>这里是文字</span> </div>
</body>
</html>
提示：你可以先修改部分代码再运行。
解决方法是加上行高line-height
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; [...]
拥有自己的css reset
yui的css reset很好用，不过对于我来说显得过于臃肿，许多标签都是不常用的，加以修改就可以生成一个精简的属于自己的css reset。
先看yui的css reset
?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*归零*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0; }
/*设置表格边框合并,间距归零*/
table { border-collapse:collapse; border-spacing:0; }
/*fieldset,图片边框归零*/
fieldset, img { border:0; }
/*字体样式,粗细统一*/
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; }
/*取消列表样式*/
ol, ul { list-style:none; [...]
IE6到底支持!important吗
2009-11-11 - 13:39
标签: !important, css
分类为 前端技术 | 没有评论
!important是CSS1.0的属性，IE6当然是支持的。
但是很多同学被一些没有说明问题的文章误导，认为IE6是不支持!important属性的，而事实并非如此。
以下是IE6支持的情况。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE6支持important吗</title>
<style type="text/css">
.box { background:green !important; }
.box { background:red;}
</style>
</head>
<body>
<div class="box">IE6支持的!important</div>
</body>
</html>
提示：你可以先修改部分代码再运行。
以下是IE6不支持的情况
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE6支持important吗</title>
<style type="text/css">
.box { background:green !important; background:red;}
</style>
</head>
<body>
<div class="box">IE6不支持的!important</div>
</body>
</html>
提示：你可以先修改部分代码再运行。
可见 写在同一选择器中的!important是不被IE6所认的，而分开情况的则正常
使用@font-face读取服务器字体文件.eot
@font-face可以把字体压缩到服务器，在客户端读取后渲染，从而达到在没有安装字体的客户端也可以浏览到艺术字体的功能。
语法：@font-face { font-family : name ; src : url ( url ) ; sRules }
取值：
name : 字体名称。任何可能的 font-family 属性的值
url ( url ) : 使用绝对或相对 url 地址指定OpenType字体文件
sRules : 样式表定义
需要下载一个软件：
http://www.microsoft.com/typography/web/embedding/weft3/weft01.htm
软件能自动读取html中使用的字体，按照流程就可以生产eot文件和css了。
demo
不过微软的东西只有微软才支持，（他们向来是这样做的），这次也是只有IE才支持。所以还是悲剧吧。
—————–华丽的分割线————————
发现个能兼容主流浏览器的方法：见http://css9.net/css-font-face-solution/