检视了一下CSS 2.1文档,Normal Flow,指正常文档流,在W3官方的CSS  2.1文档中并没有直观的表述,而是阐述了它与元素上下文环境的关系:

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block boxes participate in a block formatting context. Inline boxes participate in an inline formatting context.

正常文档流中的盒模型属于格式化过的块元素上下文环境或者是行内元素上下文环境,块元素处于块元素上下文环境中,而行内元素则处于行内元素上下文环境中.

对于块元素关系环境,W3在CSS 2.1文档中的解释比较模糊:

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts.

浮动元素,使用绝对定位的元素(position属性值为absolute或fixed),另外display属性值为inline-block,table,table-cell,table-caption以及overflow属性值为auto,scroll,hidden的元素可以产生一个新的块元素上下文环境.

而在Mozilla Dveloper Center中有更详细的解释:

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

Block formatting contexts are important for the positioning and clearing of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.

所谓的块元素上下文环境是网页样式渲染机制的一部分,它限定了块元素布局区域以及浮动元素相互影响的范围.

现象:正常文档流与元素定位

根据官方文档对于绝对定位,相对定位的解释以及例子,先对使用绝对定位以及相对定位元素与正常文档流的关系做出一个参考性结论.查看例子Example1;从左到右为Example1_N0-Example1_N6.

父级顶层容器(OUTER)通用样式

float:left;margin-right:20px;width:200px;line-height:25px;

父级次层容器(SUB_OUTER)通用样式

background:#eee url(line_mark_1.gif) scroll repeat-x 0 100%;

使用定位方法进行布局的子元素(INNER)样式见页面顶部黑色块状内内容.

Example1_N0为正常文档流,顶部绿色标记线与底部绿色标记线距离为500px;

Example1_N1中INNER使用相对定位,非块状,定位元素原空间空白占位显示,顶部绿色标记线与底部绿色标记线距离为500px;

Example1_N2中INNER使用相对行为,块状显示,定位元素原空间空白占位显示,占位空间为块状化后尺寸,顶部绿色标记线与底部绿色标记线距离为500+2(horiziontal border width)px

Example1_N3中INNER为相对定位,块状显示,高度减少25px,定位元素为块状化后并以最终计算高度以空白空间方式占位,顶部绿色标记线与底部绿色标记线距离为(500-25)+2px;

Example1_N4中INNER为绝对定位,绝对定位元素以块状显示,高度减少25px,定位元素无空白占位空间,顶部绿色标记线与底部绿色标记线之间的距离为500-50px;

Example1_N5中INNER为相对定位,以块状显示,高度减少25px;宽度增加为210px;定位元素为块状化后并以最终计算高度以空白空间方式占位,顶部绿色标记线与底部绿色标记线距离为(500-25)+2px;OUTER与SUB_OUTER可见宽度及内容宽度无变化(与overflow:visibile相关).

Example1_N6中INNER为绝对行为,绝对定位元素以块状显示,高度减少25px;宽度增加为210px;定位元素为块状化后并以最终计算高度以空白空间方式占位,顶部绿色标记线与底部绿色标记线距离为500-50px;OUTER与SUB_OUTER可见宽度及内容宽度无变化(与overflow:visible相关).

根据Example可以得出绝对定位和相对定位元素同正常文档流之间的关系的参考性结论,对于使用相对定位的元素,并未脱离正常文档流,而是相对正常文档流进行了偏移,偏移量受top/bottom,left/right值所限,同时并以元素最终计算尺寸以空白形式占位正常文档流.对于使用绝对定位的元素,从正常文档流中脱离,不占有正常文档流空间.另外还可以得出结论,在默认元素样式属性overflow的值为默认的visible(body的默认值为auto;)的情况下,不对其父及容器产生影响.

现象:正常文档流与块元素上下文环境

从Example1中我们得出使用绝对定位以及相对对元素进行定位后与正常文档流之间的关系,Example2对正常文档流与块元素上下文环境进行简要分析,得出参考性结论.查看例子Example2,从下之下为Example2_N0(_1-6)-Example2_N7.

红色为父级顶层容器(OUTER),通用样式如下:

width:400px;height:400px;background:#f00 url(ruler.gif) no-repeat scroll 0 300px;

绿色为父级次层容器(SUB_OUTER),通用样式如下:

width:500px;height:300px;background:#0f0 url(ruler.gif) no-repeat scroll 0 200px;

蓝色为使用绝对定位的子容器(INNER),通用样式如下:

width:800px;height:200px;background:#00f url(ruler.gif) no-repeat scroll 0 0;

样式差异见表格Example2_N*中的Property列.

Example2_N0,OUTER,SUB_OUTER,INNER存在于由BODY生成的默认块元素上下文环境中,主要作用为对照.在Firefox 2.0(Above),Opera 9(10)中OUTER的scrollWidth,clientWidth均为400px,SUB_OUTER的scrollWidth,clientWidth均为500px,Internet Explorer 6(7),Chrome 2,Safari 4 将OUTER,SUBOUTER的有效内容宽度scrollHeight增加到800px,也就是等于INNER的宽度,而在Internet Explorer 6 中,OUTER,SUB_OUTER的可视宽度clientWidth增加到800px,所以在Internet Explorer 6下OUTER,SUB_OUTER的实际显示的宽度为800px,这应该是Internet Explorer 6一直存在的一个解释上的Bug.

Example2_N1中,由于对SUB_OUTER使用相对定位,会在OUTER的空间中保留占位空间,相当于在OUTER中保留一个样式属性position值为static的SUB_OUTER,所有浏览器都以各自的正常情况显示.从这个例子来看,BODY为原始的块元素上下文环境,而INNER为元素级别的第一个块元素上下文环境,它的作用是将其所包含的子元素与INNTER所在的外部上下文环境所隔离,在本例中无实际作用.

Example2_N2中将SUB_OUTER样式属性overflow设置为auto;可以看到SUB_OUTER出现滚动条,由于SUB_OUTER此时的可视宽度clientWidth为500px,而INNER的scrollWidth有效内容宽度为800px,滚动条可拖动范围为(800-500)px.其他现象同Example2_N1.Example2_N3将SUB_OUTER样式属性overflow设置为hidden,各元素width值与Example2_N2相同,INNER超出SUB_OUTER的宽度被隐藏,值得注意的是,在Example2_N2中,Internet Explorer6(7)滚动条拖动时拖动对象还包含SUB_OUTER自身,而不只是对其包含的子元素,也就是INNER进行拖动.

Example2_N2以及Example2_N3共同点在于样式属性overflow的值均不等于visible.因此SUB_OUTER新建了一个块元素上下文环境,其所包含的子元素INNER便与SUB_OUTER的外部上下文环境相隔离,而此时SUB_OUTER的有效宽度scrollWidth等于INNER的有效宽度,为800px.

