web标准 – I'm kylin

50个风格强烈的个人网站

kylin — Mon, 25 Oct 2010 06:29:00 +0000

Love the Septapus & He Shall Love Unto You

Fw: 深入分析IE9的图片性能测试实例

kylin — Sun, 21 Mar 2010 14:17:00 +0000

From: puterjam

Sent: Wednesday, March 17, 2010 5:56 PM

Subject: 深入分析IE9的图片性能测试实例

微软发布了IE9的技术预览版，也放出了不少测试的实例，整体来看给大家带来一支镇定剂。不过舜子这里对其中一个演示案例很感兴趣。

我们先来看看这个实例：点击打开

最让我好奇的是chrome在这个实例中几乎是所有浏览器中最慢的，令人大跌眼镜。

深入分析了这个实例的实现，里面包含其实两部分功能会影响性能，动画的JS算法和图片的渲染。

测试单纯的动画的算法，把所有图片都block掉。测试得出的结果是，chrome处理256张图片，平均44FPS。而其他浏览器IE7(应为没装IE9,暂时用IE7测试一下)，firefox3.6，opera 10.50平均20~22 左右。这说明chrome在纯算法上都是非常有优势的。

这里动画的JS算法并不是最主要的问题了，最大的问题看来是来自对图片的渲染上。仔细看了每一张图片，每张图片都是以一个540×540包括alpha透明的浏览器logo。看来chrome在渲染大尺寸PNG的时候吃了很大的亏。期待下一个版本的chrome能修复对PNG处理的问题，毕竟这个也是主流的图片格式。

（微软故意挑战chrome的PNG图片）

这里舜子还没有针对IE9进行完整的测试。不过在同事的电脑上测试这个实例时，无疑IE9在渲染上是目前所有浏览器中最快的。而且还有D2D对图片渲染图片在放大和缩小都有抗锯齿表现。

我把这个测试实例down了下来，有兴趣的朋友可以自己测试一下

点击下载此文件

Fw: CSS 3.0 参考手册 (中文版) 来自：腾讯web团队

kylin — Sat, 26 Dec 2009 06:29:00 +0000

转自：PuterJam’s Blog

From: puterjam

Sent: Monday, August 24, 2009 12:11 PM

Subject: CSS 3.0 参考手册 (中文版)

公司的页面同学们，利用业余时间整理出了一份比较完整的CSS 3.0 参考手册，非常不容易。手册是根据W3C的CSS3草案翻译，并且结合实际的示范结合而成。每一页都倾注了每一个同学的心血。

预览页面：

下载地址： http://webteam.tencent.com/css3/

Fw: 20个让Web Developer开发生涯更加轻松的工具

kylin — Thu, 11 Jun 2009 14:22:00 +0000

From: puterjam

Sent: Thursday, June 11, 2009 10:48 AM

Subject: 20个让Web Developer开发生涯更加轻松的工具

源文: http://net.tutsplus.com/articles/web-roundups/20-tools-to-make-the-life-of-a-web-developer-easier/

简译: PuterJam

960 Grid System

960 是个神奇的数字，960 是横向尺寸，960 网格系统是能够让设计师快速创建网页原型的辅助系统。可以比喻成网页的黄金分割线

Test Everything

Test Everything 提供了很多测试工具来测试你的站点。从css html 到seo ，从网络工具到优化应有尽有。

utf-8 BOM

kylin — Mon, 11 May 2009 08:49:00 +0000

转自SAM的魔法屋

折腾了我半天

我为了省事，直接在记事本里转换程序编码 gb2312 -> utf8

然后程序一直报错

数据编码总有问题

后来查到了罪魁祸首 BOM

“php在处理BOM头的时候，有时候存在错误，可能造成你在使用 header 或 session_start 之类的函数时，出现文件已经输出的错误，多数都是因为BOM头送出去了。。因为在php看来，成了一个空格。所以使用无BOM的格式！ ”

“这就是utf-8的签名导致的问题。
UTF-8签名(UTF-8 signature)也叫做BOM(Byte Order Mark)，是UTF编码方案里用于标识编码的标准标记。如果多个文件设置了签名，在二进制流中就会包含多个UTF-8签名，而IE是无法识别多个UTF-8签名的，所以用一个空行来代替，在某些程序处理中还会出现一个类似“锘?”的字符。
”

“Unicode规范中有一个BOM的概念。BOM——Byte Order Mark，就是字节序标记。在这里找到一段关于BOM的说明：另外unicode网站的FAQ-BOM详细介绍了BOM。官方的自然权威，不过是英文的，看起来比较费劲。

UTF-8编码的文件中，BOM占三个字节。如果用记事本把一个文本文件另存为UTF-8编码方式的话，用UE打开这个文件，切换到十六进制编辑状态就可以看到开头的FFFE了。这是个标识UTF-8编码文件的好办法，软件通过BOM来识别这个文件是否是UTF-8编码，很多软件还要求读入的文件必须带BOM。可是，还是有很多软件不能识别BOM。我在研究Firefox的时候就知道，在Firefox早期的版本里，扩展是不能有BOM的，不过Firefox1.5以后的版本已经开始支持BOM了。现在又发现，PHP也不支持BOM。

