<![CDATA[极度鹤小居-闲云野鹤! - web2.0　]]> http://www.jdhcn.com/ zh-cn PBlog2 v2.4 极度鹤小居-闲云野鹤! http://www.jdhcn.com/images/logos.gif http://www.jdhcn.com/ 极度鹤小居-闲云野鹤! http://www.jdhcn.com/article.asp?id=70 <![CDATA[高性能网页开发新20条规则详解]]> lzdk2003@hotmail.com(极度鹤) Thu,18 Dec 2008 12:09:34 +0800 http://www.jdhcn.com/default.asp?id=70         上个月，Yahoo!优异性能（Yahoo!'s Exceptional Performance）开发团队成员 Stoyan Stefanov 出席了蒙特利尔的2008魁北克PHP会议演讲。他提供了他们团队最新的研究成果和提高网页性能规则20条。在早先的高性能网页开发14条军规已经让大家耳熟能详，此次新增的20条更加全面，覆盖了服务器端、cookies、页面内容、JavaScript、CSS、图片、移动手机应用这七大类别。以下内容就是根据这二十条结合个人在实际开发中的理解所做的全面解读。希望对大家开发有所助益。
 

阅读指导：

1. 每条规则后会指明是针对上述所说的七大类别中哪个类别的优化。

2. 文中提到的一些工具在文后附注中会提供简要说明。

3. 文中经常提到“组件”这个词，这个词不同于我们程序开发中常提到的组件概念。本文中提到的“组件”特指嵌在HTML页面中图片、JavaScript脚本、CSS等静态文件。

一、尽早清除缓冲区［服务器端］

    假如用户请求一个页面，而这个页面在后端服务器需要花200至500毫秒乃至更长时间才能生成最终HTML页面，这时候用户浏览器处于较长时间的、等待页面数据返回的空闲状态，用户体验不会很好。此时可以根据页面内容长短做适当分隔，将先生成的页面局部HTML缓冲内容提前发送到客户端，不必让服务器消耗内存缓冲完整个庞大的页面内容后再行输出。这种方法有益于处理后端负荷大而前端负荷轻的页面。

    在HTML页面的head标签位置后是清除缓冲的好位置，因为HTML的head标签可以包括 CSS 和 JavaScript 文件，对于浏览器而言获取页面显示与后端服务器处理并行的效果较好。在PHP中有一个函数 flush()，它可以发送请求页面的局部HTML代码给浏览器，以便浏览器能先取得页面已经生成的部分HTML，同时后端服务器继续忙于处理生成页面余下的HTML。以下以此函数做个示例：


 

... <!-- css, js -->

</head>

<!-- 注意此处flush()是放在了head标签位置后面 -->

<?php flush(); ?>

<body>

... <!-- content -->


 

    其他语言也有类似语法，如ASP.NET和ASP中的 Response.Flush()。

    注意：在实际Web开发中，尽量减少HTTP请求次数是优化的重要方面，这条基本原则是早先14条和新增20条中很多规则的制订基础，实际上它也是14条规则中第一条也是非常重要的一条规则，但是使用尽早清除缓冲语句会增加一个页面的HTTP请求次数，这无疑是一个矛盾，因此请注意本条规则的适用范围，不要滥用它。

二、使用GET方法的AJAX请求［服务器端］

    这个容易理解一些。AJAX经常要用XMLHttpRequest，但是它的POST方法在浏览器中完成需要执行两步：首先发送信息头，然后才是发送数据；而GET方法只用一个TCP数据包传递（cookies信息例外）即可，减少了一个步骤，速度会快些。

    另外根据HTTP规范，GET方法就是为获取信息而生的。因此仅在请求数据而不是发送数据给服务器端存储时，使用GET方法很有意义。

    要注意的是，IE中URL允许最大允许长度是2K，用GET方法发送数据时注意2K的这个限制。