在Example2_N4中,将OUTER的样式属性overflow设置为auto,在Example2_N5中将OUTER的样式属性overflow设置为hidden,同理,此时OUTER将会新建一个块元素上下文环境,在Firefox 2.0(Above),Opera 9(10),Chrome 2,Safari 4 中 OUTER的有效内容宽度scrollWidth值为800px,等于INNER的宽度,在Example2_N4中,滚动条的可拖动范围为(800-400)px,包含SUB_OUTER(500-400)px.不过在Internet Explorer 6(7)下OUTER的有效内容宽度scrollWidth值为500px,可视宽度clientWidth的值变为400px,滚动条可拖动范围为(500-400)px,拖动对象为OUTER自身.

Example2_N6与Example2_N4,Example2_N7与Example_N5的区别相同,在OUTER添加了样式属性position,值为relative,而此时Internet Explorer做出与其他浏览器相同的解释,不过对于Example2_N6,Internet Explorer保留了与Example2_N2以及Example2_N4的相同现象,滚动条拖动对象包含自身.

从Example2中我们可以得出一个临时参考性结论,Firefox,Opera,Chrome,Safari当新的块元素上下文环境产生时,可以直接影响其包含的所有子元素,而Internet Explorer则受正常文档流的限制要多.

(未完)

原文:http://lifesinger.org/blog/?p=909

个人认为,em,strong的原始意义为在某个句子,段落或者整篇文章中强调某个单词或某个句子的重要性,按照西方的习惯和大部分字体设计,font-style为normal,italic,bold.分别正常字体,斜体和粗体,是递进性的语气.

那么建立在上面的理解基础之上,讨论em,strong的使用上的区别并没有太多的意义,因为限定了使用的环境为句子,段落和整篇文章.

其实大部分情况下,使用em,strong也只是为了减少class,id选择器的使用,如果只是单纯的为了页面高亮(highlight)之用,em不再是斜体,而strong也不再是粗体,既然这样,外观(appearance)就是样式表所控制的,em,strong和span的使用也再无任何语义上的区别.

另外,斜体在中文排版中是不适用的,中文的斜体很大程度上降低了可辨识性.

dl,dt,dd,作为定义列表和其他标签的区别:

1. 用作解释和诠释.也就是说dt和dd是语义上有等级层次之分,但是dt中的文本内容从结构上并不能够直接包含dd中的文本内容.借用w3schools的例子,对咖啡的解释就是如此,原文解释咖啡为热的黑色饮料.

黑色的表示颜色,热,饮料表示温度和状态,但热的黑色的饮料不一定就是咖啡.

2. 专业术语或者比较笼统,需要拆分解释的.例如Adobe的Adobe cs4产品页面中用到的定义列表用于解释新功能.例如对Fireworks4的新功能概括为 “使用 Adobe Fireworks CS4 制作 Web 原型和编辑图像”.那么有必要进行拆分解释.链接如下:

http://www.adobe.com/cn/products/creativesuite/mastercollection/features/

3. dl是列表,也就是集合性质的,考虑到样本容量,在多个定义存在的情况下才有必要使用,如果只是单个样本存在,是否可以考虑使用如下结构:

div-title-description,也就是div-h2,h3,h4-p,ul,div…

4. 如果dt和dd如果直接存在意义上的包含,可以考虑使用div-title-description结构,也就是div-h2,h3,h4-p,ul,div…

5. e.g. 淘宝的商品信息描述,如果单纯考虑到页面结构,页面可以用到定义列表,拆分为主的,而非完全解释性的.对一件商品进行描述.如一件衣服:

<dl/>

<dt/>销售信息可以分为:<dd/>-<ul/>-<li/>价格,运费,剩余时间…

<dt/>产品信息可以分为:<dd/>-<ul/>-<li/>尺码,大小,颜色…

毕竟只是个假设,可以看到现在商品信息页的结构并没有这么简单.

针对样式表置入方式不同,也有不同的使用方法.

使用链接方式的,可以设置media属性的值:

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

使用导入方法的,可以使用下面的方法:

@import url(screen.css) screen;

使用置入页面style标签中的以及使用链接或导入方式而将media属性设置为all的,可以在规则代码中这样设置:

@media screen {};

最近写CSS时特别针对Handheld Media Type设置了一下,自己测试了几款移动浏览器,包括Pocket Internet Explorer 7,Opera Mobile 8.65,Opera Mini 4,还有Mozilla的Minimo 0.2对Media Types设置的处理都有所不同.HtmlDog曾经提供过一个测试页面检测浏览器对screen和handheld Media Type设置的处理方式.链接:http://htmldog.com/test/handheld.html

Opera开发社区也提供了一个测试包,包含Media Queries的测试,下载地址:code_storey_operamini4.zip

对于CSS Queries的支持程度还有其他一些比较详细的信息可以在这篇文章中了解到,文章里面浏览器分析部分译文.

Opera Mobile

对CSS有相当高的支持度;
能够识别handheld,但是你不能将handheld混合在声明为all规则中;
支持Media Queries;
对没有设置Media Type为handheld的页面,默认识别为screen,不过页面会被重新格式化以适应屏幕显示,实际上只有一小部分的样式被应用;
用户可以设置某些选项以禁用重新格式化功能,取而代之的是使用和桌面浏览器版本相同的方式进行渲染;
在高分辨率的设备上不会以handheld样式现实,但是仍然会受限于Media Queries的设置;
可以被识别为手持设备浏览器.

Opera Mini

主要运行在小屏幕和低性能的手持设备中;
安装高性能设备中的Opera Mini 4高度支持CSS;
能够识别handheld,但是你不能将handheld混合在声明为all规则中;
支持Media Queries;
对没有设置Media Type为handheld的页面,默认识别为screen;
对于高性能设备上的Opera Mini 4,完全体会不到利用鼠标操作桌面版本的快感,文本被折叠起来以适应屏幕尺寸;
无论是在低于Opera Mini 3的版本中,或是高端以及低端设备中的Opera Mini 4,设置某些选项后,页面会被重新格式化以适应屏幕显示;
可以被识别为手持设备浏览器.

NetFront/Blazer

对CSS的支持不够好;
默认识别为screen,忽略Media Types设置,页面会被重新格式化以适应屏幕显示;
某些特殊版本只识别为handheld,如果你没有设置handheld样式,页面会以无样式显示;
@media实现不完全,经常会无视Media Types而出现错误的应用;
用户可以自定义是否对页面进行重新格式化,页面可以与桌面浏览器版本相同的渲染方式进行显示;
会被识别为桌面浏览器.

Pocket Internet Explorer

