CSS通用元素选择器的都市流言

本文尚未有测试数据支持,以下结论仅是根据现有情况的一种解释。

关于 * 这个选择器,一直有个疑惑,到底是否影响效率。在先前的观念中,这由于要匹配所有的元素,让每一个元素都带上这个属性,所以会影响页面的效率。但近来的思考,觉得这应该不会影响效率。为此还特地写过一篇博文,里边提到了这点:真的还需要reset.css么?

而这篇文章中我打算着重阐述为何 * 这个选择器不会影响效率。

上周六去参加了 web标准化交流会,席间 winter 从浏览器(webkit)的角度分享了关于页面渲染的过程。其PPT也可以在前面的链接中下载到。

其中一个很重要的过程是,当页面载入过程中,CSS 和 HTML 是并行下载的。并且通常CSS是在HEAD中引入的,并且体积不如HTML大,所以CSS会先下载完。下载的过程中浏览器就已经开始对CSS中的规则进行索引,也就是已经确定哪一个元素呈现的样式是如何的了。同时,浏览器根据HTML构建出的DOM树,其中的每一个元素会直接去CSS规则索引中去比对,构建出渲染树。这个过程都是并行的,并且CSS规则是进行了索引的,因此速度非常的快速。

那么我们看看CSS规则的来源主要有2个,一是浏览器内置的元素样式,Firefox 3.x版是放在目录下的res文件夹内,4.0版和Chrome中没找到(这里是我的主观臆断不太可靠,大家自行辨别),另一个就是页面提供的。根据查看 放在 res 文件夹下的 CSS 文件就可以得知,就是是什么样式都不写,已经为每一个HTML元素设定好了基本样式了。

那么看看我们所忌讳的事情,不用*{margin:0;padding:0},而是使用

  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, font, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. b, u, i, center,
  7. dl, dt, dd, ol, ul, li,
  8. fieldset, form, label, legend,
  9. table, caption, tbody, tfoot, thead, tr, th, td {
  10.     margin: 0;
  11.     padding: 0;
  12. }

看看这一大坨东西啊,难道不是跟上面的 * 选择器一个用途么?对每个元素(至少是常用元素),添加样式。其实作用是一样的,并且就算没有这一坨,浏览器内置样式也在对每个元素设置样式。之后 HTML 文件中的每一个元素,可以很容易找到自己应当呈现的样式了。

那么,对于之后添加的,会不会有性能影响呢?也不会,由于CSS规则已经确定并索引了,所以今后增加的元素也不过就是简单比对一下而已,不会多走一步的。

所以,由此得出结论,只要有需要,大胆的使用 * 吧,他不会给你从性能上增加额外的麻烦。

最后补两个前端优化小知识:
1,由于CSS规则和HTML是并行载入的,因此把CSS放在HEAD中是非常有必要的。
2,少使用 :last-child 。因为这个选择器无法索引起来,必须等DOM构件完,才能知道他是不是父元素中最后的那个 元素。这种就非常慢了,慎用。

jQuery.delay()方法简介

之所以说简介,就是因为这个方法真的很简单。这个方法从 jQuery 1.4 开始加入进来。中文文档中也早就有了,但是悄悄的添加进去的,很不起眼,不容易引起人的关注。

两年前写过一篇文章,介绍一个叫wait的插件,而在 jQuery 1.4中就把这个插件吸收进去了,成为了核心API了。

用法很简单,直接使用

