css/(x)html
css sprites之img sprites
May 5th
最先听到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之布局排法
May 5th
在使用css sprites技术的时候，图案的排法是根据设计稿来设定的。
设计搞意味着你的图案如何留出所需的空隙。
如图，我们还是用网易的图片
大家可能看出了，网易这里图标之间的空隙并不是没有道理的，因为设计稿中设定了这么大的间隙。
另外，如果这里你给图标一个额外的容器来陈放，那么你也可以使用紧凑型来布局，当然这样做并不语义，而且增加了标签。
从淘宝、网易的图片可以看出，一般列表符号都放在最右侧，例如网易的新闻列表连接。
事实上一张css sprites制作的图片，四个边都是很重要的位置，特别是左右两侧，例如图案在图片的右侧，那么你的容器可以把图案放在容器左侧，右侧则可以无限延伸，反之亦然，当然这里背景是不能循环的，否则在图片左侧的图案会跑到容器上去。
这就是为什么前面看到qzone的ico图片是竖排的，因为ico右侧往往会跟上文字，这样右侧可以无限延伸的优势就可以体现出来了。
css sprites基础指南(二)
May 5th
在网页中，背景循环可分为四类:
1.横向循环
2.纵向循环
3.横纵向循环
4.不循环
一般在css sprites中，横纵向循环的背景是不存在的，更多的是使用不循环或者单向循环。
另外，在一张css sprites的拼合图片中，一般只能存在横向循环或者只能存在纵向循环，也就是说，纵向循环和横向循环在css sprites中是不能在一起出现的。
css sprites的思想很简单：
利用background获取容器背景，并在指定容器中显示，利用background-position来指定背景上的图案。
原理如图：
图片出自网易
继续阅读 »
css sprites基础指南(一)
May 4th
关于css sprites大家并不陌生，把多张小图拼凑到一张大图里，从而减少页面的http请求数，提高网站性能的一门技术。
以前有同学说，css sprites是鸡肋，因为图片是拥有缓存的，所以对性能并不会产生多大影响。
我认为当服务器是通过cdn来连接的话，那么的网页每个http请求都将通过cdn服务器来转发，这样将会增加cdn服务器的负担，相对的判断一个图片版本是否和缓存文件版本统一也是要通过cdn服务器的，当然这只是很小的一部分好处，减少HTTP请求是最直接的提高网站性能的方法之一了。
css sprites的功能显而易见，不过它的维护难度让许多同学望而生畏，当然这也是仁者见仁智者见智，不予深论。
css sprites的图片我姑且就分为三类。
一、背景型
这类图片里面大多都是背景，常常出现在页首，页尾的统一样式中，在三种类型中也最为广泛，排法也五花八门。
图片出自淘宝
继续阅读 »
一些新手常犯的CSS误区
Feb 3rd
1.居中写入text-algin:center;然后在内部容器再设置text-algin:left;
这个方法我在禅意花园中见过，作者明确了这个方法是作为解决IE5.5的居中问题而存在的，但现在IE5.5的占有率几乎没有，更何况你能确保你的网站在IE5.5下能正常浏览么？如果你是保守的，那加上吧，不过你必须测试IE5.5，否则会有种画蛇添足的感觉。
2.body中写入width:xxxpx; margin:0 auto;居中。
这样写，可能是为了减少嵌套，写在BODY中让页面居中，但弊端仍旧很大，有些情况下，需求会在页面上端或者下端加入通栏的工具栏（例如Qzone），如果在body中设定了宽度，那么在IE6中通栏的width:100%会只有你设置的宽度那么宽。
3.在css reset的body,input,ul,等标签集中写入字体
在这里写入字体大小，那么它将全局定义这些标签，也就是说，当你想定义一个title中的文字大小，那么你必须顾及到title h3{} title span{}等，必须写全，而写在title中的继承权限是没有reset中定义标签权限高的。
4.在css reset的body,input,ul,等标签集中写入border:0
虽然在img中使用了border:0可以使它在连接中没有边框，而在input中设置了border:0，那么，默认button会从一个按钮变成一个平板，text会没有border ，这些重设都是弊大于利的。
google使用的png-8 alpha透明
Jan 4th
今天是牛顿的诞辰，google特意做了个苹果掉下来的动画。
这个苹果是透明的，而且带有alpha透明，不过在IE6下带有毛边，显然是使用了FW的png-8 alpha透明导出模式。
就此保存下来，的确有些地方可以无视IE6的这么点毛边了。
查看demo:http://blog.dmtuan.com/demo/google_png8/Google.htm
CSS+(x)html从初学者到职业人的脱变
Dec 18th
我总结了下，在书写css+(x)html中，从门外汉到初学者要经过三个过程。
1.能脱离DreamWeaver设计视图，手写代码。(无视浏览器兼容，HTML无语意)
2.使用hack兼容各浏览器（HTML无语意）。
3.精通web标准，精通各浏览器之间的差异，书写符合标准的HTML，尽量避免hack的使用（PS:我一般只写IE6的hack并且是它的缺陷造成的问题 例如：PNG、最小高度/宽度）。
能达到第三点，恭喜你，你已经成为了一个初学者，你能书写一个完整且标准、兼容的html。
但以上远远不够。
想要作为合格的webrebuilder职业人，你必须要有一个脱变的大脑，为自己写的每一行代码负责，在看到效果图的时候就应该明白，什么地方是可以重用的，什么地方应该做等高特效，什么地方需要扩展，而不是仅仅实现效果图的样子就完事了。
我总结了以下几点：
1.效率的页面。
初学者在切页面的时候并没有考虑页面效率。在压缩页面图片大小的同时，Yslow也提出了一系列要注意的优化方案。
这里需要注意几点：
·图片优化，在图片优化中，单一背景用png-8，照片类用jpge，要学会锻炼如何判断图片该如何压缩的能力。
·减少http请求，背景使用css sprites做成一张图片，这样能减少巨大的请求量，但对于如何合理的布局，划分类型这里要走的路还很长。
·把script放在页面尾部，懂得表现与逻辑分离，html文档中不能存在类似sltyle=,onclick=这样的语句，所有事件都使用侦听来做，这样能让内容更快的出现在用户面前，同时更利于维护。
2.周全的考虑。
昨天在CSS群里出了道简单的图文混排的题目，却发现许多人都没有考虑到位，一个简单题目就可以看出他的经验了。
题目如下：
起先我并没有说需求，但几乎所有人都只是简单的进行浮动，定宽。
这个题目考点在于，表现的扩展。
这个图文混排类似评论模块。
一个好的CSS应该达到以下效果：
1.右侧文字自适应宽度，宽度由祖先级宽度制定。
2.左侧的图片应考虑到没有图片的情况、图片缩小的情况。
3.解决长字符英文串不换行的问题。
达到以上三点才是这题的满分卷。
许多人都在IE6的3PX bug中踩了陷阱，（图片右侧的文字和下面的文字没有对齐）。
这里放我的答案，请先自己练习一遍再看答案。
提示：你可以先修改部分代码再运行。