50个风格强烈的个人网站

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

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团队

 
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开发生涯更加轻松的工具

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

Typetester

一个在线对比字体的工具,可以很直观得看到不同字体的差异

pForm

创建HTML表单的工具,能在瞬间创建很美观的表单,并输出html代码

ColourLovers

在线的调色板工具,你能够搜索到很多配色方案或提交你的配色方案

Firebug

无所不能的firebug,不多介绍了

HTML Entity Character Lookup

HTML 实体 查询工具

960 Grid System

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

pfvyzisv.jpg

Em Calculator

EM换算器~ ,可以把像素换算成 em 单位。

Browser Shots

多浏览器截屏工具,可以提供多个平台,不同浏览器的页面截屏效果

Icon Finder

还在为找图标发愁么,一个不错的图片搜索工具。

WhatTheFont

当你图片里看到一个好看的文字而不知道字体名称时,可以用它来帮你分析字体类型

MeasureIt

firefox插件,可以在页面上显示一个尺子

ColorZilla

同样是firefox插件,可以在页面上取色,前端开发必备

Pingdom

一个在线的抓包工具

Test Everything

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

CSS Sprite Generator

样式精灵,这类工具很多了,就是把图片分割并且输出成css

Web Developer Toolbar

也是一个非常强大的web开发工具。

Domainr

域名查询工具,很方面查询域名的使用情况,并且给出未注册域名的建议。(需要翻墙)

Font Burner

字体查询工具,并且提供在线的字体解决方案。仅限英文。

Smush.It

图片优化工具,能够优化你的图片尺寸

Load Impact

可以模拟不同地区的用户访问你的站点的情况。并且以图表的情况反馈结果。

utf-8 BOM

转自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]

From: sfufoet
Sent: Thursday, April 16, 2009 7:00 AM
Subject: Boks – 可视化 Blueprint 框架 CSS 生成工具[Air]

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

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

Boks   可视化 Blueprint 框架 CSS 生成工具[Air] | 小众软件

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

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

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

小众软件下载 下载(946KB):uushare|官方网站|来自小众软件|skydrive|dropbox

延伸阅读:

相关文章

GeekCook 一个Geek商店

© sfufoet for 小众软件,2009 | 原文链接 | 0 留言 | 投稿 | 更新列表 | 热文榜!Site Meter

CSS中属性的书写顺序

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

于 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的顺序稍微调整下:

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

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

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

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

期待你的建议。

16 comments

可从此处完成的操作:

float,clear….

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

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

很形象。。

CSS的继承

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

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