可以看出，首次解析的时候，宽度取了117px，切换的时候竟然是126px，这个差异导致这里展示出现了问题。
再看下代码，这里是这样书写的：

很明显，换肤切换的时候，渲染的是写给ie6的属性值，所以出错了，据分析，动态加载js的操作可能导致了下划线的写法失效了，但是ff下面是好的，证明后面的是有效的，那也就可能是ie7本身的缺陷，导致样式动态加载的过程不能重新渲染。
为了解决这个问题，所以就采用单独处理ie7和ie6的问题，这样就不会出问题了，可以这样来写：

这样，ie7始终读取的是117px的值，ie的问题单独读取下面的写法。
大家有其他的看法也可以在这里分析，嘿嘿

CSS 已经很好了,但是我们可以让它变得更好一些,我们的目标是:

• 将CSS打造成一个更好的declaractive language（声明式语言）
• 提取出代码里面重复的部分
• 不会使得CSS成为a programming language (一种程式化语言)

在易用性上达到以下目标:

• 对于初学者来说，CSS将会变得更加容易
• 通过减少代码量来提高整体性能
• 增加更多的浏览器警示以增强语言的健壮性

为了达到上面提到的目标，我们的wish list主要体现在下面几个方面：

Variables - make global changes easier(变量)

在项目中, 经常会有一些颜色值或是高度值, 它们会出现在我们样式表的很多地方, 但是靠使用组定义之后会显得很散乱，而如果使用全局变量来对这些特性进行定义，那改变这些规则会变得很容易,同时又不会影响一个规则的集中定义。[译者注]

变量定义的规则如下:

例子:

变量调用:

例子：

prototypes - organize code into logical abstractions ( 原型 )

为了把项目代码写的逻辑结构强一些，我们可以使用原型定义来解决问题，通过原型定义,我们可以方便的定义一个模块，同时也可以很方便的对其进行扩展。[译者注]
原型例子：

定义原型 define prototypes：

例子：

修改原型 modify prototypes

扩展原型 extend prototypes

通过这样的扩展之后 .weatherMod 拥有了.mod的所有属性，包括子节点。
扩展的实现

普通的样式层级顺序依然是被考虑的
原型的封装特性 prototype encapsulation
例子:

.inner属于mod, 但是 leftCol并没有扩展mod, 所有这条规则是无效的,是会被UA忽略的。

MIXINS － combine small bits of repeating code (混合类型)

使用混合类型，可以把重复的代码合并，从而可以减少代码量，并减少维护成本。[译者注]

定义混合类型

修改混合类型

任何指向.clearfix的选择器都会修改混合类型
使用混合类型
例子:

这样就会把.clearfix的属性值赋值到当前位置
这样达到的效果就是:

为小段重复代码我们可以使用混合类型, 从而在HTML文档里去除非语义化的class命名，比如clearfix 或者是 rounded7px, 让文档变得更加的标准化.

混合类型不是层级化的，混合类型的属性值被调用的时候就相当于他们被定义在当前位置。

Prototype sub-nodes define the relationship between sub-nodes of the same prototype (原型子节点-定义一个原型子节点之间的关系)

原型里面我们通常会有很多子节点，如果能够将子节点之间的关系表达出来，一些将会工作将会变得很简单。[译者注]

但是这是必要的吗? 对于增加的复杂性这有其相应的价值吗?
我发现我自己经常写一些这样的注释

子节点例子:

例子来源于open source project 在.mod原型中corner height被定义为10px
子节点属性值计算:

使用这种语法可以定义同一个对象的各子节点之间的关系，规则如下:

• 只能访问当前对象的节点
• 只能访问已定义的值
• 不推荐用于很灵活的布局

成效

如果方法和语法是对的, 我们的代码是会符合我们之前设定的目标的，使用前景是非常广阔的
例子(yahoo)

在父节点上，如果我们把这些关系表示出来，这个设计的可预测性将会被提升。
成效一：简单
这个设计的实现有些难度，但是使用我们之前的原型实现这个设计是非常简单的

只需要两条规则就可以实现这个圆角框
成效二：代码很少，这样新手就很容易上手

总结

Wish list 里面我们通过 Variables(变量) 和 Mixins(混合类型) 提取出了代码中的重复部分, 通过Mixins(混合类型) 和 Prototype(原型) 显著减少了代码量, 提高了整体性能, 通过Variables(变量) 和 Prototype(原型) 子节点之间的关系降低维护成本. 并且通过wish list里面这些属性让css变成了一种更好的声明式语言, 变得更加易学。[译者注]

