由css撰写的日志

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, css sprites

css sprites之布局排法

May 5th

Posted by 啄米鸟 in css/(x)html

没有评论

在使用css sprites技术的时候，图案的排法是根据设计稿来设定的。
设计搞意味着你的图案如何留出所需的空隙。
如图，我们还是用网易的图片

大家可能看出了，网易这里图标之间的空隙并不是没有道理的，因为设计稿中设定了这么大的间隙。
另外，如果这里你给图标一个额外的容器来陈放，那么你也可以使用紧凑型来布局，当然这样做并不语义，而且增加了标签。

从淘宝、网易的图片可以看出，一般列表符号都放在最右侧，例如网易的新闻列表连接。

事实上一张css sprites制作的图片，四个边都是很重要的位置，特别是左右两侧，例如图案在图片的右侧，那么你的容器可以把图案放在容器左侧，右侧则可以无限延伸，反之亦然，当然这里背景是不能循环的，否则在图片左侧的图案会跑到容器上去。

这就是为什么前面看到qzone的ico图片是竖排的，因为ico右侧往往会跟上文字，这样右侧可以无限延伸的优势就可以体现出来了。

css, css sprites

css sprites基础指南(二)

May 5th

Posted by 啄米鸟 in css/(x)html

没有评论

在网页中，背景循环可分为四类:
1.横向循环
2.纵向循环
3.横纵向循环
4.不循环
一般在css sprites中，横纵向循环的背景是不存在的，更多的是使用不循环或者单向循环。
另外，在一张css sprites的拼合图片中，一般只能存在横向循环或者只能存在纵向循环，也就是说，纵向循环和横向循环在css sprites中是不能在一起出现的。

css sprites的思想很简单：
利用background获取容器背景，并在指定容器中显示，利用background-position来指定背景上的图案。
原理如图：

图片出自网易
继续阅读 »

css, css sprites

css sprites基础指南(一)

May 4th

Posted by 啄米鸟 in css/(x)html

没有评论

关于css sprites大家并不陌生，把多张小图拼凑到一张大图里，从而减少页面的http请求数，提高网站性能的一门技术。
以前有同学说，css sprites是鸡肋，因为图片是拥有缓存的，所以对性能并不会产生多大影响。
我认为当服务器是通过cdn来连接的话，那么的网页每个http请求都将通过cdn服务器来转发，这样将会增加cdn服务器的负担，相对的判断一个图片版本是否和缓存文件版本统一也是要通过cdn服务器的，当然这只是很小的一部分好处，减少HTTP请求是最直接的提高网站性能的方法之一了。
css sprites的功能显而易见，不过它的维护难度让许多同学望而生畏，当然这也是仁者见仁智者见智，不予深论。
css sprites的图片我姑且就分为三类。
一、背景型
这类图片里面大多都是背景，常常出现在页首，页尾的统一样式中，在三种类型中也最为广泛，排法也五花八门。

图片出自淘宝
继续阅读 »

css, css sprites

链接文字下划线贴住问题研究

Dec 3rd

Posted by 啄米鸟 in 前端技术

1 评论

在使用PS设计的时候，会发现给12px的文字加下划线的时候，下划线会紧紧贴在文字下面，很不美观，FW CS3以下都很漂亮的分离了这两对小冤家。
但在编写页面的时候也会出现这样的情况。
以下是测试结果：

link-line

继续阅读 »

css, 下划线贴住

滑动门真正的魅力

Nov 27th

Posted by 啄米鸟 in 前端技术

1 评论

许多人把滑动门当成tab/选项卡，认为滑动门只是简单的鼠标滑过JS切换效果，事实上滑动门是一项基于CSS的自适应技术，它的魅力远比tab/选项卡来的吸引人。

下面是滑动门的演示。

demo1

滑动门的原理：

demo2

废话不多说，直接上demo，自行领悟。

demo预览

demo打包下载

注意：这样的滑动门好处显而易见，没有无语意空标签，结构清晰，弊端则是无法透明，如果要透明加上一个空标签即可，在demo中制作tips的时候我就用到了这样的技巧。
另外，tips中如果三角在右边则这个标签不得使用float:right;浮动，在IE6中，此元素会跑到屏幕最右侧，所以我使用了定位和right:-10px;来做。

css, 滑动门

超级无敌各种浏览器css hack

Nov 16th

Posted by 啄米鸟 in 前端技术

没有评论

^?View Code CSS

.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

.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

css, css hack

IE下边框(border-bottom)消失显示不全解决方法

Nov 13th

Posted by 啄米鸟 in 前端技术

没有评论

当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; charset=utf-8" /> <title>文字的border</title> <style type="text/css"> body{font-family:Tahoma; line-height:1.5em;} span { border:1px solid red; } </style> </head> <body> <div> <span>这里是文字</span> </div> </body> </html>

提示：你可以先修改部分代码再运行。

css, 边框消失

拥有自己的css reset

Nov 12th

Posted by 啄米鸟 in 前端技术

没有评论

yui的css reset很好用，不过对于我来说显得过于臃肿，许多标签都是不常用的，加以修改就可以生成一个精简的属于自己的css reset。

先看yui的css reset

^?View Code CSS

/*归零*/
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; }
/*caption,th对齐方式为左对齐*/
caption, th { text-align:left; }
/*统一H标签文字大小,取消加粗效果*/
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }
/*取消q标签前后的引号*/
q:before, q:after { content:''; }
/*取消缩写标签的虚线下划线*/
abbr, acronym { border:0; }

既然我们要拥有自己的reset，那么应该根据自己的需求来定义。
首先我们不需要用到blockquote标签，这个标签是引用的作用，默认是会加一个margin属性，达到缩进效果，这个标签我用不到，所以去掉了。
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, th, td { margin:0; padding:0; }
继续阅读 »

css, css reset

IE6到底支持!important吗

Nov 11th

Posted by 啄米鸟 in 前端技术

没有评论

!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所认的，而分开情况的则正常

!important, css

由css撰写的日志

用户登录

链接