对CSS支持差;
同时以screen和handheld样式显示,页面会被重新格式化以适应屏幕显示,只有相当少的样式会被应用到页面;
支持设置media属性的方法,但不支持@media和@import方法;
某些时候支持@media方法,但是并不可靠,大部分页面仍然不会正常显示,如果使用Media Queries,样式内容可能被忽略;
用户可以自定义是否对页面进行重新格式化,页面可以与桌面浏览器版本相同的渲染方式进行显示;
可以被识别为手持设备浏览器,你可以使用CSS覆盖(重载)的方法使用handheld样式覆盖screen样式.

Series 60 Browser and Safari on iPhone

基于Safari engine,因此对CSS有相当高的支持度;
会被识别的screen,忽略Media Types设置;
某些更新版本支持Media Queries;
会被识别为桌面浏览器.

Minimo

基于Gecko引擎,对CSS有相当高的支持度;
默认识别为screen,忽略Media Types设置,页面会被重新格式化以适应屏幕显示;
用户可以自定义是否对页面进行重新格式化,页面可以与桌面浏览器版本相同的渲染方式进行显示;
会被识别为桌面浏览器.

由于Opera Mini并不是采用直连服务器的方式,而是在Opera的代理服务器(Opera Mini Server)对所访问的网页进行转化压缩后才显示在屏幕上,所以它的特征显得比Opera Mobile要特殊一些,要详细了解可以看一下Opera在开发社区的这篇文章.

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current behaviors and usage patterns.

微格式将人类作为首要的考虑因素,然后才是考虑的数据的机读性,它是建立在已经被广泛使用的标准之上的一套简单开放的数据格式.我们不需要抛开我们的工作习惯,因为微格式提供符合当前我们行为和习惯模式的简便方法去解决问题.

从上面的话中,我们可以分析出微格式是一种”数据格式”,它的存在是为了在兼顾机器和人类的条件下用最简单的方法去解决存储和表达数据的方法.然后从下面的一副图中,我们可以看到微格式的架构方式和表现形式,这幅图也是出自现在官方的解释页面.

从上面的图中,可以看到XML,XHTML,微格式的相互关系.XHTML是XML的一种衍生和补充,XHTML的基础是XML.XML是一种数据存储方法,而XHTML更偏向于结构的直观表现,XHTML的产生弥补了XML的不直观的特点,降低了终端用户使用XML的困难程度,但是也从一定程度上忽略了XML存储数据的特征.举一个简单的例子,如果将一本书的信息用XML表现,或许可以这样写:

<books>
<book>
<title>Books’s name</title>
<author>Book’s author</author>
</book>
……
</books>

如果我们直接使用(X)HTML表现:

<ul>
<li>
<span>Book’s name</span>
<span>Book’s author</span>
</li>
……
</ul>

排除故意极端简化XHTML代码,可以看到,XHTML只是呈现给人类看的,我们可以理解,这是一本书,书名是什么,作者是什么.但是反应给机器的只是一段代码,没有任何含义的代码.如果我们这样写这段代码

<ul class=”books”>
<li class=”book”>
<span class=”title”>Books’s name</span>
<span class=”author”>Book’s author</span>
</li>
……
</ul>

当然,上面的这段代码只是举例之用,不是微格式规范.排除使用DOM方法分析代码中的钩子(hook),机器也不可能从其中读取什么有效信息,但是至少这样有一种方法可以让机器读取代码中所反应的数据.对于class是否滥用可以看一下这篇文章的解释.而微格式的产生正是弥补了XHTML在数据存储上的弱点,可以说增强了XHTML的数据的机读性,或许我们也可以说增强了标签的语义表现.

到此为止了?微格式做的只是如此?当然不是.分析来看,第二段代码和第三段代码对终端用户看来并没有什么差别,在屏幕的表现是一样的.这样增强机读性,增强语义化产生不了任何作用,只是白白在代码中平添了几个字节,或许更有理由让人说我们这是在滥用class,我们继续,首先看看用微格式增强机读性后用来做什么.

Yahoo是微格式的大力提倡者.Flickr一个图片分享平台,用vcard微格式处理用户信息数据,通过应用软件直接获取页面上的用户信息数据后,将这些数据导出或者直接导入到其他的应用程序中,例如使用Firefox的operator插件可以分析和到处数据,然后根据提取的geo,location等地理信息在Google Map,Yahoo Map中定位用户,伴随着相关应用软件的开发,vcard数据可不只是能用作这些.再来看看Yahoo的对微格式的另外一个应用upcoming,是一个日历的事件管理应用,在获取页面的hcalendar微格式数据之后,它可以将数据导出或者直接导入到其他的web日历事件管理软件中.

Dopplr提供的或许更加让微格式的应用方向更加清晰.它提供的服务是将你的行踪与你的联系列表关联起来,方便你的朋友关注你的行踪,及时的为你提供帮助,主要方式为常规的RSS订阅和iCal订阅.你在网上的某些页面的hcard,hcalendar微格式数据可以导入到Dopplr中,然后可以将这些数据导入到支持Dopplr的微格式数据的程序中,当前主要为Mac机的iCal和支持多个系统平台兼容iCal数据格式的Mozilla产品Sunbird.

说到这里,使用微格式不只是web代码语义化那么简单.如何应用微格式是最重要的.对于微格式如何被解析,可以看看Brian Suda的一篇文章Parsing Microformats,或许有所帮助.到Brian Suda的个人网站上也可以找到更多有趣的东西.

网格的存在在字体设计中是因为要求字体具有良好的辨识性,而在传统的平面设计和排版行业中,除去作为信息载体的可读性的特征,网格系统的使用有助于生产效率的提升.而网页作为承载信息的新媒体,是传统媒体在屏幕上的表现形式,网格系统的使用同样能提升可读性和效率.而负责表现形式的表现层主要是由层叠样式表(CSS)来控制的.

网页网格系统组成元素(翻译自Web Standards Creativity一书)

宏观元素(Macro elements)表现:宏观元素主要负责网页结构(Structure)表现.主要包含内容分栏(Columns),网站头部(Master head),主导航(Main navigation)和网站底部(Footer).

微观元素(Micro elements)表现:微观元素主要为结构内部的填充元素表现.主要为侧栏元素(Sidebar elements),状态栏(Status boxes),标题(Headings),列表(Lists),表格(Tables),链接(Links),段落(Paragraphs),图片(Images)等.

网页网格系统的实现要点

由于网页主要显示载体为屏幕,不像传统的纸张一样具有固定的画布(canvas)尺寸,整个页面的比例(ratios)要求考虑到元素的度量,如画布,字体,图片,边距以及其他空白的单位设置.另外还需要考虑到网格系统的重用性(reusable),扩展性(flexible),兼容性(compatible)等要点.
[未完待续,详细看一下当前存在的几种网格布局(YUI Grid,Blueprint,YAML,960 Grid)的实现再写.]