三、后加载组件［页面内容］

    使用该方法的意义在于：如果某个页面内容丰富多彩的话，在浏览器加载显示它时速度就不会很快。使用后加载组件的方法可以通过延迟加载一些隐藏内容来保证浏览器优先显示初始页面。

    要做到这一点必须仔细观察自己的页面并且问自己：“解释生成一个完整页面，什么部分内容是开始加载时绝对必须显示的？”清楚了这个问题，那么那些余下内容和组件就可以采用后加载方法延迟生成。这样会大大加快页面显示速度。

    这个技巧通常是JavaScript通过处理页面加载时的onload事件完成。例如，使用JavaScript代码和库去执行拖放动态效果操作时，这些操作可以延迟，因为拖动页面上元素的操作只能等初始页面生成完后才能发生。页面中的隐藏内容也适合用后加载方式，因为只有页面加载完毕用户才能操作决定是否显示该内容。

    Yahoo!网站的首页内容繁多，观察处于隐藏状态下的内容，这些内容通常在一些选项卡一样的标签页当中，只有点击后才会加载。

    只要明白该规则的优化要点后相信大家可以通过JavaScript做出自己的具体实现。Yahoo!提供了两个用于实现后加载方法的工具：

◆ YUI Image Loader：可以延迟图片显示

◆ YUI Get utility：它可以在页面加载完成后把JavaScript和CSS资源绑定到DOM上去。

    以上的工具是Yahoo!的YUI库提供。

四、预加载组件［页面内容］

    从文字上看预加载组件与后加载组件似乎作用相反，但实际上二者目标是完全不同的。通过预先加载组件可以充分利用浏览器的空闲时间，并且可以请求未来页面需要的组件。在这种情况下，当用户访问下一个页面时，你已经提前让大多数组件保存在缓存中，用户加载这个页面就会非常快。

    预加载类型有下列三种：


 

1. 无条件预加载

    onload事件一触发，就要马上取回一些指定的组件。可以检查google.com首页中onload事件中请求Sprite图片的例子（注：什么是Sprite图片，请参看第十六条规则）。在这个例子可以看出这个sprite图片www.google.com/images/nav_logo3.png在google.com首页本身并不需要, 但它会在随后用户搜索生成的结果页面中需要。


 

 

2. 条件预加载

    根据用户操作预测用户下一步操作的方向，并据此做预加载。例如，search.yahoo.com中，在输入框中刚键入几个字符后，就会看到页面对你键入的词做出合理推测，推出几个可能要搜索的实际关键词。此方法目前谷歌（google.cn）也在使用。

 

3. 提前预加载

    在将重新设计的网站页面发布前用此法较好。页面重新设计后常会有这样的反馈：“新站点太酷了，就是比以前慢”。原因在于用户访问旧站点是全缓存的，但新站点还没有缓存过。这时可以在发布新设计前就预加载一些新站点组件，这可以减少没有缓存的副作用。可以利用用户访问旧站点时浏览器空闲的时间请求新站点要使用的图片、脚本等。

五、减少 DOM 元素数量［页面内容］

    一个复杂的页面意味着要请求下载的字节数更多，也意味着用JavaScript访问DOM速度更慢。

    如何尽量减少已有页面的 DOM 元素数量呢？一个重要的思路就是不要滥用表格table和div 。很多人习惯用一些网页编辑软件去设计页面，这样会导致大量嵌套的表格或在使用语义不合法的标记。使用div要仅当它在语义上有意义时才使用它，有些开发者使用它仅仅是因为它可以被浏览器解释生成一个新行。

    Yahoo! 提供了一个避免这些问题的方法——使用YUI CSS工具。grids.css 有助于整体布局设计，fonts.css 和 reset.css 有且于清除浏览器的默认格式设置。这些工具可以在Yahoo!的YUI页面中去找。

    DOM元素的数量可在Firebug的Console上键入 document.getElementsByTagName('*').length 得到。

    DOM 元素不超过多少才适当呢？这可以通过检查一些有良好设计的页面来感觉比较。如Yahoo! 主页访问量相当大，它的数量在700个元素（HTML标签）以下。