$(‘#foo’).slideUp(300).delay(800).fadeIn(400);

这样的一句话,就可以在两次动画之间间隔800毫秒了。非常方便。

他除了可以控制动画之外,还能控制自定义队列:

delay(duration, [queueName])

第二个参数就是设置队列名的,如果不填,默认就是动画队列 fx。

介绍完啦,非常简单把?如果有兴趣,可以看看jQuery.delay()文档,以及jQuery中queue和dequeue的用法,或者看看如何自己写个控制队列来了解基本原理。

这些不是HTML5?

今天无意中翻到MDC上关于HTML5的介绍,里边发现了一节:

Technologies often called part of HTML5 that aren’t
经常被误认为是HTML5一部分的技术

列出了下面一堆:

  • WebGL
  • FileReader
  • XMLHttpRequest
  • querySelector(All)
  • Geolocation
  • ECMAScript5
  • CSS3
  • XBL2
  • Web Workers
  • Web Sockets
  • Faster JavaScript

其中CSS3确实不是HTML5,我不吃惊。Faster JavaScript本来就跟HTML5没啥关系。
我吃惊的是,居然querySelector(All)、Geolocation、Web Worders和Web Sockets也不算HTML5,我崩溃了。
那个Google 推广的 html5rocks.com上面搞错了?还是怎么了?

然后我查了一下 w3 的HTML5 Spec,果然真的没有。

不过,不管怎么说,这些技术是确确实实存在着,并且有些当属w3的其他spec中,各大浏览器厂商也在有条不紊的实现着。所以也可以像CSS3那样坦然面对,该来的会来的,期待一个时代的来临吧。

Update:
但是,上面那个HTML5 Spec里,看到最后 Reference里,可以找到
http://dev.w3.org/html5/workers/
http://dev.w3.org/html5/websockets/
可以说,最新的w3认为这些技术属于HTML5的。所以说这东西还是在不停发展的,对于MDC的内容,也不必太过惊慌,让他去吧。该来的,总会来的。

修改 firefox accesskey 的快捷键

Chrome中,如果设置了 accesskey 的话,可以通过 Alt + 快捷键 来之直接跳转的。
但在Firefox 中,可能是为了防止于菜单的快捷键冲突,所以设置了 Shift + Alt + 快捷键
这样给实际使用造成了一定的麻烦。我用Dabr的时候极其困扰。

查了一下,修改 about:config 中 ui.key.contentAccess 值,改成 4 就行了
其他几个数据分别是

0
禁止所有的快捷键

1
使用 Shift + 快捷键

2
使用 Ctrl + 快捷键 (OS X里默认)

4
使用 Alt + 快捷键

8
使用 Meta +快捷键

其他值
如果把上面几个数字相加,就可以合并他们的效果。比如设置成3(1+2)就意味着需要按 Ctrl + Shift +快捷键。而设置成5(1+4)就意味着按 Alt + Shift + 快捷键。
在Windows 和 Linux 中,这个值默认就是5

参考来源: http://kb.mozillazine.org/Ui.key.contentAccess

快速更新Chromium

最近觉得Chrome Dev用的不爽,开始用Chromium了。自动更新是个问题。每天都有好几个Nightly版,总是下载更新很烦人。他又不会自己更新。折腾了一下,写个批处理文件,结合着wget和unzip,搞定。每隔几天运行一下,就可以下载最新编译版了。
唯一的限制条件是,这个Chromium必须放在名为chrome-win32的目录中,不过也无所谓了。够用了。
把下面的代码保存成 bat 文件,放在chrome-win32中。同时下载个wgetunzip。我系统里莫名的自带了,不知道是哪个软件里带进来的。
这方面想想还是mac下或者linux下比较爽。windows这种东西的缺失非常的傻X

直接使用下面的批处理就可以自动下载并安装最新的Chromium了,就算以前没装过也行。

  1. @echo off
  2. del chrome-win32.zip
  3. wget http://build.chromium.org/f/chromium/snapshots/Win/LATEST
  4. set/p=wget http://build.chromium.org/f/chromium/snapshots/Win/<nul>tmp.bat
  5. type LATEST>>tmp.bat
  6. echo /chrome-win32.zip>>tmp.bat
  7. del LATEST
  8. call tmp.bat
  9. del tmp.bat
  10. taskkill /F /IM chrome.exe > nul
  11. ping 127.0.0.1
  12. unzip -o chrome-win32.zip  -d ../
  13. pause

CSS3中动画效果的应用

不少人都已经在用CSS3中的动画了,但很多仅仅用在 某个元素的 hover上
其实,配合脚本的话,可以做到更多的动画效果,并且可以在很大程度上抛弃各种动画库。

先前一博客《用HTML5代替PPT》中,
我的各种动画效果就完全使用了CSS3的动画效果而不再使用jQuery的动画了。
点击查看展示

设置CSS

  1. *{
  2.     -webkit-transition-duration:.15s;
  3.     -moz-transition-duration:.15s;
  4.     transition-duration:.15s;
  5.     -webkit-transition-timing-function:ease-out;
  6.     -moz-transition-timing-function:ease-out;
  7.     transition-timing-function:ease-out;
  8. }

也就是设置了所有动画效果的持续时间为150毫秒,以及动画效果的样式为ease-out。

关于时间

根据我自己亲身实践,我能接受的动画效果时间是在150毫秒附近,
再短觉得一闪而过,再长我就觉得拖沓冗余。
这个150毫秒仅仅是经验参数,没有任何科学依据
仅供各位参考。

但是这个也有例外,比如例子中幻灯片的翻页过程,
由于幻灯片比较大,翻页过程如果时间太短,效果也不好
所以对于这种几乎整个页面变化的情况,我设置了动画时长为300毫秒
比通常的翻了一倍。甚至到400毫秒也没觉得冗长。

所以一般对于面积较小的元素,动画效果维持在150毫秒左右
面积较大的动画,适当延长时间。

关于效果

动画效果我个人最喜欢ease-out,最不拖沓,有动感。
其他效果看着总觉得恶心。
比如linear看起来就很死板,而ease-in又感觉不伦不类。

关于是否使用*选择器

这个我已经另写博客阐述观点 真的还需要reset.css么?

关于动画

这是针对所有元素的任何的CSS变动都会产生动画,
包括背景色,边框色,宽度高度,内外边距的变化等等等等。
实际上光颜色的动画改变就已经比jQuery默认效果强了,
jQuery如果要实现颜色动画需要附加一个插件 jQuery Color

脚本产生动画

不仅仅是hover伪类其效果,
任何通过脚本改变元素的CSS参数都会产生动画。

为此,我在页面脚本一开始就加入

  1. var page=window.location.hash.replace("#slide-","")||1;
  2. $("#slides").css({"margin-top":(1080*(1-page))});

这段代码的作用就是通过地址栏的hash,来改变幻灯片的页数。
你可以尝试访问这个页面,注意地址最后的hash部分:
http://shawphy.github.com/share/2010/presentation.html#slide-2
这个地址会直接把你带到第2页。

可以看到,代码中仅仅是设置了元素CSS的margin-top值,本身并没有动画
而由于先前的CSS设置,通过js改变margin-top值也会有动画效果
这种原生动画效果我不确定是不是会比js产生的效率高
我个人感觉在Firefox 4下动画效果很不流畅,但Chrome 下很流畅。

因此一定程度上,未来可以放弃脚本库中的动画了。
或者,甚至脚本库中也会运动CSS动画来实现功能。

缺点

不提供回调函数,不能按照顺序执行
又要使用大量setTimeout了,并非完全好主意。
小骆驼商队 补充说,很繁琐,每次都要用私有的前缀,我深表苟同……

参考文献

你需要知道的CSS3 动画技术

真的还需要reset.css么?

我博客浏览量靠前的一直是《打造自己的reset.css》,
然而,我对此的观点也已经有所改变,
所以,我觉得是时候写一篇博客阐述一下目前我的理解了。
注意,这是篇激进的博文,其观点并不客观中立,仅仅表示出我目前的想法。

是否使用*{margin:0;padding:0}

实际上,我现在根本不避讳*{margin:0;padding:0}这种写法了。
我从未看到过真正有关于这个对性能有影响的报告
也不觉得下面Eric的重置样式比起这玩意有多高明之处

  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, font, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. b, u, i, center,
  7. dl, dt, dd, ol, ul, li,
  8. fieldset, form, label, legend,
  9. table, caption, tbody, tfoot, thead, tr, th, td {
  10.     margin: 0;
  11.     padding: 0;
  12.     border: 0;
  13.     outline: 0;
  14.     font-size: 100%;
  15.     vertical-align: baseline;
  16.     background: transparent;
  17. }

上面的代码波及面一样很大,难道就不造成性能问题了?
到写具体元素样式代码的时候就不会因此受到reset.css的影响了?
扯淡!
现在回过头来看去年3月写的那篇博客《打造自己的reset.css》,
觉得有些想法是人云亦云,有些想法过于幼稚了。
另外找到了一篇博文支持我这种看法,可以看看
关于CSS RESET,关于*{margin:0;padding:0}

其他表现不同的元素

除此padding和margin之外,如果一个元素在不同浏览器内表现显著不同,
那何不直接在用到的那个页面写css呢?
何必为了少数元素的表现,写到全局的reset中呢?
实际上随着IE6的逐渐老去,这种差异已经越来越小了
而我们关心的依然是主流浏览器,IE6,IE7和IE8,这3个是绝对主流,
以及我们自己会用的Firefox和Chrome或者其他
那么只要这几个主流浏览器测试下来没问题,就没问题了,
有必要花成本关心其他更小众的浏览器么?

另外,我们实际中也很少对页面设计需要对任何元素精确到像素级的还原,
只要整体表现得当,个别元素的出格(更多的是跟操作系统有关)无伤大雅。
实际上我就没看到有人非得把表单按钮重置到让mac系统下的样子跟win下一样。

原汁原味的元素

很多元素浏览器默认样式就都一样(至少大致差不离),并且都很不错
比如 ins 和 del 这种,还有 strong 以及 em 这类。
默认样式不好么?如果到头来也不过就是让strong变成粗体,em变成斜体
那还不如不要重置呢。
如果有自己的想法呢,希望全局都一样呢?不如写 global.css 吧!

reset.css VS global.css

是的,很多网站都要追求全局的一些样式的统一,
为此要用reset.css重置一下,然后再用global.css来定义全局样式。
那我说,为何不直接用global.css取代reset.css的功能?
一样要定义,何不一步到位?
先重置,再定义,难道是带宽富余的没处用了?

举例来说,上面提到的 strong 和 em 元素。
如果希望全局都是加粗的斜体的,个别地方有其他样式,那自然无需重置样式
而如果全局都不要加粗斜体,有统一特殊的强调样式,那简单,直接在global.css里写就好了。
如果全局都不要加粗斜体,但不同地方有不同样式,那也简单,
在global.css写入重置样式,都变成正常字体即可,这就是取代了reset.css的功能了。

于是乎,目前我的观点是:reset.css这种先重置再定义的模式可以放弃了,一步到位,根据不同网站的特点编写不同的global.css,效果会更好。
所以,我很支持 No CSS Reset

用HTML5代替PPT

如果你是前端,如果你要分享。
是不是觉得PPT很难用?
是不是觉得用PPT很不能体现你的身份价值?

本人虽然不是全职前端,但也算半个前端,
也有这样的想法,最近就自己弄了一个。

实现了如下功能:
空格翻页(展示的时候空格是最容易按,也最不容易按错、多按,虚按的。)
滚轮翻页(分享给网上朋友的时候,滚轮才是最方便的)
目录(因为我课件展示的屏幕是宽屏,太长,所以边上留有目录)
点击目录可以跳转(同样是给网上看网页的朋友准备的)
页数(展示时候用)
点开带hash的url可以直接跳转到某一页(便于分享特定页)
自适应用户分辨率
一页之内逐步显示内容
当前页在目录上高亮

Chrome下动画效果比较好,Firefox下有点卡。(其实是非常卡!)
推荐用这两个浏览器查看: 展示页面

制作的时候正巧玉伯分享了他的分享
这个是源自于 google 推广的 HTML5Rocks(需翻墙,项目地址不需要翻墙)
我也借势参考了一些想法,比如url的hash定位,以及部分CSS写法。
当然,我自认为应该比那个好看一点吧,呵呵。
(后来我想想,这个风格应该是潜意识中受到了Flex的影响吧)

bitbucket和github的简单比较

我本身比较偏爱Python,以及用Python所写的分布式版本控制工具 Hg
曾经的Git让我倍感挫折。
好在现如今已经有了 TortoiseHgTortoiseGit
对于那些熟悉乌龟 svn 的人来说是个福音。

先前由于比较熟悉hg,所以一直用 Hg 界内流行的代码托管网站 bitbucket.org
最近又重新体验了一把(去年体验过,倍感受挫) Git 界流行的 github.com,感觉很是舒爽。
于是简单的对比了两个网站。
这两个网站有很重要的特点,是社区化。
你可以follow你所关注的人和项目。这点让人觉得很有趣。
虽然 Google Code 也已经支持 Hg 代码托管,然而显得严谨了,
所以我没使用过hg版,只用过svn,故不参与比较。

bitbucket 和 github 的比较
bitbucket.org github.com
免费仓库个数 无限
HTTPS推送 √ 便捷 我从没有成功过 *
免费套餐容量 √ 1GB 0.3GB
私有仓库 √ 无限! 没有
最便宜套餐 √ $5/month $7/month
二级域名个人主页 ** √ 即时完成 等待10分钟
域名长度 较长 √ 较短
域名记忆难度 较困难 √ 较简单
代码片段工具 Gist
界面语言 只有英语 √ 有简体中文
界面美观度 *** 一般 √ 美观
中文社区活跃度 未知

* github貌似是支持https推送的,但我总是失败,只能导入key后通过ssh提交。
** 你只需要在各自的仓库中建立一个名为 username.bitbucket.org 或 username.github.com 的代码仓库即可
*** 美观度什么的个人观点,请勿拍砖

两个网站真是平分秋色,各有各的好。
bitbucket 的硬实力更棒,而 github 的软实力更强。
具体用哪个呢,自己分析下自己的需求吧。

欢迎留言,好更新或完善一些比较的条目。

基于SQLite的短网址工具——SQLito

今天晚上没事,花了两三个小时时间写了一个基于 SQLite 的短网址工具。
有这个想法很久了,之前网上找的一堆短网址工具基本都要求mysql,
而我又很不喜欢mysql,动用mysql很麻烦,总是要建账号之类的。
所以就自己写了一个基于SQLite的,想必会有一些朋友更我一样喜欢的东西吧。。

完成了核心内容,美化什么的懒得弄了。自己用用不管漂亮与否了。
这一刻我完全不是做前端~
SQL防注入什么的也懒得弄,大家随意就好。
可以缩短网址,可以列出缩短的网址有哪些,还可以通过书签栏缩短网址。
简单的统计访问人数等。

项目我放在bitbucket上,点击查看SQLito
可以直接下载最新镜像 SQLito

这个需要服务器支持sqlite3,第一使用的时候会提示创建数据库。
所有文件扔到服务器上后,可以先修改config.php文件,不改也没关系
可以改动的是路径,如果自动获得的路径不对的话,就自己填一个,要以/结尾。
还有就是数据库名,也可以自己改。

然后修改.htaccess文件,增加下面的规则。
或者直接用附带的.htacess即可。

RewriteEngine On
RewriteRule ^([0-9a-z]+\-?)$ ?q=$1 [L]

之后就可以通过 add.php 来缩短地址
add.php 里边还有一个可以拖到书签栏的小工具,平时我就用他啦。

如果你不想让人使用缩短功能,那就自己改一下add.php文件好了。

通过 list.php 来查看有哪些被缩短过(现在我翻页都还没做呢~)
点击时间可以查看详细信息。

另外,在短地址后面加上一个减号可以预览地址。

测试地址: http://g.shawphy.com/
这个地址有效期至 2010-8-31
仅供测试,由于测试阶段,所以数据库会时不时的清空掉的,请勿用于正式的缩短网址工具之用。

P.S. PHP的函数太TM丰富了,base_convert函数非常好用。我用它实现10进制到36进制转换。

修复编码问题,如果最开头不是以http|https|ftp开头则自动加上http。

新增了查看详细详细统计信息,新增附加减号可以预览地址的功能。