作者相关信息：
http://stubbornella.org
“stubbornella”on the web… twitter,dopplr,slideshare,everywhere…

http://github.com/stubbornella/oocss/
http://groups.google.com/group/object-oriented-css

第2次来贵州旅游，所以还是有那么一些熟悉，在第一次的基础上再来感受异国风情，应该别有一番韵味，这次的行程主要是去看黄果树瀑布，还有周边的一些古镇、公园游览，整个过程还是挺让人期待的。

陡坡塘：陡坡塘瀑布位于黄果树瀑布上游1公里处，瀑顶宽105米，高21米，是黄果树瀑布群中瀑顶最宽的瀑布，这个也是我们去的第一个景点，同时也是电视剧西游记的拍摄地之一，景色很壮观，因为当天贵州下小雨，所以空气都很清新，也有点冷，整个过程没有逗留很久，留完念就离开了：

天星桥：位于黄果树大瀑布下游7公里处，这里石、树、水的美妙结合，是水上石林变化而成的天然盆景区。抬头见山，透过山的缝隙看天，很美妙，脚下是水石结合，一个比较有特点的是数生步，365天，你可以找到你们每个人的生日，拍照留念，一阶阶的，很有感觉，有时候经过一个山洞，只能单人行，要比较小心，头上还有缠绕的藤，很绿，最后经过的地点高老庄，猪八戒娶媳妇的地方，这个景点就算是结束了：

黄果树瀑布：这个是这次旅游的重头戏呢，期待了很久，这个相比其它的景点要辛苦一些，因为要爬山，环绕瀑布走一圈，可以步行爬山也可以乘坐扶手电梯，然后步行至瀑布景点，因为考虑到会比较疲惫，所以我们选择了乘坐扶手电梯，这个确实是乘坐过的最大的扶手电梯了，因为下小雨，所以山路很滑，行走很小心翼翼，路上还碰到有行走中摔倒的，所以更是小心翼翼。在行走的途中还有索桥，很想跑上去使劲晃一下的冲动，应该会比较刺激，因为赶路，所以索桥就想回来再走，到了瀑布下面，好大的雾气，多的都要撑伞遮挡，真的是壮观，要高77.8米，宽101.0米呢。都说来这里一大事情就是洗肺，负氧离子特别丰富，所以进来就要做深呼吸，好好洗肺，呵呵。环绕而过，你可以从各个角度观看瀑布的壮观，左右上下，尽观眼底。穿过水帘洞，在内侧看瀑布，好奇妙的感觉，在嬉闹以及拍照中，黄果树瀑布也游览完了，在索桥上留下最后的身影：

龙宫：这个被人们誉为“大自然的大奇迹”，第一次看到这种奇观，有时候都不相信这个是纯天然的，你打开你的思绪，可以想象到任何你可以想象的东西，坐在船上穿越龙宫，里面很安静，只能听到我们自己的声音，看到种种奇观，奇石，心中有种奇妙的感觉，小龙女的闺房，以及唐僧师徒，哈哈：

第一天的行程也在不知不觉中结束了，很累，但是很开心，看到了那么很壮观的自然景观，还是不妄此行。接下来的第2天是去游玩2个古镇，爬天台山，以及逛公园。

天台山：巧用山型，寺庙与山混为一体，让我们现在不能想象当初是如何建造的，在里面也有很多传说，因为自己对这些历史文化不是很知悉，所以只能简单观看，但是爬上去，从上往下看，景观还是很不错的：

天龙囤堡：东距贵阳60公里,西距黄果树70公里。囤堡人是600年前明朝朱元璋的后人（汉人），是屯田戍守安顺的江南军队后裔。里面也有保留了当年汉朝人的汉族服饰，他们将未婚的女的称之为小娘娘，结婚的称之为娘娘，而且很多风俗，结婚的女子，要通过细绳进行开皮，就是拔掉脸上的汗毛以及额头前的头发，说是前面的头发都是苦发，拔的越多，以后的生活会越幸福，然后会在头上包上一个头巾，很有说法的。在这里，有很多建筑，很古典，有种徽派建筑的风格，都是用那种石头磊起来的：

青岩古镇：被誉为中国最具魅力的小镇之一，整个小镇都是用石头砌成的，一路上游客很多，两边全是各色的小吃和各种工艺品，小镇慢慢游玩，很长，其实够你游玩大半天呢，但是由于时间的关系，我们只走到一半就折回去了，有机会可以去玩一下，欣赏一下这里的风光：

花溪公园：融真山真水、田园景色、民族风情为一体，是贵州三颗“高原明珠”之一。里面也是山水相应，风景天然，让你不相信这个就只是一个公园，景色宜人：

