Heluyao's Blog » html/css/xml/xsl

笔记：网站性能优化——优化Sprite

heluyao — Sun, 31 Jul 2011 15:00:16 +0000

1.按颜色合并，将颜色调色板相近的图标组合在一起。
2.避免不必要的空白(通常我会留出1px的距离)。
3.水平排列，而不是垂直。
4.将保存为png8格式。
5.先优化一遍图像，再合并成sprite。
6.通过控制大小和对齐减少反锯齿像素的数量。
7.避免使用对角线渐变，无法被平铺。
8.最好避免在ie6下中使用alpha透明图像，若一定要用就保存在单独的sprite中。
9.使用马赛克式的渐变。
10.要特别注意logo的质量。

笔记：网站性能优化——图像优化

heluyao — Sat, 30 Jul 2011 13:12:43 +0000

优化PNG格式的图像

推荐工具：Pngcrush(http://pmt.sourceforge.net/pngcrush/)

其他工具：PNGOUT,OptiPNG,PngOptimizer

剥离JPEG的元数据

什么是元数据？

1.注释。

2.应用程序定义的内部信息（如photoshop）。

3.EXIF信息。

工具：jpegtran(http://jpegclub.org)

将gif转换成png

如果gif图像中不包含动画，那就转换到png。转换后还要记得用Pngcrush优化哦！

优化GIF动画

工具：Gifsicle(http://www.lcdf.org/gifsicle/)

在线优化图像——Smush.it

前面提到的事情它都能胜任，只是在JPEG上为了保留版权信息没有剥离元数据。

使用渐进JPEG格式来储存大图像

这个能让图像在浏览器中逐步进行渲染。要注意的是文件比较大时才考虑使用该方法。

避免使用AlphaImageLoader

增加了代码的维护成本，还会造成直接的性能损耗。替代方案是使用VML或者采用渐进增强思维。

避免对图像进行缩放

比如将一张400×400的图缩放至200×200。缺点是既降低了图片质量又增大了下载量。

不要忘了favicons和Apple触摸图标

让文件更小且被缓存。

IE6正在消亡

heluyao — Tue, 05 Apr 2011 09:29:35 +0000

http://ie6countdown.com/

IE6在欧美地区已经消失得差不多了，现在重症区是亚洲，中国肯定是排在第一名的，呵呵~！好在还有韩国作陪，再下面就是印度、日本了。最厉害的还是芬兰和挪威，都是小于1个芭仙！

期待着IE6早日“灭绝”，也好给我们这群写代码的省点时间，提高点编码效率！

css中设置微软雅黑

heluyao — Wed, 23 Mar 2011 02:39:28 +0000

笔记一下，我是这样在css中设置文本字体为“微软雅黑”的。

.selector {font-family:"Microsoft YaHei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu}

之所以加上中文名“微软雅黑”是为了兼容opera。Microsoft JhengHei为微软正黑体，STHeiti为华文黑体，MingLiu记得11px下的中文有着不凡的效果。

固定盒子宽高水平及垂直居中的整理

heluyao — Fri, 04 Mar 2011 05:59:02 +0000

记得就一句话是这样说的：table能实现的，css一定能实现；css实现的，table未必能实现。水平和垂直的居中，其实不是什么难事，前提是弄懂了各个浏览器的兼容性以及应对这些兼容问题的css hack。

方法一

html

css

.demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; text-align:center;}
.demo1 img { vertical-align:middle;}

PS：利用行高等于盒子高度实现高级浏览器，IE6/7的hack font-size等于盒子height乘以差不多0.873的数值，参看：怿飞：图片垂直居中的使用技巧。

方法二

html

css

.demo2 { width:180px; height:180px; display:table-cell; vertical-align:middle; *font-size:160px; border:1px solid #ddd; text-align:center;}
.demo2 img { vertical-align:middle;}

PS：font-size同上等于盒子height乘以差不多0.873的数值，IE7以上版本及其他高级浏览器均支持display的table-cell。

方法三

html

css

.demo3 { display:table; position:relative; text-align:center; height:180px; width:180px; border:1px solid #ddd;}
.demo3_inner { display:table-cell; vertical-align:middle; position:absolute; top:50%;
.demo3_inner img { position:relative; top:-50%; left:-50%;}
.demo3 > .demo3_inner { position:static;}
.demo3 > .demo3_inner > img { position:static;}

PS:相对定位加绝对定位实现IE6/7，display的table-cell实现高级浏览器。

如果要放文字

html

<div class="demo4"><div class="demo4_inner"><p>如果是文本,需要添加一标签来实现，我这里添加的是p。p>div>div>

css

.demo4 { display:table; position:relative; height:180px; width:180px; border:1px solid #ddd; text-align:center;}
.demo4_inner { display:table-cell; vertical-align:middle; position:absolute; top:50%;}
.demo4_inner p { position:relative; top:-50%; left:-50%;}
.demo4 >/**/ .demo4_inner { position:static;}
.demo4 >/**/ .demo4_inner > p { position:static;}

演示代码：http://www.11gz.com/demo/html/vertically.html

我测试过的且兼容的浏览器有：IE6+,Opera,Firefox,Safari,chrome，希望各位朋友帮忙测试其他浏览器。

淘宝首页开始使用HTML5

heluyao — Thu, 20 Jan 2011 09:34:58 +0000

2011，淘宝首页又改版了，值得称道是使用了HTML5，淘宝的开发团队在前端技术上始终是走在国内最前沿。

说到HTML5，最大的问题还是IE6/7/8的保护，他们使用了Remy Sharp的IE Print Protector办法。可以在head看到代码：

如果IE6/7/8用户禁用了js呢？淘宝的办法有两个：

根据向导启用js；
让用户进入HTML4页面。

下面代码处理：

......

最后还要记得CSS中设置文档中使用到的新标签display属性为block。

section,article,aside,header,footer,nav,dialog,figure{
display:block;
}

开发实践：http://www.slideshare.net/lijing00333/2011-6516501

纯css实现圆角带箭头的提示框效果(非css3)

heluyao — Fri, 30 Apr 2010 09:24:27 +0000

实现效果如下图：

这个方法并非我创，我也是以前在网上看到，记下了原理。今天有时间了，整理思路，写出代码！原文我不记得地址了，只记得原作者是google的前端工程师，方法很赞，尽管多了四个空标签(如果不要三角箭头，就只多了外层嵌套的两个标签)。

一般我处理圆角效果，都是弄一张图片，里面放4个角(或更多颜色的角)，利用浮动、相对定位再配合负margin来实现，也要多写空标签，而且是两对嵌套的标签(共4个)。这个方法固然好，毕竟用图片嘛，更美观，锐化效果要好。现在这个方法不用图片，从优化的角度分析，纯css不是更好吗！不过弊端还是有，只适合半径1-2像素的圆角，大了锯齿就出来啦～

.rc_box1,.rc_box2,.rc_box3 { display:inline-block; *display:inline; *zoom:1; position:relative; border-style:solid; border-color:#ddd;}
.rc_box2,.rc_box3 { border-width:0 1px; *left:-2px; background-color:#f3f3f3;}
.rc_box1 { border-width:1px; line-height:1.5;}
.rc_box2 { margin:0 -2px;}
.rc_box3 { margin:1px -2px; padding:0 6px;}
.ov1,.ov2 { position:absolute; left:44%; overflow:hidden; width:0; height:0; border-left:6px dotted transparent; border-right:6px dotted transparent;border-top:6px solid transparent;}
.ov1 { top:26px; border-top-color:#ddd;}
.ov2 { top:25px; border-top-color:#f3f3f3;}

如果需要实现多种颜色，那么可以将定义颜色的样式属性抽出来，单独弄一个类，比如灰色，新建个gary类，放在最外层标签上，控制好颜色。想实现几种就建几种。代码如下：

第一个div添加gray这个类：

以下css添加至样式表最后一行，再将前面控制颜色的属性删掉：

.gray,.gray .rc_box2,.gray .rc_box3 {border-color:#ddd;}
.gray .rc_box2,.gray .rc_box3 { background-color:#f3f3f3;}
.gray .ov1 { border-top-color:#ddd;}
.gray .ov2 { border-top-color:#f3f3f3;}

有序+发布时间+字数限制的新闻列表

heluyao — Fri, 30 Apr 2010 04:14:18 +0000

接手新项目，要写一个如上图的东西，简单做个说明：外层盒子固定宽度，文章标题字数超出即隐藏，并实现省略号(支持的浏览器)，日期位置跟随标题宽度。

难度不大，关键要了解各浏览器的特性。这个东西难点就在于时间元素上，我利用float+负margin来解决，兼容性也好，遗憾的是hack没少用，实属无奈啊！-_-!

下面贴出代码：

<div id="demo">
<ol class="clearfix">
   <li><a href="#@">方大同5月8日广州开唱不秀粤语最想和蔡琴合作a><span>2008-03-14span>li>
   <li><a href="#@">麻城杜鹃开的艳　奶茶歌声唱的亮a><span>2008-03-14span>li>
   <li><a href="#@">5月2日变形金刚助阵五月天a><span>2008-03-14span>li>
   <li><a href="#@">方大同5月8日广州开唱a><span>2008-03-14span>li>
   <li><a href="#@">刘若英上海个唱即将开演设计独特处处有看点a><span>2008-03-14span>li>
   <li><a href="#@">五月天玛莎低调避庆生a><span>2008-03-14span>li>
   <li><a href="#@">4月24日五月天厦门演唱会凛凛寒风激情不a><span>2008-03-14span>li>
   <li><a href="#@">任贤齐群星NOW翻成都小齐家族两次登台a><span>2008-03-14span>li>
   <li><a href="#@">周华健与群星NOW翻成都a><span>2008-03-14span>li>
   <li><a href="#@">刘若英《在一起》发片首周成绩亮眼a><span>2008-03-14span>li>
ol>
div>

#demo { font:12px/1.5 Arial;}
#demo ol { padding-left:23px; width:14em; background:url(num.gif) no-repeat 2px 6px;}
#demo li { clear:both; line-height:23px;}
#demo li a { float:left; _height:23px; _background:transparent; overflow:hidden; white-space:nowrap; _white-space:normal; max-width:14em; -o-text-overflow:ellipsis; text-overflow:ellipsis;}
#demo li span { float:left; _display:inline; _position:relative; width:70px; padding-left:10px; margin-right:-80px; font-size:11px; color:#999;}

css第4行， _background:transparent 解决IE6下“莫名”行高问题。

css第5行， _position:relative 解决IE6下该元素随外层宽度溢出隐藏。

css reset这里未提供，需自行添加。

用到图片一张：num.gif 打开后右键另存为！

html5 forms

heluyao — Mon, 12 Apr 2010 03:24:33 +0000

预览demo：html5 forms demo

必填项

很简单，添加属性 required

输入框自动获取焦点

载入页面后，第一个NAME的输入框自动获取焦点。添加属性 autofocus

文本框的输入提示

一直以来都是利用javascript的onblur、onfocus来实现一个输入框的提示信息，现在只需要添加属性 placeholder="要提示的内容"

表单验证功能

将输入框的type设置为email，即可验证是否正确的邮箱地址。

有趣的input type=”range”

可拖动的滑块，可设置一个最小值(min)和一个最大值(max)，还可以设置每拖动一格数字变动的步长(step)。配合output实现当前值的显示。

output写法：

<output name="result" onforminput="value=a.value" >0output>

input type=”number”

点击上下箭头按钮实现数字的加减操作。与“可拖动的滑块”类似，可设置最小值、最大值、步长。

输入框下拉提示

可自行输入，也可以直接下拉选择。

<input id="search" type="url" list="searchlist" />
<datalist id="searchlist">
   <option value="http://www.google.com" label="Google" />
   <option value="http://www.yahoo.com" label="Yahoo" />
   <option value="http://www.bing.com" label="Bing" />
   <option value="http://www.baidu.com" label="Baidu" />
datalist>

日期选择

不需要任何脚本的支持即可实现日历控件。

It’s Beautiful

heluyao — Mon, 29 Mar 2010 06:58:15 +0000

点击图片查看大图

Heluyao's Blog » html/css/xml/xsl

笔记：网站性能优化—​—优化Sprite

笔记：网站性能优化——图像优化

优化PNG格式的图像

剥离JPEG的元数据

将gif转换成png

优化GIF动画

在线优化图像——Smush.it

使用渐进JPEG格式来储存大图像

避免使用AlphaImageLoader

避免对图像进行缩放

不要忘了favicons和Apple触摸图标

IE6正在消亡

css中设置微软雅黑

固定盒子宽高水平及垂直居中的整理

方法一

方法二

方法三

如果要放文字

淘宝首页开始使用HTML5

纯css实现圆角带箭头的提示框效果(非css3)

有序+发布时间+字数限制的新闻列表

html5 forms

必填项

输入框自动获取焦点

文本框的输入提示

表单验证功能

有趣的input type=”range”

input type=”number”

输入框下拉提示

日期选择

It’s Beautiful

笔记：网站性能优化——优化Sprite