PHP在设计时就没有考虑BOM的问题，也就是说他不会忽略UTF-8编码的文件开头BOM的那三个字符。由于必须在
在Bo-Blog的wiki看到，同样使用PHP的Bo-Blog也一样受到BOM的困扰。其中有提到另一个麻烦：“受COOKIE送出机制的限制，在这些文件开头已经有BOM的文件中，COOKIE无法送出（因为在COOKIE送出前PHP已经送出了文件头），所以登入和登出功能失效。一切依赖COOKIE、SESSION实现的功能全部无效。”这个应该就是Wordpress后台出现空白页面的原因了，因为任何一个被执行的文件包含了BOM，这三个字符都将被送出，导致依赖cookies和session的功能失效。

解决的办法嘛，如果只包含英文字符(或者说ASCII编码内的字符)，就把文件存成ASCII码方式吧。用UE等编辑器的话，点文件->转换->UTF-8转ASCII，或者在另存为里选择ASCII编码。如果是DOS格式的行尾符，可以用记事本打开，点另存为，选ASCII编码。如果包含中文字符的话，可以用UE的另存为功能，选择“UTF-8 无BOM”即可。”

Fw: Boks – 可视化 Blueprint 框架 CSS 生成工具[Air]

kylin — Thu, 16 Apr 2009 09:27:00 +0000

From: sfufoet

Sent: Thursday, April 16, 2009 7:00 AM

Subject: Boks – 可视化 Blueprint 框架 CSS 生成工具[Air]

Blueprint 是一个 CSS 框架，它可以让你用很整洁的代码来将页面划分成很复杂的网格结构（grid）。Blueprint 并没有提供一个可视化的工具来让你生成网格结构的 CSS 代码。

而 Boks 的出现，正好弥补了 Blueprint 没有提供可视化工具的缺憾。

在主界面的格子上拖拽，就可以轻松画出你想要的布局。在下面的面板里，都可以为每一个 DIV 设置 ID，Class 和 HTML 代码等。绘制完成之后，点击 Export 就可以导出为网页文件了。

下面提供一个官方的操作演示视频：

注意，此软件需要下载 Adobe Air，如果 Adobe 官方网站下载太慢的话，可以去华军或者天空下。

下载（946KB）：uushare|官方网站|来自小众软件|skydrive|dropbox

延伸阅读：

CSS中属性的书写顺序

kylin — Wed, 11 Mar 2009 09:47:00 +0000

YinJuan 通过 Google 阅读器发送给您的内容：

CSS中属性的书写顺序

于 09-2-20 通过岁月如歌作者：lifesinger

传说中的Mozilla推荐

 /* mozilla.org Base Styles  * maintained by fantasai  */ /* Suggested order:  
  * display 
  * list-style 
  * position
  * float
  * clear
  * width
  * height
  * margin
  * padding
  * border
  * background 
  * color
  * font
  * text-decoration 
  * text-align
  * vertical-align
  * white-space
  * other text
  * content 
  *  */ ...

来源：http://www.mozilla.org/css/base/content.css

在怿飞’s Blog的这篇文章里，又将上面的属性分成了三组：显示属性、自身属性和文本属性。在回复里，inG补充这还和浏览器的解析过程有关：浏览器先对DOM定位，然后解析自身属性，接着再解析内部对象。（没找到相关的英文资料，有知情者还望告知）

在Mozilla官方，其实并没有推荐任何CSS书写顺序。很可能是某个开发者在阅读fantasai的这篇文章 mozilla.org Markup Reference 时，顺便对fantasai的CSS源文件产生了兴趣，因此才有了上面的发现。

字母排序

NETTUTS上时不时有些好文章，这不，前不久，Trevor Davis就分享了一篇：5 Ways to Instantly Write Better CSS. 这篇文章中，推荐CSS的属性按字母排序。

优点是：简单，任何人只要遵守，一看就明白。

缺点是：太简单，缺乏逻辑性。比如position, left, top等，这种紧关联的属性，如果都按字母排序，书写和维护起来都不方便。

Andy Ford推荐的排序

Andy Ford是HTML和CSS方面的专家，最近写了一篇文章：Order of the Day: CSS Properties. 文章推荐的CSS书写顺序为：

 1. Display & Flow 
 2. Positioning
 3. Dimensions 
 4. Margins, Padding, Borders, Outline  
 5. Typographic Styles 
 6. Backgrounds 
 7. Opacity, Cursors, Generated Content