六、分隔组件到多个域中［页面内容］

    对终端用户响应时间影响最大的就是所请求页面所含组件数量。只要浏览器缓存为空，下载每个组件需要占用额外的HTTP请求，只有缓存满时才可能不占用。

    HTTP/1.1规范中建议浏览器对每一个主机名允许并发下载两个组件。默认状态下，Internet Explorer和Firefox都符合这个规范。注意：IE8.0默认允许6个并发请求。

    许多网页中所有组件都从同一主机名中下载，这时不仅响应时间受并发线程数限制，同时也受该服务器CPU和带宽限制。把页面组件分布在两个主机名中，整体响应时间就会快2倍，CPU和带宽消耗也会得以分担。

七、尽量减少 HTML 标签 iframe 的使用数［页面内容］

    iframe允许在父文档内插入一个HTML文档。要想高效使用iframes，理解它的工作方式很重要。

    使用iframe有如下好处：

◆ 有助于减慢显示第三方标记和广告内容。

◆ 是个安全的 Sandbox。

◆ 能并发下载脚本。

但同时也有弊端：

◆ 即使iframe 内的 HTML 文档内容为空，消耗也比较高。

◆ 会阻止页面的onload事件

◆ 非语义的

八、避免404页面［页面内容］

    如果做了一个HTTP请求然后得到一个无用的响应页面，不仅完全不必要而且会降低用户体验。404页面就是在没有发现指定资源时返回的页面。

    一些站点提供了有益的404提示，对用户体验有好处，但这毕竟浪费了服务器资源。当链接一个外部JavaScript文件，而它又出了404错误，这尤其糟糕。首先，因为这个下载有问题会阻止并发下载；其次，即使有错浏览器仍然会尽力解析404返回的内容，看看有无JavaScript代码，尽力查找里面可用代码。
 

]]> http://www.jdhcn.com/article.asp?id=69 <![CDATA[15个CSS框架简介]]> lzdk2003@hotmail.com(极度鹤) Wed,17 Dec 2008 16:44:00 +0800 http://www.jdhcn.com/default.asp?id=69 对于小的Web开发项目来说，CSS 框架并不一定就适用，至少不见得能提高多少工作效率。但对于一个开发团队和规模比较大的项目来说，CSS 框架不仅能加快设计进程，更能解决网站改版中带来的诸多麻烦和问题。

下面，收集整理一些CSS框架，孰优孰劣，有需要的朋友亲自去试试。

YUI Grids CSS

这应该是最著名的CSS框架吧，由Yahoo开发小组开发而成。YUI Grids CSS为开发者提供了预先设置的四种不同页面宽度，六种不同的模板。有国外作者曾指出YUI Grids CSS中最值得学习的网格布局CSS写法:

  • 负Margin技术
  • 使用度量单位em
  • 清除布局的浮动

其中负margin技术，我个人觉得WordPress主题sandbox 可谓运用的炉火纯青，有兴趣的朋友可以看看。

YAML CSS Framework

YAML (”Yet Another Multicolumn Layout”) 是一个 (X)HTML/CSS 框架，它为了满足弹性的和用户友好的布局而开发的。YAML自2007年出现以来就提供了广而全的文档。像许多其他的CSS-Framework如Blueprint CSS 或 YUI Grids 一样，提供了一个预定义的 CSS-classes 系统，用来创建基于网格的布局。要创建一个布局，设计师需要创建网站 HTML 结构，然后为容器（html标签）书写CSS，剩下的就自理了。

Elements CSS Frameworks

Elements是一款纯净的CSS框架，可以帮助设计师快速高效率的书写css文档。你可以将他理解成一套模板，里面包含了大多数站点中所需要的那些css类。他很小，只有四个文件而已。总共不到6KB。

WYMstyle: a CSS framework

这个项目的目的是提供一组经过良好测试的模块化的CSS文件，能够用于网站的快速设计。WYMstyle是一组CSS文件，你可以很容易的组合这些文件来 快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块，WYMstyle 力求让每个网站防止枯燥的跨浏览器兼容性测试。

