Java一直标榜一句老话叫“编写一次，到处运行(Write Once,Run Anywhere)”，CSS也差一点点做到了。但就是为了差的一点点往往需要大量的工作，虽然这并不是CSS的错。基本上别妄想兼容所有的解析器了，仅仅是为了让网页在YUI中列举的A级浏览器呈现一致就不是一件特别容易的事情。虽然通过精心的组织HTML结构加上使用最合适最通用的CSS代码可能实现多浏览器呈现一致，但当在视觉的过度设计、精确到像素的规定和前端快速实现的要求的前提下，可能你不得不为不同的浏览器写不同的CSS代码，这就是CSS Hacks了。我们的目标是保持CSS简洁和没有CSS Hacks，但即使多年以前就呼吁Keep CSS simple的PPK也不得不在他的网站中使用CSS Hacks，即便如此其站点在所有的A级浏览器中也无法保持一致的呈现。所以，下面这个我常用的CSS Hacks列表或许有些用：

阅读全文 »

今天是Firefox3的2008下载日(貌似北京时间是6.18的凌晨1:00)，这就意味着Firefox3正式发布了。Firefox3有众多的改进和新功能，我最关注的功能之一是“全页面缩放（Full page zoom）”。这就意味着Firefox3和Opera以及IE7+都可以让用户“完全控制显示内容的大小同时自动调整页面布局和结构”，说白了就是可以让整个页面直接放大或缩小却不会乱掉。这就意味着我们不用再考虑为了可访问性而整个页面是基于字体大小（em）的设计了。

阅读全文 »

语法图（Syntax diagrams ）又叫铁路图（railroad diagrams）是描述形式文法的一种方式。它是巴科斯范式或扩展巴科斯范式的图形化表示。最早使用语法图的书包括Niklaus Wirth写的“Pascal User Manual”（语法图开始于47页）和the Burroughs CANDE manual。在编译领域，像BNF和它的变体这样的文字式表示法都是首选的。BNF能很好的被编译器作者和编译器理解，但是不能很好的被这些语言的大部分用户理解。铁路图能更容易被大多数人理解。数据交换格式JSON之所以流行的部分原因就是它用铁路图来表示。

阅读全文 »

巴科斯范式

巴科斯范式（也称为巴科斯-瑙尔范式、巴克斯-诺尔范式）即 BNF 是一种用于表示上下文无关文法的语言，上下文无关文法描述了一类形式语言。尽管巴科斯范式也能表示一部分自然语言的语法，它还是更广泛地使用于程序设计语言、指令集、通信协议的语法表示中。大多数程序设计语言或者形式语义方面的教科书都采用巴科斯范式。在各种文献中还存在巴科斯范式的一些变体，如扩展巴科斯范式EBNF或扩充巴科斯范式 ABNF

阅读全文 »

大概在2004年初的时候，我第一次买了一本很厚的书，名字或许叫《Dreamweaver MX从入门到精通》，很认真看着书并实践操作大约三分之二后，就感觉自己不错了，利用Dreamweaver加上表格套表格可以把视觉精确的转化成静态页面，在那年底我完成了随网之舞的第一版。也就是在那个时候“WEB标准”这个新名词闯入了我的视线，《网站重构》这本书和w3cn.org吸引了我。2005年初，当我在广东茂名实习的时候，我第一次利用当时理解的标准，准确来说就是利用XHTML1.0加上利用CSS布局做了两个能同时兼容IE5.0+和Firefox的站点。毕业后，看到到处言必称标准，开发时强调XHTML1.0的语法规范（标准貌似被很多人认为就是XHTML1.0+CSS），检查时强调W3C的验证器（比如为了通过验证利用Javascript实现弹窗），招聘是强调会DIV+CSS（这是标准的另一个称呼，甚至到现在偶尔还有人给我一个链接对我说：”看我按标准做的网页，全部是DIV，一个TABLE都没有。”），那个时候似乎陷入了对基础语法（通过验证）和对CSS技能（hack技术）的追求上去了。后来，当我了解HTML的历史时，我才注意到HTML众多版本的标准，意识到HTML本质是用语义结构化文档和构建WWW的超链接。

阅读全文 »

一、什么是匿名函数？

在Javascript定义一个函数一般有如下三种方式：

1. 函数关键字(function)语句：

   function fnMethodName(x){alert(x);}

2. 函数字面量(Function Literals)：

   var fnMethodName = function(x){alert(x);}

3. Function()构造函数：

   var fnMethodName = new Function('x','alert(x);')

上面三种方法定义了同一个方法函数fnMethodName，第1种就是最常用的方法，后两种都是把一个函数复制给变量fnMethodName，而这个函数是没有名字的，即匿名函数。实际上，相当多的语言都有匿名函数。