例子：

 el {  display: ;  visibility: ;  float: ;  clear: ;   position: ;  top: ;  right: ;  bottom: ;  
left: ;  z-index: ;   width: ;  min-width: ;  max-width: ;  height: ;  min-height: ;  max-height: ;
  overflow: ;   margin: ;  margin-top: ;  margin-right: ;  margin-bottom: ;  margin-left: ;   padding: ; 
 padding-top: ;  padding-right: ;  padding-bottom: ;  padding-left: ;   border: ;  border-top: ; 
 border-right: ;  border-bottom: ;  border-left: ;   border-width: ;  border-top-width: ; 
 border-right-width: ;  border-bottom-width: ;  border-left-width: ;   border-style: ;
  border-top-style: ;  border-right-style: ;  border-bottom-style: ;  border-left-style: ;  
 border-color: ;  border-top-color: ;  border-right-color: ;  border-bottom-color: ; 
 border-left-color: ;   outline: ;   list-style: ;   table-layout: ;  caption-side: ;  border-collapse: ; 
 border-spacing: ;  empty-cells: ;   font: ;  font-family: ;  font-size: ;  line-height: ;  font-weight: ;
  text-align: ;  text-indent: ;  text-transform: ;  text-decoration: ;  letter-spacing: ;  word-spacing: ; 
 white-space: ;  vertical-align: ;  color: ;   background: ;  background-color: ;  background-image: ;  
background-repeat: ;  background-position: ;   opacity: ;   cursor: ;   content: ;  quotes: ;  }

Andy的顺序大体上和fantasai推荐的顺序保持了一致，但细节上更具可操作性。

SitePoint上还有个很热烈的讨论贴：How do you order your properties within a declaration block?

我的想法

我喜欢fantasai和Andy的书写顺序，但fantasai的顺序中，”自身”属性有点含混不清，Andy的则太细，难以记住。我觉得可以借鉴CSS 2.1 Specification中对CSS属性的分类，将Andy的顺序稍微调整下：

影响文档流的属性（比如：display, position, float, clear, visibility, table-layout等）
自身盒模型的属性（比如：width, height, margin, padding, border等）
排版相关属性（比如：font, line-height, text-align, text-indent, vertical-align等等）
装饰性属性（比如：color, background, opacity, cursor等）
生成内容的属性（比如：content, list-style, quotes等）

事情永远没那么简单，比如下面这些困扰：

对于shorthand怎么处理？比如 border: 1px solid red; 其中border-width是和盒模型相关的，但border-color是装饰性的。如何组织呢？
考虑到换肤功能，是否应该将color, background, border-color等和颜色相关的都放一块？以方便以后修改。
对于hacks如何处理？单独放到css文件最后面，还是和hack的属性紧挨着好？
维护同事的css文件时，对于新增加或有修改的属性，如何注释？如何书写？
还有，考虑到CSS Sprite, 所有背景图的选择器都放在一起？不过这已经超出本文的话题了：CSS选择器内属性的顺序和组织。
更进一步的讨论是：CSS文件内的结构组织，以及多个CSS文件的组织。

任何解决方案都不能解决所有问题，但只要能解决常用的大部分问题，就已经是非常好的方案了。

期待你的建议。

16 comments

可从此处完成的操作：

使用 Google 阅读器订阅岁月如歌
开始使用 Google 阅读器，轻松地与您喜爱的所有网站保持同步更新

前端工程师应该关注什么

kylin — Tue, 24 Feb 2009 01:07:00 +0000

克军总结的“前端工程师应该关注什么”的思维导图

这张图时刻提醒自己还有很多事要做.

float,clear….

kylin — Wed, 21 Jan 2009 15:08:00 +0000

今天在一个WEB前端开发群看到一段蛮有意思话：

早上挤城铁，挤得要命，来了个猛男，大吼一声”我是display:block”的，这一行老子独占了。
几个小伙子萎萎缩缩，脑袋上写着”display:inline”,他们挤在一行，
有几个家伙吊在车箱顶部的把手上，双脚离地，脑袋上写着”float:left”
有人发现他们的脚下有空，于是人流开始移动，有些人被挤到了他们的脚下，而他们在空中。
这几个家伙大吼一声”clear:both” 于是他们脚下的人知道了。原来这地儿有主了。人流开始移动，又腾出脚下的空地来。
站在地面上的家伙们被叫做文档流。
飘起来的自然也不是神仙了，只是他们脱离了文档流。其中包括一些脑门上写着position:absolute的家伙.

很形象。。

CSS的继承

kylin — Thu, 08 Jan 2009 06:18:00 +0000

CSS的继承,简单的说就是将各个HTML标记看作一个个容器,其中被包含的小容器会继承所包含它的大容器的风格样式.

下面的这个图是一个简单的HTML文档,以各个标记之间的”树”型结构来看,在每个分支中,称上层标记为其下层标记的”父”标记,相应的,下层标记称上层标记的”子”标记.

web标准 – I'm kylin

50个风格强烈的个人网站

转自：绿豆晶

Fw: 深入分析IE9的图片性能测试实例

Fw: CSS 3.0 参考手册 (中文版) 来自：腾讯web团队

下载地址： http://webteam.tencent.com/css3/

Fw: 20个让Web Developer开发生涯更加轻松的工具

utf-8 BOM

Fw: Boks – 可视化 Blueprint 框架 CSS 生成工具[Air]

相关文章

CSS中属性的书写顺序

YinJuan 通过 Google 阅读器发送给您的内容：

传说中的Mozilla推荐

字母排序

Andy Ford推荐的排序

我的想法

可从此处完成的操作：

前端工程师应该关注什么

float,clear….

CSS的继承