Blueprint CSS

Blueprint 是一个 CSS 框架，它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布局和一个打印样式。

Boilerplate CSS Framework

作为BluePrint CSS的原作者之一，我决定把我的思想重新整理到一个赤裸裸的框架，它提供最基本的要素来开始任何项目。这个框架将是较小的而且力求不使用非语义的命名习惯。你就是设计者而且你的技术很重要。

Tripoli Beta CSS Framework

Tripoli是一个用于HTML表现的通用css规范。通过重设和重建浏览器标准，Tripoli 为你的网站项目提供了一个标准的、跨浏览器表现的基础。

ESWAT Web Project Framework

ESWAT正在重新整理。如果你是冲着我的网站框架来的，那么你就可以在这里下载。也许你也想看看我的其他项目gmachina、AppleSeed。

CwS CSS Framework

下一个逻辑步骤就是将这个扩展为CSS框架，允许使用写好并通过测试的组件来快速开发网站。实际上所需的是搞定一套命名习惯和一个灵活的基本模板…

Schema Web Design Framework

Schema 是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。 与为每一个新的网站项目从零开始创建HTMl/CSS不同，Schema提供必要的基础来开始并立马让你的设计跑起来。

CleverCSS

CleverCSS是一个用于css的受Python启发的小型的标记语言，它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比CSS2整 洁和强大。与CSS最明显的区别是句法：它基于缩进而且不单调。虽然这显然违反了Python的规则，它依然是组织样式的很好的主意。

Logicss Framework

Logic CSS 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和PHP程序组成的集合。通常跨浏览器表现行为(不是Meyer的reset 文件或是用“*”)，排版支持文本字体大小调整(使用EMs) 和垂直居中，符合可定义的灵活的布局。

That Standards Guy CSS Framework

  • 只能调用单个样式文件
  • 主样式需要取得CSS认证(WCAG 1.0)；
  • 跨浏览器兼容性—包括Internet Explorer (IE) 5.x for Mac；
  • IE Hacks使用独立文件；
  • 快速创建模板；
  • 少量注释/实例演示，可以节省时间来理解。

Emastic CSS Framework
Emastic 是一个CSS框架，它有连续的任务：探索陌生的新世界，寻找新生活和新的网站空间，大胆的去CSS框架尚未到达的领域。它是轻量的、在页面宽度上比较人性化，在网格中使用固定和不固定的列宽。 Elastic 用“em”布局。

960 Grid System

 

]]> http://www.jdhcn.com/article.asp?id=68 <![CDATA[CSS的十八般技巧]]> lzdk2003@hotmail.com(极度鹤) Fri,05 Dec 2008 15:13:53 +0800 http://www.jdhcn.com/default.asp?id=68
原文作者：Roger Johansson
作者简介：住在瑞典哥德堡，1994年开始接触和参与web设计，456 Berea Street是他的住址，因此采用这个名字作为他的个人主页域名
原文出处：www.456bereastreet.com
原文发表时间：2005年3月15日
阿捷说明：此文原名"CSS tips and tricks"，有2篇，我将它们合并翻译在本文中。
本文总结了我开始使用CSS布局方法以来所有的技巧和兼容方案，我愿意把这些与你分享，我会重点解释一些新手容易犯的错误(包括我自己也犯过的)，如果你已经是CSS高手，这些经验技巧可能已经都知道，如果你有更多的，希望可以帮我补充。

一.使用css缩写
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。

二.明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

三.区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

四.取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如：

div#content { /* declarations */ }
fieldset.details { /* declarations */ }

可以写成

#content { /* declarations */ }
.details { /* declarations */ }

这样可以节省一些字节。

五.默认值
通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：

* {
margin:0;
padding:0;
}

六.不需要重复定义可继承的值
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。

七.最近优先原则
如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码

Update: Lorem ipsum dolor set



在CSS文件中，你已经定义了元素p，又定义了一个class"update"

p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}