阅读全文 »

这个周末回京参加了期待已久的第二届D2前端技术论坛，见到众多的前端同行，更聆听了几场高质量的讲演，收获良多。讲演的资料整理后会在第二届D2前端技术论坛的官网上提供下载，同时也会提供会议视频，强烈推荐前端工程师关注。

1. 周爱民的讲演“前端设计与开发的基本模式”，看起来很丰富，很多模式或理念听起来也蛮有争议，避免不了空和虚，但我不能不承认他提供了很多我有兴趣但尚未涉及东西，这些给了我新的视角。
2. 黄继佳的讲演“Silverlight应用”，虽然很高兴他能来参加和支持D2，幻灯片也很cool，但我强烈的感觉这是一个很纯正的Silverlight的产品推广，我不是太喜欢。
3. Hedger Wang的讲演“Enterprise Ajax in PHP”，是这次D2的精华。他提出管理Ajax在企业级应用的设计模式，很多正是我日常开发中遇到，比如他讲到的映射，我也曾经做过类似的解决方案，比如他讲到的对多次同一请求的管理，我也曾思考过，但那往往是一个个独立的小点，这次讲演终于让我有了从点到线到面的感觉。他的讲演也准备的相当好，既有总结，又有代码，同时利用生活中的例子来说明原理，想听不明白都不行。我不需要如何得称赞hedger的讲演，如果你的开发涉及到Ajax，那么你就应该去看看他的讲演。ps，祝他杭州玩的开心。
4. Nate Koechly的讲演“Enhanceing Web Sites With The YUI Library”(English)”，作为YUI开发的核心成员，这次讲演虽然有点推广YUI的意味（在此有近一年应用YUI经验的我也强烈推荐YUI），但是仅仅从他幻灯片上就可以看出他事先的准备和用心，甚至他表达出了要学习汉语的意愿。但很遗憾的是，由于语言的原因，这次没有能充分的从Nate身上获取更多的更深的东西，虽然有hedger义务做翻译，虽然对nate的提问是最多的。
5. 章亦春的讲演“Nifty web apps on an OpenResty”，讲的很有激情，也给出了一个新的Web OS，作为一个视角是一个很棒的东西，但是作为我个人来讲我并不赞同这个思路，我一直认为让一门语言处于它最适当的位置才是王道，就像语义化设计一样，应该用合适的标签来组织合适的数据。虽然章亦春提到了不应该对Javascript滥用，但是很遗憾的是我感觉这就是一种滥用。
6. 案例分享阶段，贤安的“如何写一个富文本编辑器”，小马的“前端开发工具介绍”，一位仁兄（不好意思，记不起来名字）的“用Adobe Air开发IM”，都很有意思，这些很务实的小分享越多越好，因为每个人的心得体会小窍门汇聚在一起就有了越来越顺畅的前端开发。

阅读全文 »

HTML文档与CSS的关联常见有4种方式：

1. 使用link标记

   <link rel="stylesheet" type="text/css" href="sheet.css" />

2. 使用style元素

   <style type="text/css">
   body{background:#fff;}
   h1{font-size:2em;}
   </style>

3. 使用@import指令

   <style type="text/css">
   @import url(sheet1.css);
   @import "sheet2.css";
   </style>

4. 使用style属性的内联样式(inline style)

   <p style="color:#f00;">这是红色的字</p>

在实际应用中，使用style属性的内联样式是不推荐使用的，XHTML1.1已经将其标准为不建议使用，原因很简单这种方式不比font标记强多少，削弱了CSS集中控制整个文档外观的优点。前3种方式利用了link标记和style标记，在IE(包括IE6、IE7和IE8 beta1)中有如下限制：

阅读全文 »

每个浏览器都有自己的默认样式，这是一段预定义的CSS，用以简单地呈现网页。在Firefox中的地址栏中输入resource://gre/res/html.css即可以看到该浏览器的默认样式。在Firebug 1.2 Alphas的styles中就可以看到默认样式对页面定义样式的影响。毫无疑问，理解和学习浏览器的默认样式能更好的理解浏览器对解析样式和呈现页面。Firefox3和Firefox2相比，默认样式仅有8处不同，但这些改变也可以让我们感觉到Firefox3在样式上的改进：

阅读全文 »

CSS的display有属性值inline-block{display:inline-block;}，下面是应用其来实现用图片替代文字的两个例子：

请看例一。

Markup：

<i class="arrow-1 replacement">箭头1</i>
<a href="http://dancewithnet.com" class="arrow-2 replacement">箭头2</a>
<p class="arrow-3 replacement">箭头3</p>

CSS：

阅读全文 »