终于在紧张的时间安排下，所有的行程到这里就结束，很充实的2天，玩的也都很high，整体感觉这次行程和值得，呵呵，大家有机会可以去游玩一下…

就目前的了解，除了opera浏览器之外，其它目前版本的浏览器都是可以通过设置自动换行的属性来使得连续字符以及标点符号实现完美换行，而不需要仅仅是通过overflow：hidden属性以及程序插入换行符的方法来实现换行，这个升级对于我们平时的工作来说，真的是一件很值得高兴的事情，也为我们平时的工作带来了很多便利，也使得页面体验更加的顺畅，目前配套的属性可以使用一下的代码：

通过这段属性的书写，可以使得除了opera浏览器以及ff低版本的浏览器实现自动换行的效果，在opera浏览器多余字符被截断的效果，希望今天的更新可以为大家的工作带来便利，有不对的地方，希望大家给予意见，谢谢，^_^！

背景：

为什么会出现RDFa这个东西呢？
现在的互联网主要是为人类的使用而创造的，虽然机器可读的数据是互联网上最先出现的，但是这些机器可读的数据一般是以单独的文件和单独的格式被发布在互联网上的，机器可读的和人类可读的数据之间的关联是相当少的。结果就是现在的浏览器在解析和处理web数据上的能力很差，因为浏览器只负责展示这些信息。

但是浏览器能够识别这些数据又有什么用呢？

用处多了，如果浏览器可以很好的识别这些数据，它就会形成一个固有的数据结构，而如果将这些数据结构加里利用，那我们就不需要记录一些信息都是通过无数次的ctrl+c和ctrl+V来完成了，一键操作就很方便了，而对于搜索引擎来说，就是更好的搜索结果展示以及更强大的数据挖掘能力了。

所以基于这个目的，RDFa出现了，就是为了达成我们的这个目的，它的全称是“Resource Description Framework in attributes”，其实从它名字的全称就可以获取到很多信息了，呵呵。

RDFa介绍：

提到了为什么会出现RDFa这个东西，那什么是RDFa呢，主要体现在下面几点：

• 连接机器与Web数据之间的一座桥梁
• 通过为一些可视化的数据提供一系列的XHML属性而使得这些数据可以被机器所理解。
• 基于XHTML+RDFaDTD

而与我们平时做的页面相比，使用RDFa技术的时候，它的头部doctype是这样定义的：

上面的这种是基于XHTML的，主要是因为此标签的可扩展性，可以使得RDFa更好的嵌入，但是虽然html无法有这么好的扩展，但是仍然有针对它的标准，定义如下：

而对于html来说，唯一需要解决的问题就是对名字空间缺乏的问题。

优势：

• 增强的搜索功能
• Publisher Independence
• 数据再利用性
• 自我控制
• 模块化架构
• 可提升可访问性

实现原理：

在实现主要是通过引入名字空间的方法在已有的标签中加入RDFa相应的属性来使得支持RDFa技术的浏览器或者搜索引擎可以解析到，从而达到优化的目的，就通过一段简单的代码做实例吧：

在上面的代码示例中主要用到了RDFa属性中的about属性和property属性，这段代码示例说明了一篇文章，然后描述了和这篇文章相关的信息，比如说标题，创建者和创建日期，而这些属性就可以使得支持RDFa的机器识别，从而形成跟我们人类所理解的那种结构的一个体系，达到我们的目的。

而我们要做的就是在我们了解这个网络的同时，我们也要让机器跟我们一样懂。

前景：

• W3C刚出不久的一个标准（2008/10/14）
• 目前firefox已经有了针对RDFa的插件，可以对使用RDFa的页面进行解析。
• Google已经在今年的5月12日发布支持RDFa以及微格式的宣言。
• 而在Google之前，yahoo已经支持了RDFa了，而且目前已经有相应的优化页面。

通过这些我们可以看出，RDFa的前景还是很不错，如果某一天真的浏览器也支持了，那我们的互联网上将会出现一种新的局面，期待中，大家有什么问题，也可以一起探讨。

今年的与会人数相比晚年增加了很多，而且年会上的分享也受到了大家的欢迎，很多人回来都提到收获颇多，也有遗憾没有能赶上这次聚会的，都说明年的时候一定来参加，casper大师也大老远的从西安赶过来，真的是令大家都很开心。

年会的人数增多了，看到很多熟悉的面孔，自己也有幸在此进行了一段分享，将自己的成果跟大家分享总是一件很愉快的事情，也希望这些东西都可以对大家有帮助，而聚会的目的并不是一晃而过，只是让我们都觉得，原来还有这么一个无形的东西将大家联系在一起，原来在自己的周围还有这么多有着共同爱好以及共同追求的人。