这两个定义中，class="update"将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。

八.多重class定义
一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。

.one{width:200px;background:#666;}
.two{border:10px solid #F00;}

在页面代码中，我们可以这样调用

<div class="one two"></div>

这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。

九.使用子选择器(descendant selectors)
CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：

<div id="subnav">
<ul>
<li class="subnavitem"> <a href="#" class="subnavitem">Item 1</a></li>>
<li class="subnavitemselected"> <a href="#" class="subnavitemselected"> Item 1</a> </li>
<li class="subnavitem"> <a href="#" class="subnavitem"> Item 1</a> </li>
</ul>
</div>

这段代码的CSS定义是：

div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

你可以用下面的方法替代上面的代码

<ul id="subnav">
<li> <a href="#"> Item 1</a> </li>
<li class="sel"> <a href="#"> Item 1</a> </li>
<li> <a href="#"> Item 1</a> </li>
</ul>

样式定义是：

#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }

用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

十.不需要给背景图片路径加引号
为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如：

background:url("images/***.gif") #333;

可以写为

background:url(images/***.gif) #333;

如果你加了引号，反而会引起一些浏览器的错误。

十一.组选择器(Group selectors)
当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。



例如：定义所有标题的字体、颜色和margin，你可以这样写：

h1,h2,h3,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}

如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：

h1 { font-size:2em; }
h2 { font-size:1.6em; }

十二.用正确的顺序指定链接的样式
当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是"LVHA"，你可以记忆成"LoVe HAte"(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《Link Specificity》。

如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。

十三.清除浮动
一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。

通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats Without Structural Markup》(注：本站将尽快翻译此文)。

上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办？一种简单的方法就是用overflow属性，这个方法最初的发表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被广泛讨论。

上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：《Floatutorial》、《Containing Floats》和《Float Layouts》

十四.横向居中(centering)
这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：

你可以这样定义使它横向居中：

#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}

但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：

body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}

第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。

十五.导入(Import)和隐藏CSS
因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：

@import url("main.css");

然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：

@import "main.css";

这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》

十六.针对IE的优化
有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

1.注释的方法
(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
html>body p {
/* 定义内容 */
}
(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
* html p {
/* declarations */
}
(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用"反斜线"技巧：
/* \*/
* html p {
declarations
}
/* */
2.条件注释(conditional comments)的方法
另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

十七.调试技巧：层有多大？
当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。

另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。

十八.CSS代码书写样式
在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：

selector1,
selector2 {
property:value;
}

当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。

我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。

最后，关闭的大括号}单独写一行。

空格和换行有助与阅读。
]]> http://www.jdhcn.com/article.asp?id=65 <![CDATA[Web前端工程师技能列表]]> lzdk2003@hotmail.com(极度鹤) Mon,24 Nov 2008 22:49:27 +0800 http://www.jdhcn.com/default.asp?id=65 要打造一流的Web产品开发团队，在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说，仅仅掌握Web1.0时代简单的”网页套接”是完全不够的。我结合自己的团队配备，特此罗列了Web前端产品工程师所涉及的技能列表如下：

通过许多实际项目，个人认为一个完备的前端产品开发团队，必须拥有如下的人才配备，也希望大家补充：

  • 团队全体成员达到所有技能中的a级标准
  • 团队全体成员必须掌握两项技能中的b级标准，并保证所有的b级标准在该团队中有50%以上成员能达到
  • 团队全体成员必须掌握一项技能中的c级标准，并保证所有的c级标准在该团队中有25%以上成员能达到

具体技能描述：

  • 【必备】UserInterface
    1. PhotoShop/Fireworks Design
      a - 配合美工将草图形成具体的符合WebPage的设计
      b - 有快速制作分层高品质PSD、PNG的能力
      c - 能迅速将PSD、PNG的内容构思成div+css或者table等HTML代码
    2. Flash Design
      a - 基本动画效果
      b - 复杂的交互体系设计，了解第三方swf辅助设计软件
      c - 复杂的交互体系设计以及较强的对各类外埠资源（PNG、JPG、MP3、WAV等）的整合能力。精通部分第三方辅助设计软件（AE、SwishMax、Swift3D等）
  • 【必备】Browser-side (Web Application)
    1. XHTML/CSS
      a - 基本的layout实现
      b - 严格跨平台的layout实现以
      c - 优雅的HTML code，尽可能符合标准并有SEO的考虑因素。在任何平台、浏览器下基本保持一致。不要求了解各种CSS的hacks，但要求知道遇到问题应该如何查阅资料以在第一时间内解决。能够为JavaScript开发人员提供最好操作的DOM结构，让JS开发人员在开发的时候认为”一切都已经准备就绪了”，而不是”捉襟见肘”。
    2. JavaScript/Ajax/DOM
      a - 基本的DOM操作，了解AJAX，可以实现数据通信
      b - 基本的DOM操作，能写高效率的OOP代码，以降低维护成本
      c - 基于需求，进行不同的开发，选择合适的框架，做到代码效率最高，用户体验最好，代码下载量最小，并且可以在单独甚至更多产品线中最大限度重用代码
    3. Flash Developement
      a - 基于Timeline的ActionScript操作，能实现简单交互
      b - 掌握a外，能实现数据层通信（与服务器以及本地SharedObject）
      c - 精通AS1-3，能根据需求进行各类RIA开发。无论是要求支持FlashPlayer8的，还是FlashPlayer9的，都能做到开发效率最高、灵活性最大（比如对HTML层的接口设计，等等）。
  • 【必备】Client-side (Desktop Application)
    1. Apollo
      a - 产品级的封装，基本技术了解（如何打包、如何加入HTML和JavaScript等）
      b - 掌握a的同时，能利用Apollo的API独立设计、开发OS的文件I/O功能。
      c - 掌握基本技能的同时，对”3D概念体系”有所认知。这里”3D”即：Design（设计）、Development（开发）、Deploy（产品部署）。能用Apollo
    2. Windows Presentation Foundation、WPF/E（Silverlight）
      （待定，欢迎补充）
  • 【增补】Server-side （修改：经考虑，这个技能不参与评级）
    本来列举了”1、Server端简单的技术、脚本”和”2、MediaServer（Red5）接口”作为”Web前端工程师技能列表“的一种（服务器、数据逻辑层技能的）评判标准。但似乎很多朋友对于前端工程师是否应该掌握Server端技能的必要性表示怀疑。确实，要掌握好上述的展现层技能不是意见容易的事情，而且前端工程师的确非常辛苦。但是，站在另一方面来说，辛苦的原因是什么，我不知道在你日夜奋战div+CSS的时候思考过没有。就我的经验，前端的辛苦在于以下几个方面：

     

    1. 重复劳动多，大量的div+css都是重复的，即便可以复制粘贴，但几千行的div海洋中去寻找一个入口恐怕都非常痛苦
    2. 需求变更多，往往你折腾几个小时终于把跨平台问题解决好了，而且在IE6、7和Firefox下面都能显示同样的效果了，甚至连JavaScript交互都已经快搞定了。突然上面说需求要变。这无疑是莫大的痛苦。

    也许表面上看，这跟Server端技能无关，但我觉得有好的Server端的意识，一定会有所帮助（当然不可能解决所有的问题）。毕竟信息结构和数据库是密切相关的，而Server是连接数据库的唯一渠道（至少大多数B/S应用是如此）。掌握Server端的基本技能，对于同逻辑层开发人员设计接口是非常重要的。而且HTML表现层在开发时与数据的分离，也与Server端的各种模板技术有关。例如PHP中的Smarty模板（我曾经用的）、jsp的model2概念等等。HTML结构如何设计，如何让HTML重用，甚至在HTML层进行OOP的开发（我现在在新产品线中设计的前端开发流程），都需要Server端的支持。最起码，你要告诉php程序员你需要什么。如果你完全对PHP一无所知的话，那也无从谈起了。
    此外，对于创业团队，往往人手非常有限。为了让运营成本降到最低，所有的技术人员都有义务对Server端技术有所了解。如果为了修改一个网页的标题还要跑去喊PHP程序员连接Remote Server的话，那实在是增加了整个公司的运营成本。
    总结：我认为，可以不了解技术细节，但应该知道原理，最好能掌握一两套设计思想（毕竟数据逻辑都在这里走，光看HTML和JavaScript，对人的见识还是有局限的，这种局限限制了我自己很久的时间），那将是一比宝贵的财富。

  • 【增补】Mobile-side（不参与评级）
    1. Flashlite
      （待定，欢迎补充）
    2. Java？
      （待定，欢迎补充）

看到很多朋友留言说前端工程师没前途，我在想，同时掌握移动设备的技能是否也是拓展前途的一个必要性？这里再多说几句，关于技术人员的前途，目前在国内确实得用”惨淡”来形容。浮躁的氛围让技术人才往往过早放弃了自己的技术生涯，而尔虞我诈的整体道德水平也让单纯的技术人员痛不欲生（我身边太多了，恩，不说具体细节了，呵呵）。

作为一个技术人员，开发人员，在保持纯粹地敬业心态（这是前提，这么没有，啥也别谈）外，更要学会如何保护自己，如何壮大自身，社会不会同情你，只有你自己才能保护你自己。

]]> http://www.jdhcn.com/article.asp?id=8 <![CDATA[＜li＞和＜hr＞的样式定义]]> lzdk2003@hotmail.com(极度鹤) Fri,09 Nov 2007 03:26:47 +0800 http://www.jdhcn.com/default.asp?id=8
　li {list-style-image: url(images/disc.gif);}