文档名称:MicroFormats Cheat Sheet
作者:Brian Suda
文档语言:英语
版本号:r14
文档地址:http://suda.co.uk/projects/microformats/cheatsheet/
文档更新订阅:http://suda.co.uk/projects/microformats/cheatsheet/changelog.xml

文档名称:微格式快速参考表
作者:Soda
文档语言:简体中文
版本号:r14
文档地址:http://files.cheshirecat.cn/microformats.cheatsheet-zhCN.pdf
文档打印详细:PDF格式,生成程序illustrator CS3,CMYK四色,适合打印.纸张大小为A4

微格式的官方网站是这样描述微格式的产生和应用的:

微格式将人类作为首要的考虑因素,然后才是考虑的数据的机读性,它是建立在已经被广泛使用的标准之上的一套简单开放的数据格式.

因为微格式是建立在广泛采用的标准之上的,这就意味着发布者只需要为原始网页上的HTML标签添加一些额外的语义化的代码就可以了.微格式赋予了HTML元素超越其本身语意的含义,这是一个粉碎,混合以及聚合的过程.举个例子,通过在网页上为一个即将发生的事件添加一些语义化的标记,例如事件发生时间这些属性就会被类似个人事件管理器的这类服务或者软件所抓取.

微格式所涉及的全部是页面上的语义化信息的表现,它将信息以一种非直观的方法表达出来.将这种将语义化的信息直接放入到HTML代码中的方法并不是一个新鲜事物,在web产业化时期,人们就将这个概念讨论了不止十年,但是,直到在许多志愿者不断的发布文档,提供支持,编撰代码库和开发一系列工具之后,微格式才真正展现在我们眼前.

在本篇文章中,我只是就微格式自身的简单应用进行阐述,难度也就仅限于为一个HTML元素添加一个Class属性的程度.相信我,体会微格式的益处不过是轻而易举.

贯穿全文的两个案例都是最平常不过的,接下来我们看一下如何对人和事件信息进行微格式处理.

另辟蹊径

借用微格式官方网站的一个比喻,微格式在尝试铺设小路.你无时无刻都可以看到各种各种的小路,在图书馆附近,公园里和大学周围.人们总是习惯在原来的路上铺设出属于自己的捷径,然后日复一日,这些路就越来越明显.强制人们遵守约定俗成的方法倒不如另辟蹊径.

微格式尊重人们的选择,使用不断积累的各式各样方法去扩展那些已经发布的信息.微格式成功之处正是在此,它不强制人们去改变它们的习惯,要想修改你发布的信息,你只需要稍微修改一下HTML代码就完成了.

使用微格式处理用户信息

网上存在多少份用户信息?几乎在每个你所注册的站点上都会存在一个包含姓名,昵称,email,URL和其他联系信息的个人页面.使用微格式,我们可以让信息更加有用.你可以想象一下,你不用使用复制粘贴这种费时费力的方法,只需要使用导入就可以将你的用户信息导入到其他的应用程序之中,节约了你每次注册时都要填写重复信息的时间,而你的朋友只需要轻轻点击一下就能将你添加到他们的联系列表之中并且会随你信息的变化而更新联系列表.

hCard就是为了适应这种需求而产生的一种微格式,它是基于已经被广泛使用的vCard之上.你可能不会知道,当时使用你的移动电话进行联系人信息处理时,可能到现在为止你使用vCard对你的地址本进行导入导出操作已经十年了.当然,你就没有必要再去发明轮子,hCard的好处正是在这里,只需要一点必要的帮助能够读取vCard的程序也能轻松读取hCard信息.

hCard主要用来标记人,地点和组织信息.hCard必选的属性只是name一项,其他属性都是可选的.这里提醒一下,由于微格式的原则之一是不对已经发布的信息进行任何多余的修改,也就是说如果你在发布信息时,如果你没有设置电话,email和地址信息,hCard并不会强制你进行添加.

现在看下面这个简单的例子,这是一个很常见的朋友同事信息列表:

<li>
<a href=”http://suda.co.uk”>Brian Suda</a>
</li>

首先我们要做的就是在HTML中添加一个值为vcard的类(Class),这样数据就被封装在这个类中.

<li class=”vcard”>
<a href=”http://suda.co.uk”>Brian Suda</a>
</li>

vcard是一个容器,这样列表项(li)元素中的数据就被当作vCard类型数据.

可能现在有人会说,类(class)只是使用在CSS中的,你这不是滥用么?或许不是,根据HTML4规范,class属性只是浏览器的一个常规属性,而微格式只是可以接受class属性的使用而已,这里的class属性并没有真正应用CSS.接下来,我们为这个例子中的列表项(li)元素添加name属性:

<li class=”vcard”>
<a href=”http://suda.co.uk” class=”fn”>Brian Suda</a>
</li>

我们在这里为”a”元素添加了一个值为”fn”的class属性,”fn”相当于vCard值”FN”,它是”Formatted Name”的缩写,在大部分应用是是被用来显示名称的.在这里我们还可以添加其他的语义化属性值,我们刚才只是设置了”name”,但是这里还存在一个链接,于是我们还可以为”a”元素的class属性添加一个”url”的值.

<li class=”vcard”>
<a href=”http://suda.co.uk” class=”url fn”>Brian Suda</a>
</li>

你可能会有疑问,一个class属性可以有多个值么?答案当然是肯定的.class属性具有相当强的扩展性,你可以添加其他你想添加的值,只需要以空格进行分割就可以,这些值可以包含CSS类名称.对于HTML和微格式这都是有效的.

轻而易举,如此几下我们就使用hCard对一个列表进行了微格式处理.当任何能识别微格式的软件打开我们的网页时,它很容易就获取这些姓名和相关链接的信息.

更多hCard的信息你可以在微格式的官方站点上找到,站点上描述了几乎全部你可能会为一个人或者是地点,组织添加的信息,包含地址,电话号码email,网站和组织角色.作为一个信息发布人员,你可以自己去手动去添加,当然你也可是使用一些有用的插件去创建它们.它们算起来并不多,并且都富有一定的含义,所以理解起来很容易,这个列表可能会对你有所帮助.

使用微格式处理事件信息

当然信息不只是涉及到人和地点,常见的还有在线发布的提醒事件.人们发布着各种各样与时间相关的信息以方便记忆,为了给这些数据富有语意,志愿者们创建了hCalendar微格式.像hCard一样,hCalendar是建立在已经被广泛应用的iCalendar之上的.下面我们以常见的blog文章格式为例.

