《CSS Mastery》中文版《精通CSS》在国内上市不到一个月,首印就售罄( [ qìng ],尽,完之义), 需要尽快重印了。2006年Amazon计算机畅销书总排榜雄踞第二的威力,果然锐不可当。
这本书出版以后,很快成为各大网上书店的榜首图书。与此同时,对书的各种意见也如潮水般涌来。有这么多读者热烈关注和踊跃评论我们的书,当然是求之不得的。毕竟,现在辛辛苦苦策划和出版一本技术图书,能够得到比较多的认可,越来越不容易了。
比较令人鼓舞的评价包括:
- 以前看过几本关与css的书,感觉这本属于上等,阅读价值很高. ——jl_liu
- 我很久就想读一本关于css的书,这下可找到了,我认为比较系统的一本了……——xcli25
- 一直想要一本详细的CSS的书!终于被我瞄到一本好书!——huaxingqian
- 昨天卖了这本书,晚上读着兴奋,所以今天评论一下。内容不用说了,对于有一定经验的网页设计师和Web开发人员极为合适。不愧是超级畅销书……这本书翻译得很好,术语符合规范和习惯,文字流畅。在目前国内毁书不倦的大环境下,难能可贵。对图灵系列图书的质量赞一个!已经买到的好几本图灵书都是精品。——读者 : 125.33.59.*……
但是其中也出现了大量对翻译的负面评价,这让我和同事们非常纳闷。因为一来译者经验丰富,而且已经合作多年,我们是决定信任的;二来在我们的审稿过程中,译稿也受到了一致肯定。
那么,这到底是怎么回事呢?为了在重印中改正已经发现的错误,我专门抽出时间,做了一番研究。
读者批评的焦点似乎都集中在以下几个术语翻译上,没有看到对具体哪些句子或者技术问题翻译问题的指摘。我翻读了此书,也没有发现阅读上的不流畅,应该说,翻译的水平还是相当不错的。
我们来看看引起争议的几个术语。
行内,英文是inline,许多读者认为应该译为内联
> >>inline一词译为内联,大概起源于C++中的内联函数,其实熟悉C++的朋友都知道,这种译法本来就意义模糊得很,不甚准确,但还不至于大错。而在CSS中,inline其实是不换行的意思,译为内联,恐怕对初学者理解将非常不利。网上苏昱的中文手册,有人称为应该人手一册的,就译为 “不换行”。此外,还有很多译为“内嵌”的。都比内联为好。
框模型,英文box model,读者建议为盒模型;
>>>目前大家的习惯的确以盒模型为多,但是译者认为,盒这个词有三维的含义,因此选用了框。其实以我之见,box在技术术语(计算机和其他学科)中尤其是UI元素中普遍是译为框的,对话框大概是最常见的了,所以译者的选择,并没有什么错误。而且,框模型并非没有出处, Adobe(也就是Macromedia了)的官方DreamWeaver中文文档就是译为框模型的。我当年引进的Eric Meyer《CSS权威指南》一书老版本也是译为框模型的。不知哪年哪月开始,改成盒模型了?
填充,英文padding,读者不习惯,有人认为与空白边(margin)混淆,有人建议不译,有人建议译为补白;
>>>这个看来是见仁见智的事情了。margin从词源来说,译为空白边是没有问题的,出版界称之为页边。《CSS权威指南》一书当时译为边界,问题也不大,只不过直觉像是一条线的称法?我认为从它代表数值来看,不如译为边距。padding译为补白其实完全不对,查查字典就知道,补白乃是“报刊上填补空白的短文“或者”补充说明”之义。选择术语时与常识违背,是大忌。官方DreamWeaver中文文档分别译为边距和填充。
招数,英文hack,有人建议不译,有人建议译为偏方;
>>>又是见仁见智。
流体布局,英文liquid layout,通译流式布局;
>>>我倾向于后者,流体不是形容词,本身是个不太相关的技术术语。
祖先元素,ancestor element和后代选择器,descendant selector,有读者认为不如直接译为父、子……;
>>>祖先和后代在CSS中与父、子同时存在,是全集与子集的概念,有明确区分的,作为术语绝对不能混淆。有些读者显然对CSS没有太多了解。当然,在具体语境中,明显只有一级继承关系的祖先和后代,用父子称之,也许更可读。
过滤器,filter,读者建议滤镜;
>>>这里的filter和Photoshop中用来做特效的滤镜似乎不是一回事,而与hack关系密切,大家读一读本书第8章即知。但是这里的filter和一般所说CSS滤镜是何关系,我查CSS Specification不得,请方家告我。
选择器,selector,网上译为选择符较多;
>>>符从中文看,应该指character,selector似乎不应用“符”。当然,如果大家确实已经约定俗成,译为选择符也无大不妥。
总结
首先,《精通CSS》是一部有望成为经典的著作,出版社和译者本身已经抱着认真负责的态度,力争使读者满意。由于我们的工作和水平问题,导致很多读者的阅读体验不佳,对此我们深表歉意。
从上面的分析可以看出,有些术语的翻译问题,并非读者所认为的违反了早已有之的定论。相反,由于国内对CSS的采用还处于起步阶段,对术语及其内涵的理解还非常不够,认真地讨论是非常必要的。而随便就承袭一些粗糙的所谓习惯,未必是什么好的态度。
让我稍感遗憾的是,虽然有非常多的读者评论,甚至不乏重语相攻者,但是除了Renart等少数读者有比较严肃而且具体的讨论(他在china-pub上指出了许多原书的技术问题,当然还需要核实确认,但对于翻译本身他并没有过多批评,而是给出了几个建设性的意见),绝大部分批评的声音只是说翻译不好而已,毫无建设性。有个别读者既无基本的CSS常识,好像也没有真正阅读过本书,就轻率地恶语相向,似乎完全是出于恶意。
好书需要大家的支持,本书很有可能不断重印,诚恳希望更多专家和读者指出本书初印中的具体问题,以便我们不断改善。也诚恳希望大家对CSS术语多多建言,制定一个比较稳妥的术语表来。
参考
1. CSS Specification2.http://www.google.com/url?sa=t&ct=res&cd=1&url=http%3A%2F%2Fwww.poptool.net%2Fquickcheck%2Fcss2%2F&ei=1MFmRbW6Co3msAKs7rCBDQ&usg=__C5LCXPuPtWbETMcovAieeYuALdE=&sig2=nlm1eCo-6QrLGtqsFWsOSA
3. Dearbook上对本书的评论。
4. china-pub上对本书的评论。
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1409559
- 样式表是按类路径来模块化定义的,有中文注释;
- 由于加了jsp程序,代码格式有变动,也许会有不少垃圾代码;
- 在FireFox下,有几处显示不当、JS未做相应优化,请用IE6+浏览;
- 感兴趣者可以当HTML和CSS来,做参考。
- NsYta on 2008-01-03CSS模块化设计——从空格谈起 [1]
引子:
今天在蓝点看了Yang的博客《CSS样式表中继承关系的空格与不空格》,思考了一下,本来想写《CSS样式的复合定义与复合调用及简单的模块化设计》,但是内容太大,还是来点简单的实惠。所以改叫《CSS样式——从空格谈起》吧。
一、空格运算符
(1)CSS语言
简单地说,CSS语言类似JS语言,是通过客户端下载后,通过本地浏览器解析。而CSS语言又是非常低级的“弱类型”语言,离JS这种基于对象的比较完善的“弱类型”语言,还差相当一段距离。要知道CSS样式是定义出来的,而样式的呈现是根据文档流顺序和CSS优先级别,浏览器自己识别计算后显示出来的。而浏览器又有忽略和纠错功能(尤以IE为甚),所以样式定义的语法有错误,并不影响浏览器正常工作,只不过显示不出应有的效果罢了。在我们设计定义样式的时候,排错是比较令人苦恼的,其本质原因是于这种弱类型CSS语言本身的不严禁性有关系的,所以我们就更应该注重CSS定义的严禁,才能出较少的错误,较快更好的完成工作
(2)CSS的运算符
首先说,CSS语言的运算符就不多,有.#{}:";还有一个非常重要的空格。这几个运算符,都是常用的定义声明符号。而在CSS样式定义中,空格就有点特殊,我们可以把它视为在.Net或Java中命名空间或类包定义中的 . 运算符。换句话说,我们可以把空格视为路径指向的箭头,表明HTML标签的父子级别关系。CSS是与HTML想关联的,也就是说,CSS的每一个定义都与“某个HTML标签”或“某段模块化HTML代码”相对应,而HTML可以调用多个样式类。一个CSS样式类可以根据HTML代码来“复合定义”;一个HTML标签也可以“复合调用”多个样式类。所以说,CSS样式定义的复杂性与关联的HTML是密不可分。
(3)实例说明
<style type="text/css">
td .b {
color:#00ff00;
}
th.b {
color:#ff0000;
font-family:黑体;
font-size:20px;
}
.b {
color:#0000ff;
font-size:12px;
}
</style>
<table>
<tr>
<td><div class="b">第一个类b的类路径是th .b</div></td>
<th class="b">第二个类b的类路径是th.b</td>
<td class="b">第三个类b的类路径是 .b</th>
</tr>
</table>
<div class="b">第三个类b的类路径是 .b</div>
讲解:
1、第一个类b的类路径是td .b,定义该HTML文档内所有的td标签内的带class="b"的标签的样式 。
也就是说:
td .b {
color:#00ff00;
}
定义的是
<td><div class="b">text</div></td>
这组代码块中的b类,class="b"是包含在td标签内的,是td的子级,所以在这里要用“空格”指向明确表明父子级别关系。
2、第二个类b的类路径是th.b,定义的是该HTML文档内所有的带class="b"的th标签的样式。
也就是说,
th.b {
color: #FF0000
}
定义的是
<th class="b">text</td>
在这里的代码中,th和class='b'是平级的,先th后.b组成一个同级类路径th.b,所以没有空格代表“HTML类”和“自定义类”具有同级路径!
3、第三个类b的类路径是 .b,定义该HTML文档内所有的td标签的样式,它是该文档的一个全局样式,是body .b的简写。
也就是说,
.b {
color:#0000ff;
font-size:12px;
}
定义了
<td class="b">第三个类b的类路径是td.b</th>
和
<div class="b">第三个类b的类路径是 .b</div>
这两处的b类没有明确的路径指向,优先级别要比有明确路径的低。
4、大家可以看到,在HTML代码中,同样都是class="b",但是在CSS定义时,采用的类路径不同,作用就不同了。类路径越完整,优先级越高。在具体应用的时候,我们可以,使用完整类路径来定义某HTML代码块某一些特殊地方,做异化处理。例如本例表头th的黑体字显示效果。
CSS模块化设计——从空格谈起 [2]
二、HTML中复合调用样式类
(1)在一个HTML标签内,可以复合调用多个样式类,也是用空格做运算符,复合类名总字符不能超过256。
(2)示例:
<style type="text/css">
.myTxt {
font-size:50px;
font-family:Arial Black;
}
.txtRed {
color:red;
}
.txtOrange {
color:orange;
}
.txtGreen {
color:green;
}
.txtBlue {
color:blue;
}
</style>
<ul>
<li class="myTxt txtRed">123</li>
<li class="myTxt txtOrange">Text</li>
<li class="txtGreen">Text</li>
<li class="myTxt txtBlue">Text</li>
</ul>
(3)应用:
对于某些多数样式属性累同,仅有几个不同样式属性的定义,可以用这个方法来缩写。
也可以在某个不改变某个通用样式类的同时,用HTML调用复合类,突出局部特例。
三、CSS+HTML的模块化设计
(1)举个简单例子:
.classNameA .classNameB .classNameC
就是一个类包路径,A包含B,B包含C.
意思就是,在A块内的全部HTML代码(包括B块、C块),先应用样式classNameA;
然后,在B块内的全部HTML代码(包括C块),先应用样式classNameA,之后再先应用样式classNameB;
最后,在C块内的全部HTML代码,先应用样式classNameA,再先应用样式classNameB,最后应用样式classNameB;
(2)在样式表中,关于类包的路径,对于某些复杂的HMTL代码,最后写绝对路径,就是每一个类名都不要拉下。这样可读性更强,错误率更小;当然,宽容度就越低。
例如:
<style type="text/css">
/*控制 li 的样式*/
.a1 ul li {
color:red;
}
/*控制class="a"的div块内,全部连接 a 的样式*/
.a1 a {
font-size:20px;
}
/*控制class="a"的div块内,一个一个为 class="mylink"的样式*/
.a1 .myLink {
font-size:12px;
}
/*控制 li 内连接a的样式*/
.a1 ul li a {
font-size:40px;
}
/*控制名 li 内,一个为 class="mylink"的连接的样式 */
.a1 ul li .myLink {
font-size:60px;
font-family:黑体;
}
/*b1样式*/
.b1 {
color:blue;
}
/*控制 li 内 b1 的样式*/
.a1 ul li .b1 {
color:green;
}
</style>
<div class="a1">
<a href="#">linkText</a>
<a href="#" class="myLink">titleText</a>
<div class="b1">b11111111</div>
<ul>
<li>
<a href="#">titleText</a>
<div class="b1">nameCN</div>
</li>
<li>
<a href="#" class="myLink">titleText</a>
<div class="b1">nameCN<span class="c1">nameEN</span></div>
</li>
<li>titleText</li>
<li>titleText</li>
<li>titleText</li>
</ul>
</div>
样式,按*.HTML从内层到外层;按*.CSS上下文,从下文到上文;按内联样式表上下文,从下文到上文;按内嵌>内联>外联的优先级;
叠加覆盖计算最终显示效果。
CSS语句,严格说是JS代码的一类,换句话说,CSS语句也是“弱类型”的,空格是一个“运算符”,由于“弱类型”不严谨,所以,没有空格的时候,虽然不报错,也有显示效果,但那是按错误逻辑运算的,有时歪打正着,但确莫名其妙。再加上有很多满足各浏览器的HACK语法,CSS语句就更加零乱不堪。所以,写的时候,尽量在满足宽容度的情况下,严禁一些。
(3)给大家一个案例
模块化设计,要求相对封闭独立性、可重复性、可修改性、统一性等等是比较高的,当然,模块化越高越复杂的,修改起来也要月谨慎,因为牵一发而动全身,这就要求,在开发设计前期要做好详尽的策划,从目录结构、命名规范,到全局和特例的界限划分、后期修改的宽容度估计等等,都要有个把握。
下面就给一个我做的网站的地址:http://www.51youcai.com
经典论坛讨论:
http://bbs.blueidea.com/thread-2815840-1-1.html