而自己总结的就是，不管在什么时候，也不管身处何职，唯一不变的是自己的追求，以及自己的一份执着，放心的去做自己想做的事情，放心的去做自己应该去做的事情，一切就会变得如你所愿，这次是自己第二次参加webrebuild年会，也希望以后每次自己都可以参加，希望在以后的每一次聚会中，都会有不同吸引大家的东西。

如果需要了解更多信息，可以在这里去查看年会会议纪要：
webrebuild第三届年会会议信息以及相关PPt下载

在没有被赋予强大的CSS的时候，是可以正常点击的，但是当赋予需要的CSS的时候，在ie8一下就会出现图片区域点击不到的情况：

如果将span标签块集化：

最终的结果依然不是不能点击到，但是图片区域以为的内容确可以正常点击。
而对于此，我的理解是这样的：
因为a标签本身就是一个内联元素标签，内联标签内正常情况只允许放置内联元素，放置块集元素本身语法就有问题，虽然表面上放置的span标签，但是我们又将其强制块集化，在某些浏览器下还是会解析错误，比如说ie6/7，所以这里针对链接的这种情况，出现的问题就是图片区域无法点击。
针对这种问题的解决方法：
保证在a标签中不要放置块集元素，或者强制块集元素，如果需要解决一些特殊效果，可以采取将这个强制元素跟a内置的img标签同级放置，这样也可以避免图片点击不到问题。

2008年网民上网设备调查

WAP相关介绍

XHTML MP是一种专门为手机和计算能力有限的设备设计的一个超文本计算机语言标准，是由Open Mobile Alliance定义的。它是WAP2.0说明中指定的官方标记语言。WAP Forum 是基于 XHTML Basic标记语言创造的，并从XHTML的完整版本中增加了一些元素和属性。XHTML MP支持一个简单的CSS版本，即WCSS/WAP CSS。而无线标记语言的演变过程是如下：HTML 4 -> XHTML 1.0 -> XHTML Basic -> XHTML MP.

WCSS/WAP CSS是CSS2的一个简化版本，增加了WAP特有的扩展。可以很简单的改变XHTML MP页面的布局和风格。

XHTML MP的语法规则

1. 标签必须完全闭合。
2. 标签和属性必须小写。
3. 属性值必须包含在引号标记内。
4. 不允许无属性值存在。
5. 标签必须完全嵌套。

使用XHTML MP+WCSS的优势

1. 最大优点：开发者可使用相同的技术开发适用于WEB和WAP的站点。
2. 支持WCSS。移动设备有很多不同的特征，比如屏幕大小，只需写一次结构，使用不同的WCSS文件即可。
3. 更多的表现控制。
4. 文件cache，避免多次访问同一页面重复与服务器交互
5. 表现和结构的分离：匹配不同无线设备的特征（屏幕大小）、不同客户端代理（PC、PDA、手机）；降低维护成本（新手机）；改变视觉和布局仅需CSS；重复使用CSS；便于工作细分。

使用XHTML MP+WCSS的不足

1. 不同的WAP浏览器对WCSS的支持不同，可能一个属性在这个WAP浏览器上支持，而另外一个不支持。
2. 外部的WAP CSS可能增加第一次访问页面的请求时间。原因：外部WCSS不存在于手机的Cache，必须从服务器下载；XHTML MP文档和外部的WCSS下载是不同的请求，增加了服务器压力；如果使用一个WCSS定义WAP站点的所有表现，该文件大小可能很大；WAP浏览器需要解析WCSS到XHTML MP文档。

Mobile browser工作原理

Mobile browser对于实际页面的处理模式

DOCTYPE

较少使用CSS或者不使用CSS

高级CSS语法我们尽量不使用，例如 media queries，现今只有少数的浏览器支持media queries，另外使用了media queries的页面很难在不支持他们的设备上做降级处理。

一些比较好的WCSS教程都推荐把CSS放在外部文件里面，但是这样是非常不实际的，在实践中我们还是把CSS语句放在内联样式中比较好。因为浏览器都要花时间去下载和解析外部CSS文件，而且浏览器根本就不会缓存外部文件或是只缓存指定大小以下的CSS文件。

不要改变链接的颜色，避免使用背景图片。在一些设备上试图使用CSS改变链接的颜色根本就不会起作用，另外即使是相同的颜色在不同的设备上也可能显示的不相同，有时这种不同会导致内容不可读。所以对于背景和链接还是使用浏览器默认的设置比较好。