<p>
Hey everyone,
next week is my birthday party,
we should all meet up at my house for pizza.
</p>

你不用思考就可以看出在上面内容中所反应出来的信息,人类是聪明的,通过逐行的阅读,我们可以清楚上面事件的细节内容,例如事件发生的时间和地点.而我们的电脑,在这方面,可以说是愚蠢的.它们不会认为这是一个事件,而是只把它们当作一个文本段落,不过在添加hCalendar之后,它们就可以正确的获取这些重要的信息.接下来我们看如何为上面的文字段添加hCalendar标记:

<p class=”vevent”>
Hey everyone,
next week is my birthday party,
we should all meet up at my house for pizza.
</p>

第一步为p元素添加一个值为vevent的class属性,分析器将会认为包含在p元素中的数据都涉及一个事件.在上一个例子中,我使用的是li元素,微格式不会强制要求使用指定的HTML元素,但是附加语意能否正确应用取决与你所选择的元素.接下来我们为这个事件添加一个摘要(summary).

<p class=”vevent”>
Hey everyone,
next week is my
<span class=”summary”>birthday party</span>,
we should all meet-up at my house for pizza.
</p>

通过将”birthday party”封装在一个添加了值为”summary”的class属性的span元素中,我们可以说这个就是整个事件的摘要.我们使用相同的方法为此事件处理地点信息,只需要将地点信息封装在一个添加了值为”location”的span元素中就可以了.

<p class=”vevent”>
Hey everyone,
next week is my
<span class=”summary”>birthday party</span>,
we should all meet-up at
<span class=”location”>my house</span>
for pizza.
</p>

最后,最为重要的是为此事件添加一个发生的时间,这就体现了微格式将人类作为首要的考虑因素,然后才是考虑的数据的机读性的特征.人类可以理解什么是”next week”,但是电脑不行,我们需要对”next week”进行精确的表述.

ISO的日期标准格式”YYYY-MM-DD”,必须是一个四位数的年,两位数的月和一个两位数的日期,在计算机相关领域广泛使用,但是对人类来说它的可读性并不是最好的.ISO这种日期格式虽然解决了美国日期和欧洲日期存在的差异,但读起来不怎么自然.所以我采取一个折中的方法去解决这个人类的可读性和机读性的问题.

<p class=”vevent”>
Hey everyone,
<abbr title=”2008-05-29″ class=”dtstart”>
next week</abbr> is my
<span class=”summary”>birthday party</span>,
we should all meet-up at
<span class=”location”>my house</span>
for pizza.
</p>

通过使用一个class属性值为”dtstart”的abbr元素,我们可以理解这个日期是事件的起始日期,计算机在不明白”next week”的情况下会尝试去读去abbr中的title属性值去解释”dtstart”,然后就可以获取ISO日期.如果你不明白在这里我为什么选择abbr元素,你可以参考一下这里.

在进行上面的一系列处理之后,这些事件信息就很容易被各种各样的日历程序所获取.你可以将它们发送到电脑或者移动电话上,当然也可以使基于web的日历应用,或者和朋友分享,或者使用已经存在的接口应用程序去发布它们.

如何使用微格式

我在这里提供一些工具便于你对微格式进行有效的创建和信息获取.

hCard Creator会根据你在表单中所添加的信息动态的创建代码,然后你可以这些代码复制到你的网页中.自然而然,会有hCalendar Creator的程序.还有Dreamweaver,Textpattern,WordPress的微格式插件和为数众多的hCard和hCalendar网上资源.

但是如果你对微格式不能进行获取和利用的话,创建就没有任何意义.自然,这里会有很多用于微格式获取和维护的程序.

Operator是firefox的一个插件,它会对你当前浏览的页面进行侦测并提供了相关选项和工具,以hCard为例,一旦hCard内容被侦测到,它就会列出一个列表并且显示一个”导入联系信息”的选项.Operator非常智能,它不只是会获取这些信息,同时也会提醒你当前页面存在微格式内容.

Technorati 提供hCard和hCalendar的微格式支持,如果你提交一个含有hCard和hCalendar信息的页面,其提供的微格式服务会返回vCard和iCalendar的等价信息.Technorati当前正在测试一项微格式搜索引擎服务.如果站点在Technorati的索引列表中,而网站的HTML包含任何微格式内容,数据就是可以被搜索到的.这样,你可以设置一个iCalendar订阅项,当你所在城市发生包含”jazz”,”tech”或”Frisbee”这些关键字的事件事,网络成为了一个你的数据库.这只是迈向语义化搜索的第一步,也是很多年前就已经被预料到的.

还有各种各样程序语言提供的库方便我们去获取HTML中的微格式,然后应用到web中.

MoFo for Ruby
Sumo for JavaScript
X2V in XSLT
hKit in PHP
Text::Microformat for Perl

真实世界中的hCard和hCalendar

现在一些组织已经开始微格式去处理他们的数据,有些你听说过,有些你可能没有.

Yahoo!是微格式的大力倡导者,在它旗下的众多站点中都可以看到微格式的踪影.例如图片分享站点Flickr,事件站点Upcoming,还有它的科技站和本地站.

Flickr,正如你在图1中所看到的,在用户信息页面上应用了微格式的hCard,也就是你可以直接将用户信息页面上的微格式数据导入你的地址本.如果你已经安装了Firefox的Operator插件,你就会看到可以将微格式数据导入到各种各样的地址本中,不管是桌面程序还是web程序.

Upcoming,如图2,在站点中使用了微格式的hCalendar去处理事件数据,这会让我们方便不少,当浏览Upcoming是就可以随时将事件数据导入到自己的日历事件管理器程序中.

在Yahoo!的科技站和本地站中,使用到hCard去处理本地公司数据.如果你在Yahoo!本地站搜索披萨店会返回hCard格式的数据,你很方便的就可以获取它们的电话号码去订购.

另外一个让人惊喜的微格式应用是柬埔寨黄页,这个公司将hCard用在电话目录中,创建了数百万的语义化数据实例,所做的只是改动一下内容管理工具的模板.

对于微格式在移动社会化网络中的应用,我们可以由Dopplr可窥一二.当前Dopplr还处于内部测试阶段,它面向的社会群体主要是那些频繁旅行的人.如果某一天它正式发布,你可以创建新账号,然后通过提交一个包含微格式数据的链接页面导入联系列表,Dopplr会自动分析页面,获取联系人信息并在它的数据库中查找你的联系人.它也可以导入hCalendar数据.如果你计划一个旅行,你可以通过提交一个使用了hCalendar的链接页面,Dooplr就会分析页面数据然后把它导入到你的计划表中,而你的朋友可是随时注意你的行踪.