　　li的这个样式定义是将列表项目使用图片来代替显示的小圆点。当然您也可以显示成其它效果，详细请参阅下面的定义:

　　列表项目效果的CSS定义

　　*list-style-type: circle(可换成自己想要的样式);　列表项目样式

　　disc :　　　　　CSS1　实心圆

　　circle :　　　　CSS1　空心圆

　　square :　　　　CSS1　实心方块

　　decimal :　　　 CSS1　阿拉伯数字

　　lower-roman :　 CSS1　小写罗马数字

　　upper-roman : CSS1　大写罗马数字

　　lower-alpha : CSS1　小写英文字母

　　upper-alpha : CSS1　大写英文字母

　　none :　　　　　CSS1　不使用项目符号

　　armenian :　　　CSS2　传统的亚美尼亚数字

　　cjk-ideographic:CSS2　浅白的表意数字

　　georgian :　　　CSS2　传统的乔治数字

　　lower-greek :　 CSS2　基本的希腊小写字母

　　hebrew : CSS2　传统的希伯莱数字

　　hiragana : CSS2　日文平假名字符

　　hiragana-iroha: CSS2　日文平假名序

　　katakana : CSS2　日文片假名字符

　　katakana-iroha: CSS2　日文片假名序号

　　lower-latin : CSS2　小写拉丁字母

　　upper-latin : CSS2　大写拉丁字母

　　*list-style-image: url(images/disc.gif); 用图像disc.gif代替列表项目显示

　　*list-style-position : outside | inside

　　outside: 　列表项目标记放置在文本以外，且环绕文本不根据标记对齐

　　inside : 　列表项目标记放置在文本以内，且环绕文本根据标记对齐

　　hr{border:1px dashed #86BCD4; height:1;}

　　在HTML代码中，还有一些特殊的如水平条hr，也可以在风格管理中加上定义，以更改其默认的显示效果:

　　水平条效果的CSS定义

　　BORDER-BOTTOM-STYLE: dotted;

　　BORDER-LEFT-STYLE: dotted;

　　BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted;

　　height:1;

　　width:100%;

align:left;

　　color:#86BCD4;

　　Shade:no;

　　水平条虚线效果定义

　　border:1px dashed #86BCD4; height: 1;

来源：iTbulo.COM
]]>