使用合适的编码

如果不提供编码格式，非英语的字符可能会在浏览器里面显示不正确。

编码使用下面的方式进行指定：<?xml version=”1.0″ encoding=”UTF-8″?>

Mobile browser对于WCSS的支持

WCSS是一系列CSS2属性以及一些WAP特殊扩展属性的聚合，主要具有CSS2知识的web开发者，基本可以掌握WCSS的特性。在研究过程中，针对Mobile browser做了一些基础属性的demo测试，以下是测试页面中可以使用的Mobile browser simulator：

Nokia N70以及Sony K750移动手机simulator：http://mtld.mobi/emulator.php

Openwave simulator下载：

http://developer.openwave.com/dvl/tools_and_sdk/phone_simulator/index.htm

以下是针对一些基础属性制作的测试demo列表，由于大部分型号移动设备的模拟器不能很好的支持中文，所以demo中使用的英文展示，如果希望在真机上查看中文效果，可以去掉demo名称后的en：

• 不同型号的mobile browser对于不同级的标题、字体以及字号的展示会有差异。

测试demo：www.rainaxin.com/wap/html/font-size-en.html

• 基础标签的在不同型号mobile browser下的展示效果。

测试demo：www.rainaxin.com/wap/html/tag-en.html

• line-height属性测试

测试demo：www.rainaxin.com/wap/html/line-height-en.html

• 盒模型在移动设备中的展示

测试demo：www.rainaxin.com/wap/html/box-en.html

• WAP CSS相对于web CSS2的一些扩展属性

1、 Access key（访问键）：这个类仅仅包含一个WCSS属性-wap-accesskey，而这个WCSS属性被用来为其中的一个XHTML MP指定一个快捷键。在XHTML MP中，仅仅有4个元素支持这个扩展，分别是<a>、<input>、<label>、<textarea>

测试demo：www.rainaxin.com/wap/html/key.html

2、input标签功能扩展：这个input 扩展由2个WCSS属性组成-wap-input-format和-wap-input-required，这个WCSS属性主要被用于指定一个文本输入框中是否是左空以及在一个文本输入框中有多少个字符可以被输入。

测试demo：www.rainaxin.com/wap/html/input.html

3、Marquee标签功能扩展：这个功能扩展主要由5个属性组成-wap-marquee、-wap-marquee-dir、-wap-marquee-loop、-wap-marquee-speed以及-wap-marquee-style，这个功能扩展主要用于展现一些内容在屏幕中的滚动。

测试demo：www.rainaxin.com/wap/html/scroll.html

测试demo： www.rainaxin.com/wap/html/scroll_dir.html

以上是对一些基础的属性进行了测试，因为主要依赖于手机终端，同一个属性在不同的手机浏览器上展示也可能会存在差异，所以具体效果大家可以具体查看，在以后随着手机上网数的增多，手机将成为继PC之后的重要信息终端。

这里大家如果有比较好的东西可以一起分享，谢谢大家！

而正在自己还在缠绵这一切的时候，今天突然收到邮件，原来不知不觉自己已经来公司一年时间了，这一年的时间，从自己的处事，以及其他的种种，自己成长了很多，懂了很多，很多不成熟的想法也开始变的成熟了，在这个途中也有很多人在一直帮助着我，鼓励着我，在心里感到很温暖，也结识了各个方面的人，每个人身上也许有很多东西值得你去探究，一切都在点点滴滴的时间中不断积聚。

想想刚来的时候，自己很荣幸的成为会员团队中的一员，在casper的帮助下，学习了很多，自己的很多看法以及态度也些许有一些类似的影子，觉得这一路走来对自己的帮助很大。不久，被安排来校友，说实话，从那一刻起，自己才算第一次认认真真的使用校友，有种陌生但是又熟悉的感觉。伴随着校友的正式发布，以及宽版的上线，自己在这个过程中也体会到了团队，体会到了责任。所以做，不管结果如何，但是一定要用心去做。

在校友的这段生活中，周围的同事都很好，自己跟他们相处的也很融洽，大家都互相支持着，也共同在为校友做的更好而努力着。一年的时间也很长，算起来也挺短，跟校友的感情很深，每天只要看到或者听到有人提到校友，自己就很开心，听到不好的，马上着手优化，听到好的，想想还能不能更好。就是这种思想一直在充斥着自己的大脑，让自己不断的坚持下去。

一周年了，校友也有一岁多了，希望自己能够跟随着校友继续成长，也希望自己能够继续保留着这个积极的心态去面对以后的工作和生活，还有很长的路需要自己去努力，一定会做的更好！