最近,Microsoft也提供了一个简要的教程指导人们如何在SharePoint中使用hCard对联系人信息进行处理.

微格式展望

微格式的未来当然是光明的,一些网络主流公司让微格式的未来越来越明朗化.例如Yahoo!,它们在预见微格式的潜力之后将它应用到不同的产品中,而从浏览器厂商也开始表现出浓厚兴趣,不断的在其产品中添加功能以支持语义化标记.

你可以想象一下,你的移动电话或者掌上电脑可以自动获取一个页面上的hCard数据,它会在电话号码上添加一个菜单项方便你拨叫,如果配置适当的话,你可以将这个信息直接导入到电话本中.如果数据中包含一个邮政地址,浏览器会将这些信息发送到Google Map,并在地图上显示详细位置.

当然数据的自由移动可不仅仅限制于联系人信息,你可以对事件数据和其他结构的数据进行相同的应用.如果浏览器在一个页面上发现了hCalendar数据,它便将事件信息导入你所使用设备的日历事件管理程序上,添加一个提醒或在地图上标记位置.微格式的优点也在于对终端用户它是不可见的,并不是每个使用微格式的人都需要了解.从本质上将,微格式只是将数据自由化程度加大了.

RSS阅读器在这段时间非常流行,那我们是不是可以对地址本做一个类似订阅的功能.当前情况下,我们只能一遍又一遍的将朋友的email和网站复制到自己的地址本中.这是一项无聊透顶的工作.如果地址本使用RSS的推送功能,我的朋友很容易的采用用微格式创建了他们的联系信息页面之后,地址本应用程序便能在这些页面上搜索信息并能即使更新,他们也不必说每次有信息改变时就给他们地址本里的人群发通知.

这里所提到的例子都是微格式的简单应用,需要做的只是发布者在HTML添加语义化信息就可以了.不管上面的例子是如何实现的,终端用户只是应用就足够了,不必去究根问底.

微格式社区变得越来越强大,影响力也与日剧增.由于它的开放性,越来越多的人在Microformats Wiki上不断的添加案例和文档,最容易做的就是在你自己的站点上去使用微格式.使用微格式,你可以将你网站上呆板的文本内容变成你无法想象功能强大的信息包.

看一下截图,分别是javascript,html,CSS语法着色效果:

下载地址:

http://files.cheshirecat.cn/aptana.tar.gz

2007年是Helvetica字体诞生50周年.纪录片导演Gary Hustwit于当年12月份将一部名为Helvetica的字体纪录片搬上了荧幕.由于一直等待的中文字幕迟迟没有发布,便找来英文字幕,夹生的把这部片子看完了.当然,正如这部片子的名称所反应的一样,片中充塞着对helvetica的称赞和炫耀,其他的更多是设计师,无论是字体设计师和平面设计师对设计这个行业以及设计和社会的交互的各种的观点.

影片中采访的设计师们对字体的表现形式,表现力和字体和空间(space)的关系都有比较普遍的观点,看一下影片中的对话就可以明白.

Massimo Vugnelli解释字体和空间的关系时是这么说的:

We think typography is black and white.Typography is really white, it’s not even black.lt is the space between the blacks that really makes it.ln a sense it’s like music,it’s not the notes, it’s the space you put between the notes that makes the music.

我们认为字体是黑与白的交合,字体其实是白色的,根本不是我们所说的黑色.黑色线条之间的空白形成了字体.形象一点就像音乐,创造音乐的不是那些音符,而是音符和音符之间空白创造了它.

个人认为上面对字体的解释来源于早期的铅字的印刷,无论是凸版还是凹版的,字体都是由于周围的空间的挤压形成的,原始的本意.

Wim Crouwels 擅长使用网格(Grid)去创造字体,被别人称呼为Gridnik,而他使用网格创造字体的本意是因为这样可以使字体更为的清晰(Clarity),干净(Clear),良好的可读性(Readable)以及直观(Straightforward).看一下它在影片中的原话可以看一下他所认为的字体应当具有什么样的表现形式.

lt should be clear,it should be readable, it should be straightforward.So I started using, gradually, grids for my
design,for my catalogues for museums.I invented a grid, and within the grid I played my game.But always along the lines of the grid,so that there is a certain order in it.That’s why l use grids,that’s why they call me ”Gridnik.”For me, it’s a tool of creating order,and creating order is typography.

字体应该是清晰的,干净的,便于识读而且直观.所以我逐渐的使用网格来设计字体.以我为博物馆(这里指Stedelijk Museum)编写的目录为例,我发明了一个网格,然后在网格里玩的不亦乐乎.如果你一直坚持使用这个网格,你会发现它里面的规则规律.所以这就是我为什么使用网格,也是别人称呼我为网格族的原因.

片中还有大量的相同或相左的观点,有兴趣的可以看一下.相关链接:

Mininova的BT种子地址:http://www.mininova.org/tor/1018081

英文字幕下载地址:http://www.opensubtitles.com/fr/subtitles/3171504/paradise-alley-en

影片官方网站:http://www.helveticafilm.com

作为一个CSS方面的专家,所做的不只是记住选择符(Selectors)那么简单,提升样式表的效用和可维护性,以及设计蓝图和管理工作流程都是工作的一部分.在本篇文章中,Jina Bolton给出了10个CSS技巧提示,这些内容是由对12位顶尖的设计者的调查提炼而来.

接下来,我将重点放在创建性感的样式表方法的讨论之上.一旦CSS被用来创建具有魅力的网站,CSS的书写事实上就已经成为了艺术.使用何种方法创建,架构以及管理CSS成为了一件美妙的事情.

那么怎么创建这些性感的样式表?样式表应该具有那些特征呢?

几个月前,我有幸出席了在俄勒冈州波兰特岛所召开的Web Visions 2007的主题会议.在准备我的演讲报告时,我调查了12位工作在网页设计方面的设计人员和开发人员.基于调查的结果,再结合我自己的工作经验,我编写了下面的一个列表用来在创建样式表的时候给予自己以适当的提醒.

01. 保持CSS脱离标记

使用链接或者导入样式表的方法对于中阶或高阶的CSS开发人员来说都是再正常不过的事情,但是我在这里依然会强调一下这种方法的重要性.我见过的许多站点,在创站之初,CSS文件很整洁,组织的也井井有条,但是随着时间的推移,这些文档由于内嵌的甚至内联(inline)的样式出现而变得杂乱无章,一方面可能是由于给予的更新期限很短,另一方面或许就是纯粹的由于懒惰.

你正忙于一个拥有成千上万条的渠道内容同时出现的网站的大面积更新,给你的期限很短,所以你就选择了使用内嵌或者内联样式这样一些”快速修补”的方法.一些年过去了,习惯依然…,直到有一天你被告知这个站点需要重新设计,但是所有的内容仍然不变,这个时候而你只有一个星期去完成.想象一下,这将是一个怎样的境况.

