自定义 HTML5 meter 元素样式

meter

HTML5种的meter元素非常有用,然而默认样式总是跟不上时代的步伐,所以琢磨了一下自定义样式的方式,仅适用于webkit内核的浏览器。Chrome 26 测试通过。分享给大家。颜色取自 Bootstrap Button


meter::-webkit-meter-bar {
background: #FFF;
}
meter::-webkit-meter-optimum-value {
background: linear-gradient(to bottom, #62c462, #51a351);
}
meter::-webkit-meter-suboptimum-value {
background: linear-gradient(to bottom, #fbb450, #f89406);
}
meter::-webkit-meter-even-less-good-value {
background: linear-gradient(to bottom, #ee5f5b, #bd362f);
}

测试地址 :http://shawphy.com/demo/meter.html

@simurai 写的更神奇的用法
@simurai 写的更神奇的用法

扩展阅读:
HTML5 progress元素的样式控制、兼容与实例

显示一些如title/meta之类的特殊元素

title代表的是页面的标题,很多时候跟h1的内容是一样的。
我在写页面的时候感觉总是重复一次很麻烦,
于是就索性把h1给删了,把title给显示出来参与页面布局,
这样整个页面就有趣多了
代码很简单

head,title{display:block;}

是的,只有一句话,让head和title都显示。
此外如果还对其他有兴趣,可以把meta、script还有style等都显示出来

另外,下面这句也会很有趣

body style, body script{
display:block;
white-space: pre;
}

可以让body中的script何style都原样显示出来,
怎么用好就靠大家自己发挥了。

当然,我们亲爱的IE6是不支持上面两个小功能的。
Firefox 3.6.6 和 Chrome 6.0.458.1 测试通过。

从模块化CSS到面向对象的CSS

最近做了一个项目,尝试了一些以前未曾上尝试过的方法——基于模块设计整个网站的内容。做到后期才发觉如果初期的时候设计的更好一些,能做到面向对象的CSS来设计,那整体开发效率以及代码复用方面会做比现在好。现在的代码还是有点不干净的地方,有些地方有点乱。这可能是这行当的“完美主义”情结吧 :) 希望下次可以做的更好。

1.模块化问题

首先,什么是模块化?我这里指的模块化并非仅仅指CSS模块化,还指的是HTML的模块化。那为什么要模块化?最主要特点是使各个部分相对独立,同时增加代码复用,最终目的是为了降低开发成本提升开发效率。

举个例子,当拿到一个项目的时候,扫一遍所有设计,就可以发现:
哦,一共有10种侧边栏设计,设计师就是把这10种侧边栏翻来覆去放在不同的页面中。那就很简单了,只要完成了这10种侧边栏,那么就算100个1000个页面也都是一样的,只要把HTML复制,粘贴就可以了。最大化的实现的代码复用。

鬼哥写过一篇文章来阐述这个问题:
http://www.cssforest.org/blog/index.php?id=134

2.面向对象的CSS

当进一步观察,很容易发现,有侧边栏都是有一个标题,再下面是是主面板,再有一类侧边栏是标签页的,下面展示的是新闻之类的内容。这个时候就完全可以抽象出两个类,一个是带标题的侧边栏(title_box),另一个是带标签的侧边栏(tab_box)。这样的好处是可以进一步抽象出代码,提高复用率。增加开发速度。
比如前者的HTML可以是这样的:


可能的CSS是:

.title_box {margin-bottom:10px;border:1px solid #aaa;}
.title_box h3{border-bottom:1px solid #aaa;}
.title_box .act{float:right}
.title_box .panel{margin:0 10px;}

为了保证代码的简洁易读,一些小的padding或者背景修饰我就不写了。
其中act是action的意思,这里偷学来的XD

是的,以上的HTML以及CSS代码就共同构建了一个基本的侧边栏类
他所具有的特诊是有边框,下面空开10px,右上角还有个“更多”

有同学可能会问,我为何要把act类放在那个span上而不是a上?为何要把panel放在一个div上?放在ul上不是可以减少代码么?这里我之所以这样写,是为了最少代码与开发成本之间平衡的考虑。所有成本中,人力成本是最高的,服务器有钱都可以加,但是代码得更快速的写出来才是要紧的。这么写的话可以最大保证通用性。同时,另一个理论用于支持这种写法的是:只有无语义的div和span适合拿来做布局,而有语义的元素不应当参与到布局中。当然,我这里只是一种权衡。

这么写是很灵活的一种写法。如果不需要“更多”,直接删除即可,如果不需要标题,直接删除即可。进一步来看,这段HTML可以应用到整个网站各个地方而不仅限于侧边栏。只要是形式相同的地方都可以用。

3.进一步实现继承和扩展

这里带来的一个问题是如何控制宽度。侧边栏和正文部分宽度不同,有些地方需求又各异,如何保证宽度?跳出思维局限来看,是不是所有某一宽度的div都同属一类?是的,他们是同一类的,所以只要定好了宽度,继承就可以了!

如果应用了栅格化布局,就能很容易理解这一点,那么上面的代码就应该是这样的


前面的g5就代表了其占了5个栅格!这个模块首先是占了5个格子的宽度,然后他是一个带标题的模块。进一步看,如果这个格子在不同的地方背景色不同,那可以继承了前面两个类的基础上,再加上一个 bg_blue于是这就成了:


没错,他就是一个占5个格子的带标题的模块,背景色是蓝色的。
好,可能他在某个地方是左浮动的,需要加上float:left,但不是所有的title_box都需要做浮动,那自然加上一个left类即可:


所以,挑选一个合适的基于栅格的框架很有意义,如YUI,BluePrint,或者OOCSS。
可以参考一下OOCSS,我很欣赏其中的思想
前端观察对其的介绍:http://www.qianduan.net/object-oriented-css.html

针对面向对象CSS的一个很好的PPT
http://www.slideshare.net/stubbornella/object-oriented-css

面向对象的CSS框架(OOCSS)的项目地址
http://wiki.github.com/stubbornella/oocss

我除了不喜欢其中到处都是为了圆角而设计的CSS之外,其他都很喜欢。

另外,写的时候,我搜索了一下,才发现这种思想08年初嗷嗷就已经有啦,我Out啦:
http://www.aoao.org.cn/blog/2008/01/oo-style/

4.这不是银弹

要坚信,在解决一个问题的同时必然会带来其他问题。

优先级问题
其中一个问题是优先级问题,由于模块细分,优先级很容易弄得焦头烂额。我的经验是每个类都负责一个部分——布局归布局,色彩背景归色彩背景。只有把各个类细分出来,才能避免样式的冲突。最后,id也是必不可少的。也需要important。比如上面,我就会定义一个noborder类,表示这个容器一定没有边框。用于个别地方是一个title_box但没有边框的情况。这个类里我就设置了

.noborder{border:0 !important;}

这样就能保证在任何时候,都不会有边框了。

同时,我对于文件规划,通常是一个页面只引入这个页面的css,比如首页的index.css
在这个css里再用import依次导入用于
重置的reset.css(重置标签类,其实一个标签本身不就是一个类么?div类,span类,本身就具有block或者inline属性,我们只是在其上面在扩展而已)
global.css(用于设置header和footer以及中间主体部分的布局,因为这两个部分一般整站是不会变的)
layout.css(用于设置栅格,构建内容以及侧边栏的宽度等。)
module.css(用于建立如title_box这种中等模块)
submod.css(这里放一些细节的模块,比如某一个新闻列表的完整细节样式设定)
如果模块较多,还可能分成若干的子块,侧边栏放侧边栏,中间的放中间。因为我相信绝大多数情况下侧边栏将永远是侧边栏,而不会跑到中间去。
如果有必要,也会建立form.css,专门设置表单元素,定义表单元素的外观。我会在里边设置一些 blue_btn,red_btn之类的class来定义不同颜色的button.
而后,在这个首页的index.css里写特定的样式。
这种规划的方法在很多文章中都能见到影子,如今再回头看,又有了更深一层的体会。

另外,import有潜在的性能问题。见这里
只是我实在抵御不住import带来的便利性,在html里加入一堆的link是多么痛苦的事情。而且大多数时候对性能的要求没那么高,为此我宁可节约一点人力成本。这是种取舍,因网站需求而异。但总体顺序还是不变的。
而解决这个性能问题的方法是用 条件CSS,可以参考这里
这里
id与class
命名的时候到底是以id为主,还是class为主,想必各位同学看到这里也该明白在下的观点了——以class为主,id为辅。因为同一段HTML可能用到页面的任何地方,而id在同页面里是不能重复的。而且,为了体现继承扩展的关系,应当使用class了。
那么id还用不用?当然要用,且不论id在写JS时候的速度,实际在写页面的时候,肯定会某一个模块做“个性化”定义,这就需要使用id了。个性化的东西写在id里,这样就不用担心干扰其他模块了,最大避免触一发动全身的窘境。通用与独立同在。

聪明的同学一定想到了什么,对,是不是记得曾经看到过启蒙读物上,一再强调,千万不要把一个类明明为left,因为指不准哪天他就不在左边了。不要定义为blue,因为哪天就改成红色了?是的,那个说没错,但我这里也没错。我们说的是两个东西。

修改CSS还是修改HTML

曾经看到的那些,都是建立在一旦HTML写完,需求变的时候不许改HTML,只许改CSS的基础上的。但实际上,又多少机会能让你只改CSS而不改动HTML的呢?另外,既然有一套完善的CSS了,为何不直接简单修改一下HTML呢?如果背景变变成了红色,我只需要修改一下class,从bg_blue改成bg_red就可以了,何乐而不为?由此看来,class取名成left和right并非很糟糕的决定,只要合理利用,完全可以应付多样的需求。

开发成本VS维护成本
这样做之后带来的问题就是开发成本与维护成本的矛盾。这样开发确实很快速。但问题是以前小改动起来是不需要动HTML的,而现在改一次就得改HTML,而这方面一旦页面做好后就可能归其他部门那边管了,修改测试上传都得惊动其他部门,这方面如何协调是一个问题。
换句话说:面向对象CSS保持CSS框架不变而修改HTML,而原先那种是保持HTML不变而修改CSS
这方面我没有太多经验,欢迎大家探讨。
Twinsen有过类似的探讨( http://www.twinsenliang.net/skill/20081129.html ) 他就很反对这么来。
其中的大部分观点都赞同,只是最近我也在反思:
到底多大机会能让我碰上“left_box”和“right_box”的互换。全站的blue_button换成红色呢?
如果只是一两个页面的话,修改CSS的成本更低,还是保持CSS不动修改HTML的成本更低?

增加学习成本
当公司招募新人的时候,不得不对其进行培训,以使其学会使用这套自建的框架体系。但带来的好处是使整个网站风格统一,给进一步维护带来方便。所以我认为增加的这点学习成本是值得的。
同时,如果你都已经跳槽到别处了,没留下好的文档,人家学不会也没关系。直接抛开这套体系也能过日子。因为本身这套体系是从reset开始对各个标签初始化对象的,而后逐渐增加class以扩展对应属性。
也就是说,新人也可以抛开这套东西,直接用自己的写法来写。当然,这好不好已经不在今天的讨论范围了。这里只是为了说:这个框架也可以让新手不管这些约束直接写自己的。

class过长导致文件过大
这可以通过压缩来解决。用正则找出css和html中所有的class,以出现频率排序,然后分别从abcdeft…开始,先单字母,后双字母 a一直到zz应该有26*27种组合,足够一般网站应用了。google应该也是这样做的。抱歉这段时间比较慢,代码就没写了。

副作用:js必须用id而不是class了,否则压缩后会找不到对应的class
解决思路:约定JS中保存class的字符串变量为 foo_cls=”bar”,那么只要用正则找到对应_cls结尾的变量进行对应替换即可。
这本身是面向对象的CSS,而进一步压缩这里仅提供一种思路。

总结

结构和样式分离是好事,我这里提出的观点反而有点逆潮流,试图通过HTML中的class属性来控制表现。我认为这是一种理性回归,至少我们不用一个ID下面写一堆的针对他的样式,冗余,容易出错,效率还高。同时这种方式与直接在元素上写style也是有本质区别的,模块化,面向对象的思想体现在其中,合理控制每一个类的颗粒度,或者说控制范围。
我这种介于结构—样式的完全分离与结构—样式完全整合之间的一种状态,试图寻找一种平衡,提升开发效率并降低维护成本。

谨以此文做以探讨。

扩展阅读

重构之美-跨越Web标准,触碰语义网[分离:通用也许是个美丽陷阱] ——另一个反对的声音
面向对象的CSS--OOCSS 国人写的通过JS增加CSS面向对象功能

打造自己的reset.css

最近我对此观点有所新的看法,可以查看《真的还需要reset.css么?
0,引言
每每有新项目,第一步就是应当使用一个reset.css来重置样式。滥用不如不用,直接拿个现成的reset.css过来将导致后期各种离奇bug的发生。所以最好还是自己写一个reset.css,并且要明白每一条reset都是用来做什么的。reset.css本意就是重置样式,我始终建议把.clearfix放入layout.css,而把h1、h2之类的定义放进typography.css。 具体如何规划网站CSS结构,不在文本讨论之列,可以参考Smashing Magazine上的文章,国内有差强人意的中文译版。注意,本文把reset分成了两个部分,一个是纯reset.css,可以用于任何项目。另一个是用于特定项目的“reset”,自定义修改的内容,这些内容可以放在layout.css、typography.css之类的文件中,他们共同导入到一个base.css形成一个项目的基础样式。本文就是来介绍如何写一个合适所有项目的通用的reset.css,以及介绍在设置玩reset.css之后需要针对不同项目要首先要设置的内容。

1,基础
牛顿是站在巨人伽利略的肩膀上的,我们也可以这么做。首先我们要选定一个前进的基础。
请永远不要使用
* { margin: 0; padding: 0; }
这问题太多了,在此不多加表述。

目前比较流行的有Eric Meyer的重置样式和YUI的重置样式。另有Condensed Meyer Reset简化Eric Meyer的样式。有趣的是,Eric的重置样式也是源于YUI的。而那份简化版又把Eric的样式简化回YUI的样式了 。但同时,糟糕的是,网上流传的比较广的(尤其是国内)都不是最新的版本。上面两个页面里直接看到的都不是最新的,Eric专门为有一个reset.css页面。而YUI当前版本(2.7.0)的reset.css实际地址里,比上面的页面中还多一些东西。此外,我们还可以基于一些常见的框架,比较著名的比如Blueprint或者Elements CSS Framework(这个的reset也是源自于Eric Meyer的)。OK,准备工作就差不多了。以上这些都可以作为参考资料来组织我们自己的reset。我这里主要采用YUI,兼带Eric的reset。

2,默认色彩
对于页面是不是有默认背景色和前景色,YUI和Eric有着不同的看法。
YUI重置背景色为白色而文字颜色为黑色。

html {
color: #000;
background: #FFF;
}

而Eric在当前最新版中让所有颜色为透明,他认为透明才是最原始的颜色。虽然他曾一度认为也应当设置白色背景色、黑色文字颜色。至于最后为什么改了,Eric并没有给出具体理由。

这个问题我基本认为是用户自定义的更重要还是你的设计更重要的问题。我个人的观点是,如果你的设计本身就是白色背景,那么不要设置背景。一小部分中高水平的用户,他们会自定义网页默认背景色。设置成他们喜欢的背景色,比如浅蓝色。基本常见的浏览器都提供了这个简单的功能。而我们的背景色重置则会破坏用户的选择——尽管这样能保证你的设计原汁原味的呈现给所有用户。当然我知道,更高端的用户会用Stylish之类的Firefox扩展来自定义页面。但不得不说,只会用“选项”来调背景色的用户更多,不是么?而同时,如果设计本身就有其他背景色,比如黑色、蓝色、绿色之类的,OK,这些设计当然可以设置背景色。但请不要放进reset.css里。这里是重置样式的地方,不是你设计的地方。请把你的设计放在更广袤的土地上。
所以,简单说来,NO,不要在reset中设置背景色。

那么,文字颜色呢?原则上来说,也是不应该设置文字颜色的。但是IE中的表单元素中legend这个对象比较特别,跟主题结合的比较紧密。legend会默认有自己的颜色(跟当前的主题有关)而不会继承父元素的颜色(即便设了color:inherit;)。
从某些角度来说,可以想当然地认为设置字体颜色人数远小于设置背景色的人数;以及认为就算设置了背景色,人们看到legend元素是黑色的也不会觉得奇怪。因此,YUI在其reset中设置了legend {color: #000;}是无可厚非的。
但反过来说,把这个放到typography.css或者form.css里岂不是更好?不同的页面设计,其对legend的色彩要求很可能是不同的,放在reset.css里重复定义是没有必要的。因此这条CSS规则可以作为在reset.css之后首先应当设置的规则。

3,padding和margin
曾经一度流行的* { margin: 0; padding: 0; }也就是出于这个目的。让各个元素的padding和margin都归零,尤其是那些h1和p以及ul/ol/li之类的元素,还有,body本身也是有margin的。清除元素的padding和margin是很有用的。
YUI这样做:

body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}

而Eric这样做:

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

可以看到,Eric把几乎所有的元素都写上了规则。而YUI只把有padding和margin的元素清空样式,而其他元素则不动。我个人比较偏好YUI的做法,因为他这样可以避免给一些无关元素带上不必要的样式。导致元素过多时的性能下降。但Eric的也有可取之处,他这样写,整个reset.css可以小上不少字节,对服务器的压力会小一些。但进一步想,这种做法跟用 * 来选择所有元素还有什么区别呢?这已经几乎囊括了所有元素了!你怎么用呢?看你自己喜好了。

4,边框
YUI里:

fieldset, img {
border: 0;
}
abbr, acronym {
border: 0;
font-variant: normal;
}

Eric已经在上一条中把所有的边框都清掉了,还是推荐用YUI的,理由同上。

5,外边框(outline)
这个就是元素获取焦点时的虚线框,在ie之外的浏览器上可以像下面Eric做的那样,通过设置outline来消除。

/* remember to define focus styles! */
:focus {
outline: 0;
}

而YUI则没有设置这一条。而在Eric的样式中,可以看到Eric的提醒:务必重新定义获取焦点后的样式!
这点其实很重要,出于可访问性的角度出发,那些不便于使用鼠标的人基本上都是用tab导航来浏览网页的。获取焦点的元素有特定样式的话可以极大帮助这类群体的用户,通常建议设置成跟:hover一样。经常设计上会因为这个虚线框而大打折扣。因此这条保留在reset中,并且作为reset.css之后及早定义的规则。

另外,对于在Firefox之类的支持outline的浏览其中,除了获取焦点的元素外,浏览器本身并没有给元素设置outline属性,所以,像Eric那样把所有元素的outline设成0,我就觉得没有太大必要了。

6,字体样式(font style/weight/size/variant)
YUI里,分成了多条:

address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
font-style: inherit;
font-weight: inherit;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
abbr, acronym {
border: 0;
font-variant: normal;
}

input, button, textarea,
select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}

/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
*font-size: 100%;
}

Eric则在他最终版的reset中去掉了关于这些的样式重置,只保留了 font-size: 100%; 同样他没有给出具体理由。
但通常情况下,我认为还是重置一下这些样式好,比如strong元素,很多时候只是语义而已,并非希望他真的加粗。可能会有背景色或者其他方式来强调。而之所以这里都用了inherit这个继承属性而不是定义 font-weight: normal; 可以在 Eric 先前的reset文章中看到。这是为了防止——父元素字体加粗了,而没有一个子元素继承加粗属性(因为设置了normal)——这种情况的发生。所以把YUI中设置h1-h6的样式以及abbr和acronym的两句样式都改成inherit会比较好。

此外,对于h1-h6的字体大小定义,建议放到专门的typography.css里,不建议放在reset.css里。所以这里我同样倾向于用YUI的策略,全部重置。

但是很不幸,在ie6/ie7当中,不论是strong还是h1-h6,亦或是em等元素,设置了inherit均无法继承父元素属性,依然保持自己的特色。这就带来了浏览器差异,样式重置本身是为了避免浏览器差异的,但现在带来了浏览器差异,是万万不可取的。对于这个问题我考虑了很久,到底是为了统一所有浏览器都重置成normal(YUI的想法),还是放弃重置这些元素,让他们顺其自然,来保证在所有浏览器中样式一样(Eric的想法)。我最后决定采用YUI的做法。因为,无论重置成normal还是不重置,这些元素都无法继承父元素属性。既然如此,那么退而求其次,保证这些元素都恢复到普通外观,避免在设计的时候还要重置样式。
不得不说,这种妥协是仅仅针对IE6和IE7的,也许在5年后,老板和客户都不要求支持IE7的时候,我们可以放心大胆得使用inherit了。

此外,YUI并没有给code kbd samp tt 这几个元素重置字体大小。但实际上在IE中,他们都会被缩小显示。所以此处应当给予重置font-size: 100%;

7,行高(line-height)
对于行高,YUI并没有给出重置定义,而Eric则给出了重置:

body {
line-height: 1;
}

行高默认所有元素都会继承的,所以给body设置行高为1就足够了。通常行高设为1时候,英文照常阅读,但中文就无法阅读了,行间距过于紧密导致容易看错行。通常在中文环境下得设置1.4到1.5才能是用户正常阅读。我建议是1.5,这样算出来的值也是整数。比如字体大小12px的时候行高是18px,字体大小16px时行高24px。看起来也会比较舒服。此外,还有一个不设置成1的重要原因是:IE下,行高为1时,中文字顶部会被削掉几像素,字体加粗时尤为明显。所以,重置的原则是好的,但切不可重置为1。

8,列表样式
YUI用了:

li {
list-style: none;
}

Eric用了:

ol, ul {
list-style: none;
}

尽管我没有测试出YUI的有什么问题,但我始终觉得设置ol和ul会比较稳妥。而且,波及的元素更少,性能应该更高一点。虽然下载量会多3字节。

9,表格元素
在表格方面,都比较统一。均是:

/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

Eric还提醒到,需要在html中设置cellspacing=”0″ 来达到完美重置效果。
但此外YUI还设置了

caption, th {
text-align: left;
}

让caption和th元素不要居中。作为重置,是可取的。建议添加此规则。

10,上下标以及baseline
YUI写成

sup {
vertical-align: baseline;
}

sub {
vertical-align: baseline;
}

似乎没有优化,不知道为何没有写到一起去。而Eric则在最开始那条中就已经定义。而其中的问题是,YUI这样定义了,但没有重置字体大小,这点是有所遗憾的。既然是重置样式,就彻底一些,所以建议改成这样的:

sup, sub {
font-size: 100%;
vertical-align: baseline;
}

同样对于Eric把所有元素都放到了Baseline上,包括上标下标。Eric的解释是,强制让设计师精确定位这些元素的垂直偏移。

11,插入和删除(ins/del)
对于这个问题,YUI直接清除了ins的下划线和del的删除线这两个文本装饰:

del, ins {
text-decoration: none;
}

而Eric保留了删除线:

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

如何取舍?我选择Eric的,为什么我这里不追求完美的样式重置了呢?很简单,我这个reset的目标是为了让我们写页面的时候尽量避免浏览器默认样式,以及不同浏览器之间默认样式差异带来的问题。而del元素删除线的文本装饰,我相信没有人会反对的。有人会加上其他样式,比如字体变淡之类的,但对于del如此强语义的元素来说,没有什么比用删除线更能表达含义的了。而不像上面那个focus样式,未必人人喜欢虚线框。但似乎又没有什么浏览器默认不给del元素加删除线,故这条可以省略。
所以,这里我只重置ins样式,别忘了给ins元素在等下也添加一些样式。

12,引用元素的引号
某些浏览器中,q或者blockquote前后会出现引号。这个并不是谁都喜欢的。所以需要重置他。
YUI的比较简单,只重置了q:

q:before,
q:after {
content: ”;
}

而Eric则比较周到,把q和blockquote都重置了。

blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

OK,就决定用Eric的了,对于样式重置,细致一点周到一点总没有错。

13,链接
对于链接,YUI和Eric都没有采取样式重置,但从我思考许久后还是决定把链接样式重置放进来。究其原因,还是因为样式重置一来要彻底,二来对于链接样式并非所有设计师都喜欢用下划线装饰。因此,我还是建议把链接的下划线重置掉。

a {
text-decoration: none;
}

但这样做有点粗糙。真正有下划线样式的其实只有 :link和:visited所以改成下面这样比较好:

:link, :visited {
text-decoration: none;
}

此外,对于链接颜色,可以作为reset后急需设置的规则来处理。直接放入reset.css中不是很合适。

14,我的重置样式
总结上面种种规则,这里给出一下我的CSS重置规则,BSD协议发布,请随意使用。测试样本(这个是从YUI那里复制过来的,感谢YUI为此做出的贡献。)
下载:reset.css reset-min.css

/*
Copyright (c) 2009, Shawphy(shawphy.com). All rights reserved.
http://shawphy.com/2009/03/my-own-reset-css.html
Based on YUI http://developer.yahoo.com/yui/reset/
and Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
Licensed under the BSD License:
http://creativecommons.org/licenses/BSD/
version: 1.1 | 20090303
*/

body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
fieldset, img {
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
font-style: normal;
font-weight: normal;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
abbr, acronym {
border: 0;
font-variant: normal;
}

input, button, textarea,
select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
code, kbd, samp, tt {
font-size: 100%;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
*font-size: 100%;
}
body {
line-height: 1.5;
}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th {
text-align: left;
}
sup, sub {
font-size: 100%;
vertical-align: baseline;
}
/* remember to highlight anchors and inserts somehow! */
:link, :visited , ins {
text-decoration: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

15,完成一个初步的CSS框架
之前提到了,样式重置作为一个所有项目可以使用的共性存在,而不同的项目应当有其个性。当然还有其他一些共性,不属于样式重置的部分,但同样重要。再往下讲就可以做一个CSS框架了。CSS框架所要考虑的内容远比一个CSS Reset要考虑的多很多,这里只是点到为止,不做更多展开。

layout.css
首先除了reset.css之外要建立的layout.css,这里目前主要推荐放入.clearfix。清除浮动很重要。但这不属于样式重置,放在布局当中正合适。

.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

此外,layout.css中还可以放入自己常用的布局,比如 #wrap{margin:0 auto;width:960px;}之类的规则。看个人喜好而定。

typography.css
这里可以放置很多规则,非常重要的是以下三个:
:focus, a, ins
这三个是被重置掉的,但又很重要的内容,建议在reset之后立即在typography中设定全站样式,保持样式统一。
ins可以单独设置, :focus 最好设置成跟 :hover一样,而a的样式还是按照LoVe,HAte的法则来设置。

h1-h6系列也是之前被重置掉的。可以考虑在这里设置样式。按站点特性来定。我个人是不喜欢全局定义hx系列的字体大小的,统一为100%我觉得挺好。

接下来要设置的是font-family属性,可以参考射雕的文章。另外,小麦的文章中提到,表单元素的字体在IE中都不能继承父元素的字体,所以要单独设置。

至于其他需要全局设置的,可以参考前文中的叙述,找到相应的部分添加到typography.css中即可。这样就可以在保证reset.css通用性的情况下,使不同的项目又有个性。尽量保证reset.css在所有项目中都是一样的。有利于项目的开发。最后不要忘记在写表格的时候加cellspacing=”0″ 来达到完美重置效果。

16,探讨
文章写的比较仓促,也受限与本人能力所限,只能写到这里。欢迎留言探讨,也可发邮件或上Twitter找我。以便进一步完善这个reset。谢谢。

jQuery 1.3 正式版发布公告

http://docs.jquery.com/Release:jQuery_1.3

jQuery 1.3终于发布了。
min版(gzip后18kb)
源码(114kb)

另外可以用google的代码托管:
http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

下面这个是我自己用Packer压缩的pack版
http://shawphy.com/down/jquery-1.3.pack.js(37kb)

简要来说:

更新了Sizzle选择器引擎,这个之前也提到过。可以查看他的性能:

此外据声称,把代码给了dojo基金会。这回Sizzle的野心在于能够让其他各种JS库都能用,包括Prototype, Dojo, Yahoo UI, MochiKit, 和 TinyMCE等等其他库。

live 事件
这也是jQuery 1.3这次更新的第二个重大更新。

可以看下面iframe中的效果以及源码

性能比较:

这样,我以前写的关于重复绑定的文章就差不多可以抛弃了

Event 对象
新增了一个jQuery.Event对象,他根据w3c文档,做了一个完整的,兼容所有浏览器的一个对象。具体还得看文档。

append, prepend, before, 和 after 方法重写
据声称,这些方法的效率提升了6倍

重写了offset方法
这回更快了

取消了浏览器侦测,全面改用jQuery.support
具体还得看文档了。
变化:
其中与开发者比较密切的是
[@attr] 中的@在1.3里不能用了
用trigger触发的事件现在能冒泡了
ready方法中,再也不等css加载完了再执行其中代码了。直接要求把css放在脚本之前就行
简化了.isFunction方法,那些偏门的就被无视了
用选择器a, b, c选择东西,在支持querySelectorAll (Safari, Firefox 3.1+, Opera 10+, IE 8+)中会按照这些元素在文档中顺序来确定这些数组在获得的对象列表中的位置。而不支持这个方法的浏览器则按照选择器顺序排好
新增了jQuery.Event
要求网页都在标准模式下,不要在怪异模式下使用,否则会报错。
以下3个方法属性已被不推荐使用。
* jQuery.browser
* jQuery.browser.version
* jQuery.boxModel

具体内容:
内核部分:
更好的queue, dequeue
新增selector, context这两个属性,分别指向获取这个元素的原始选择器和被查找的内容(可选)
选择器部分:
Sizzle的使用
复杂的css例如not(a, b)
属性部分:
toggleClass( “className”, state ) – 增加了一个布朗值的参数。
筛选文档:
.closest( selector ) – 找到离这个元素最近的一个父元素。这跟parents不一样。
is() 也支持更复杂的选择器了。
操作文档:
HTML Injection重写了
$(“<script/>”) 就自动转化为 $(document.createElement(“script”))
css:
offset()重写了
事件:
Live 事件
jQuery.Event
trigger()会冒泡了
效果:
hide() .show()之类的加快速度
内置动画效果考虑到了margin和 padding
.toggle( boolean ) 多提供了一个参数
jQuery.fx.off 关闭所有动画
AJAX:
.load()支持了文本格式的数据
工具:
新增jQuery.isArray

内部:
jQuery.support

另外这回改用YUI的工具压脚本了

========================================

最后预告一下,jQuery文档官网已经针对1.3版做了修改,中文文档也在紧张制作中。
文档地址:http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html

我的卓越亚马逊和当当购书经历

Story
这两家在国内可以说是走在风口浪尖上的两家B2C公司,也都逐步从之卖书到了什么都卖的大百货转型。
这回我从我前几天想买的一本《精通正则表达式:第3版》。不要问我为什么不从china-pub买,只因为我对价格比较敏感。而不在乎书谁先出来。
各位也都可以从上面豆瓣链结里看到两个店的价格是一样的,都是55.9,蔚蓝在豆瓣页面里写是55.5,实际点进去是37.5 见:这里 。(我才发现……书已经到手……不退了……其他同学有兴趣的赶紧下手……机会难得……不过最好先问清版本。)
事情是这样的,很早就眼馋这本超越语言界限的圣经级别的《精通正则表达式》了,年初的时候想买,但看到了勘误表之后慌了,这么多错误,我买回来自己一个一个对着勘误表现改一通可就累了,而且我也没有在书上写字习惯。所以就忍了。这几天看到了说第三版已经在卖了,就盘算着买了。
好了,罗嗦了这么久,正式开场

Act 1
跑到卓越当当上,都没有看到关于印次。而底下评论问第几次印刷的版本的,也不见有客服来回答。所以打算直接问客服了。
这局打平,两家都做的不好,当当上有“印次”和“印刷时间”的栏目,但没写,卓越压根就没有,只有“版本”这个栏目。

Act 2
先说卓越,在页面最下面“如您需要帮助或对我们的客服有疑问,请联系我们。”。OK,点进去后就有了一个界面,填写信息后,等回音了。
接着是当当,在页面里死活找不到售前服务的地方(除了那个没用的提问部分),只在页面最底下找到了”常见热点问题/找回密码/顾客建议/顾客投诉”

点哪个呢?肯定不是找回密码(这东西怎么放这里?放登录窗边上不就够了?),我也不想投诉也没有建议阿,想了半天,还是“常见热点问题”吧。进去,找了半天,什么新手指南,什么退款换货保修一应俱全,就是没有售前服务,只有一个“联系客服”,得这算是我要的了吧。进去一看,邮箱和400电话。OK,打开GMAIL,寄了邮件过去。

给卓越的客服留言:

这本《精通正则表达式(第三版)》
http://www.amazon.cn/dp/bkbk728354
我想确认一下是第几次印刷的版本。并且如果可以的话,请客服能顺便修改一下页面上的资料以方便其他读者。

给当当的邮件:

当当网的客服:
你好
我想买《精通正则表达式(第三版)》
http://product.dangdang.com/product.aspx?product_id=20028613
但我不能确定这是第几次印刷的(以及印刷时间)。所以发信来询问一下。并希望能够顺便更新一下页面资料,以方便其他读者。
谢谢

by Shawphy

这局,当当大败,浪费了我很多时间。到最后都要我用自己的邮箱给他们写信。

Act 3
2008年12月19号当天(周五),在我发邮件一两个小时后,卓越的客服先给我的邮件。下午两点就给我回信了。
而当当我晚上8点发的邮件,第二天凌晨2点给我邮件……
卓越我是白天发的邮件,当当我是半夜2点发的邮件。卓越我看不出来邮件服务是不是24小时的,至少当当是24小时的。
当当小胜,当然也因为我的实验产生了一定的误差,所以本次实验信度不是很高,各位看官酌情取舍。

Act 4
以下给出邮件主要部分(客套话就省了,虽然我不看,但他们得写)。
卓越给我的邮件:

亲爱的朋友:

您好!感谢您的email。

很抱歉,您询问的商品:《精通正则表达式(第三版)》,问题我们暂时不能确认,我们和相关部门确认后会尽快回复您,

并且会通知编辑人员更新页面信息。请您放心。

当当给我的邮件:

亲爱的顾客:

您好!非常感谢您对当当网的支持!非常抱歉,对于商品信息我们和您浏览的是同一个网页,我们看不到商品实物,如果您想了解商品更多的信息,您可以到商品单品页面提交评论,我们网站的编辑看到后会第一时间回复您。

我第二天周六10点半发现了这份回信,很日……回信曰:

当当的客服:
你好
非常感谢你能及时反馈
但遗憾的是问题并没有能解决。
实际上如果可以仔细看一下的话,我早在今年6月19日就在此商品单页中提出关于印刷版次的问题,但半年过去了,至今没有任何答复。
现如今我直接发邮件给客服,也没能得到满意的答复。
希望当当各部门间能够更协调办事,能尽早给我们顾客一个满意的答复,谢谢。

by Shawphy

50分钟后,回信曰:

亲爱的顾客:

您好!非常感谢您对当当网的支持!

经查询,此商品为第3次印刷,印刷时间为2007/07/01,详细信息建议您察看商品的单品页面。同时此商品的内容如与网页介绍不符,建议您将其不符之处告知,以便处理。

我再日,曰:

当当的客服:
你好
非常感谢及时能够回复邮件。
但遗憾的是依然没有能解答我的问题。
此书《精通正则表达式》”第3版”指的是 原书 第3版。
与第3次印刷不是一个概念。07年7月1日应该是第1次印刷。
此书据译者的博客上说,今年08年又有过两次印刷。并且修正了第一次印刷中的大部分错误。
所以我比较关心此书到底是第几次印刷版的。
也就是我比较关心当当页面上的”印次”和”印刷时间”这两项,而不是”版次”这一项。
希望能够进一步核实。
再次感谢辛勤的工作。

此后截止至本博文发表时,尚未有进一步回音(我保证我垃圾箱里也看过了,确实没有回信了)。事实面前,各位看官心知肚明,不用我作过多评论了。

Act 5

23号星期二下午1点48分,受到了卓越的邮件:

亲爱的朋友:

您好!感谢您的email.

非常抱歉耽误您的时间了,关于您询问的精通正则表达式(第3版)问题,经与相关部门工作人员确认,此图书是第3次印刷的版本。

OK,看到邮件后,马上下单,此时是四点半左右。

Act 6
昨天收到邮件说出库了,今天中午收到书,确认是第三次印刷的版本。

=============================================
历时6天,卓越最终打出一个Good Ending,当当打出一个Bad Ending。
最后指出一个卓越的小瑕疵,我在邮件的反馈里提到,说希望尽快完成页面上的信息。但我书已经到了,页面上还没改。