其实这是很普遍的情况,更新样式表是一个再简单不过的任务,在你几年的”快速修补”之后,这些样式遍布了整个站点,相信你根本没办法记住他们在那里.所以现在你面对的只有2个选择a)在一个星期之内找出一个方法去清理规整这些样式b)找一份新的工作吧.

千万不要将你的工作变得愈来愈困难.使用链接和导入样式表是你的不二之选.规范的创建并保持样式表的整洁,你会活得更容易一些.

提示:小心使用链接或导入的方法会在标记上添加冗余的样式.每次你创建新的样式表,你都会更新要不就是添加新的样式,过多的外联样式不只会使补丁的修复变得困难,也会使样式表更难于维护.因此可以理解为什么大型站点会为不同的区块部分而去分离样式表.小心不要玩过火了,过犹不及.

这里很值得提及一下的是过多的样式表将会使HTTP的请求数增加.这些都会潜在的影响性能.因此,Internet Explorer将链接的样式表数限制在了32个.

02. 语义化不应当只是句漂亮话

你应该明白为什么我会说到这个.语法学是你最好的朋友,选择合适的,有意义的元素去描述你的内容,确保你所选择的是富有语意的类(class)和ID特征值.做正确的事情会使你的生活变得容易很多,如果你是某个团队的一分子,对团队其他成员来说也是如此.看一下下面的这条规则:

.l13k { color: #369; }

如果你是刚接手这个工作,你在CSS文件中看到了上面的内容,你能不能说清楚这个类是什么意思?大部分情况下你都会说不.这个类的名称可能是个缩写,但是恐怕没有办法去弄清楚他到底是什么的缩写,眼前是一摸黑.或者是这种情况,可能是你把它放到这里,你现在很清楚它是什么意思,但是你能保证3年之后你还记得它是什么意思么?

现在我们看一下下面的规则:

.left-blue { color: #369; }

你可能立即知道这个类选择符是为左侧边栏的显示蓝色区块而创建的,这时它就正确的表达了一定的语意.正如我在上面提到的,一旦要你在在一周内要重新设计,但是在重构过程中,这个区块需要定位到右边,颜色变为红色,类的特征值就没有任何意义,所以你现在需要改变你所有的特征值,要不就什么都不改变,不过这样可能或导致重重的困惑.

因此解决上面问题的最好方法就是在类特征值的命名中避免使用颜色(包括颜色名称和十六进制值)或者宽度,高度的尺寸值.同时你也尽量的避免去使用任何表明表现形式的值,例如box.反之,将表现和内容分离的意义也就不复存在了.

最后,我们看一下最合适的命名规则:

.product-description { color: #369; }

你应该能理解,这个规则是应用于产品描述.无论你的设计改变了多少次都不会改变.清楚明了的感觉不错.

03. 体会注释的优点

如果使用注释的方法得当的话,为你的CSS文件添加注释可以在开发过程中给予你和其他人很大的帮助.最常见的是为CSS样式规则添加提示信息,不过使用注释对优化组织结构和提升效用也很有帮助.

提示和标签

这是注释最常用的途径,可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦.这种应用简洁性最为重要.例如:

/* Turn off borders for linked images */
img { border: 0; }

时间戳和签名

许多设计人员和开发人员会在最新更新的CSS文件标注日期时间,以及他们的名字.这些都会提供给我们一些联系信息以及文档更新信息.

/* Sushimonster Typography Styles Updated: Thu 10.18.07 @ 5:15 p.m. Author: Jina Bolton —————————————————-*/

对于一项工程,这种方法会很有用,如果你是小组一分子时,这更是显得尤其重要.要提醒的是,一些组织都要求在文档中留下这类信息,而有些公司喜欢把名字和日期这些信息放在文档之外的地方,所以在开始之前最好弄清楚这些事情.

组织

在CSS文档中使用注释指示不同的区块是个不错的主意.例如,如果所有的头部信息被组合在一起,你可以使用注释使它和下面的区块样式区分开来.

/* HEADER —————————————————-*/

接下来我会就此进行进一步的阐述,现在我们先讨论一下如何”分离样式类型”

注释标记

如果你的CSS文件都是按照我上面所说的按照区块进行划分的话,使用注释标记可以配合”查找”功能使你在文档的各个部分之间切换自如.标注一个章节(Chapter),例如使用等号”=”,然后在后面添加一个区块的名称,例如”HEADER”,这样就为你的CSS文档创建了一个”锚点”.

/* =HEADER —————————————————-*/

这种方法在内容繁杂的样式表中尤其有用.更多的相关信息你可以在

Stop Design站点上了解.

参考

将注释作为参考说明不常见但不失为一个有用的方法,一个典型的例子是Steve Smith在他的CSS文档中包含一个为配色而添加的参考信息注释.

/* COLORS
Body Background: #2F2C22
Main Text: #B3A576
Links: #9C6D25
Dark Brown Border: #222019
Green Headline: #958944
*/

你可以将这个向导性的注释放在CSS文档的顶部以提醒你站点是如何配色的.另一个例子则是将注释作为类目录(index-like)的方法.你可以定义不同的区块以便于你在它们之间快速切换,可能会用到注释标记的用法,下面是一个例子

/* GENERIC HEADER SIDEBAR FORMS TABLES FOOTER */ /* =GENERIC —————————————————-*/

04.清楚什么时候使用条件注释语句和技巧(hacks)

现在有很大一部分文章会提及CSS技巧(hacks)产生的问题,并且说明在当前所有的Internet Explorer发行版本中为什么要使用条件注释语句.自然而然,肯定会有相左的意见.以前我也一直以为使用条件注释语句会比使用CSS技巧(hacks)好一些,直到最近有太多的例子证明这两种方法都算不得什么好的解决方案.

想象一下,你现在要为一个元素设置最小高度值,对于Internet Explorer 6来说,由于它不支持min-height属性,但是使用height属性就可以达到所要的效果,于是你就创建了一个新的样式表文件,并且在文档标记中使用注释语句来引用它,难道你所做的就只是为了这么一条CSS规则?如果将height和min-height属性放在一个CSS文件中,然后使用小技巧(hack)针对不同浏览器切换属性是不是会好一些?这种情况下,我坚持认为少用条件注释语句为好.

换个角度想一下,如果你放置了多个样式表文件,条件语句可能会使你的调试过程变得困难.如果你要更改一些东西,例如在上面的例子中,你就需要打开多个文件进行修改.很多情况下,对你来说,这将是一个繁重的任务.可以想象一下,如果你在主要的CSS文件中定义的规则,然后在需要3个不同的IE样式表中进行重定义.这些都给后期的工作留下了不必要的烦恼,尤其是如果另外一个开发人员在编辑时没有注意到这些需要重新编写的文件的存在.

假如你现在还在使用条件语句,我推荐你在主样式表中添加一个注释以便后来的开发人员知道IE专有样式规则的存在.当必须编辑height或者类似的属性时,这种方法可以提醒你需要修改的不仅仅是一个文件.

再次提醒一下,如果你使用CSS Hack 的方法,浏览器更新带来的更改可能对今后的工作带来影响,你现在使用的Hacks可能在下一个版本中就无法工作了.

05.组织选择符和声明

经常的,要保持CSS的整洁度和有序性.我喜欢将选择符按照样式的类别进行组织划分.

• 重置样式(reset styles)
• 排版样式(typography styles)
• 布局样式(layout styles (header, content, footer, etc.))
• 模块和widget样式module or widget styles
• 其他(etc).

然后,在每个组里面,我按照DOM等级将选择符组织划分:

• 任何父级元素样式(any parent styles)
• 块级元素样式(block-level element styles) (段落,列表等.)
• 内联元素样式(inline element styles) (链接,缩写等.)
• 其他(etc).

然后在上面划分的基础上进行详细的划分:

• 段落(paragraphs)
• 引用(blockquotes)
• 地址(addresses)
• 列表(lists)
• 表单(forms)
• 表格(tables)
• 其他(etc).

最后,我按照样式类型组织CSS声明

• 位置样式(positioning styles)
• 浮动/清除浮动样式(float/clear styles)
• 显示/可见样式(display/visibility styles)
• 空间样式(spacing styles)(margin, padding, border)
• 尺寸样式(dimensions styles)
• 排版相关样式(typography-related styles)(line-height, color, etc.)
• 其他样式(miscellaneous styles)(list-style, cursors, etc.)

许多人喜欢根据声明的字母顺序来排列,这种方法对我来说可能不太适合,但可能对你来说会非常适合.不过一旦你选择了任何组织方法,就最好坚持下去以保持其统一性.

06. 创建框架(framework,库)

当你在编写CSS时,如果你已经发现你经常反复的做同一件事情,考虑一下创建一个框架或库可能是个不错的主意.将一个样式表组合组成的框架作为你的网站的基础能够缩短的你开发时间.较为典型的样式表基本上都包含以下内容:

• screen.css – 一个screen CSS文件包含你所有应用在屏幕显示上的所有样式,可以选择性的导入附加样式,如以下样式表文件:
• reset.css – reset CSS文件被用于重置所有默认的浏览器样式,让我们更容易的完成各种浏览器下的兼容性问题.
• typography.css – typography CSS文件被用来定义字体,大小,行间距,字间距和字体颜色.
• grid.css – grid CSS文件被用来组织布局和结构.通过定义基本的头部,底部和列设置为你网站的创建轮廓,线框模型(winframe)
• print.css – print CSS文件包含页面被打印时显示的样式.

一个CSS框架的例子是由Olav Bjørkøy创建的Blueprint framework,开发人员主要为Jeff Croft 和 Eric Meyer等人.另一个流行的框架就是Yahoo! User Interface Library建立的.不过许多开发人员认为这些成型的框架包含的标记和CSS有那么一点臃肿,当然也包括了太多的表现类(class)和属性名称.

声明:当我在写这篇文章时,Jeff Croft发表了一篇主题为What’s not to love about CSS frameworks?(什么让你摒弃CSS框架),在这篇文章的评论中和谈及他听说许多人说我严重反对CSS框架,我不知道这从何说起,但是我仍然要重申一下我的观点,我不反对使用CSS框架,并且非常坚持使用它们.

最好的结果就是你最好创建适合自己或者你所在组织的框架.

07. 保持文档可读性和性能优化的平衡

每个开发者的样式风格可能不尽相同.许多开发者书写的样式表文件具有很好的可读性,并且会在把文件正式上传之前进行一些性能优化措施,例如移除注释,空白,缩进以及换行等步骤.这是一个不错的方法,也值得推荐.尽管如此,在某些情况下如果你不能进行那些步骤的时候,最好找到一个能够保持文档可读性和性能优化平衡的方法.对此,Steve Smith 有一个不错的建议.

另外,考虑一下使用连字符号替换下划线,微格式(Microformats )将连字符号作为标准的分割符号,不过某些特定的老版本浏览器在处理上可能有问题.你可以阅读一下Underscores in class and ID Names(类和ID中的下划线)这边文章来了解更多信息.

08. 管理文本编辑器

每个艺术家都会对使用他所了解的适合他们的工具,对于设计者和开发者来说也是如此.对于CSS,最好了解你所使用的编辑器.

现在有很多的文本编辑器可以使用,如TextMate,Coda,BB Edit,TextPad,Dreamweaver等,我在这里不是要告诉你选择那一个编辑器.每个编辑器都有自己的优势和劣势,最适合的编辑器取决于你的偏好.不过,一旦你选择了一个编辑器,最好把它了解的清清楚楚.例如快捷键时什么,有那些能用到的提示和技巧等等.

管理好文本编辑器时加快开发速度最好的方法.它会让你在创建样式表时更有效率.

09.使用版本控制

平滑维护是创建性感的样式表中关键的步骤.版本控制能帮上你不少的忙,它不只是对小组开发有用,对单独的设计者和开发者来说也很有用.

许多应用程序内置了源代码控制机制,Dreamweaver使用 登记/登出系统帮助开发人员确认所编辑的文件不是已经编辑过的文件,而同步功能可以将本地文件和远程文件进行同步,合并和替换.这些功能很容易上手,但在某些地方还是有不足之处.

Subversion (SVN) 和 Concurrent Versions System (CVS) 提供了更为强大的功能.通过附加的功能,你可以进行恢复,查看更改以及解决冲突等操作.这里有Jonathan Snook的一篇叫做“Hosted Subversion”的文章,你可以阅读以获取更多的如何快速简便的去操作它的方法.

10. 创建和管理样式表向导文档

在某些情况下,样式表向导文件是开发人员对语法规则和书写标准所编写的指导性文档,它常用被用作设计,开发和内容的大纲来使用.编写样式向导文档是为清楚的表达排版,网格,颜色,图片尺寸等内容而创建的参考手册.

创建样式表向导文档的时候,最好的办法是提供一个标记和CSS的参考性内容.这些参考可以被开发小组或者后期的开发人员当作手册来使用.另外,它还可以包含布局定义,在里面你可以列出所使用的不同布局以及相关的标记和样式.

最后,你所需要做的是一些开发者保证质量的必要步骤,例如检测有效性和可用性以便保证生产出高质量的产品.