Archive for the ‘CSS’ Category.
30th June 2008, 11:56 am
更新: Mozilla Labs 新出一篇 Next Generation Javascripting 也总结了近来出现的一些有趣的东西,包括 Tamarin, SqurirrelFish, Processing.js, ContextFree.js 和 Parchment。
其中 Tamarin 和 SqurirrelFish 代表了浏览器 JavaScript 引擎性能的提高 — Tamarin 虽然现在还不明显,因为它的 JIT 还在 tracing 优化阶段,SqurirrelFish 甚至还完全没用 JIT。不过这两者正式进入市场至少要到 2009 年 Mozilla 3 平台的初步发布和 Safari 4 随 Snow Leopard 一起发布时。
Processing.js 和 ContextFree.js 则代表了 Web-based Processing 创作的新方向,Processing 和 NodeBox 的成功充分说明了在简单技术上提供更有效的表达方式会给图形生成带来多大的改进,现在能在 Web 上直接实时呈现这些优美的图形,毫无疑问 Flash, Silverlight 等将更不受欢迎了。
Parchment 则是一个非常漂亮的 Z-Machine 在 Web 上的呈现,适合 Text Adventure 爱好者们。
近来,两个新出现的 JavaScript 框架得到了许多关注: SproutCore 与 Objective-J。表面上,它们共同的特点就是大量使用了 HTML5 特性来改善用户体验,达到类似桌面应用的效果,然而从底层分析,它们其实代表了两种对富 JavaScript Web 应用的开发方式的革命。
为什么说是“两种”呢?虽然 SproutCore 是一套几乎完全由 Apple 工程师开发的框架 — 其设计目的就是给 MobileMe 提供类似桌面应用的效果 — 但其设计思维是 Web 化的,是和现下流行的服务器端开发框架一脉相承的。从我的观点看来,SproutCore 是受 Ruby on Rails 影响严重的一套框架,其提供的工具大多用 ruby 编写,创建的目录结构都带着 Rails 的痕迹 — 甚至开发人员也是典型的 TextMate 用户。
而 Objective-J 虽然也主要是由前 Apple 工程师领导开发,可是这些工程师却是不折不扣的 Objective-C/Cocoa 狂热爱好者,他们在 280slides 表现出来的是典型的 Keynote 风格,其代码组织则是典型的 NeXTSTEP 风格。
所以,可以想见的是,SproutCore 的设计思维更容易为大众接受,而 Objective-J 很可能始终保持小众 — 甚至我都很怀疑它到底会不会发布…
26th May 2008, 04:13 pm
我们可能时常会关注 JavaScript 的效率,然而大部分都会忽略的一件有趣的事情是,CSS 也可能带来对页面载入效率的影响,正如 WebKit 的开发者,被称为“Semi-god”级别的 Dave Hyatt 所说:
The sad truth about CSS3 selectors is that they really shouldn’t be used at all if you care about page performance. Decorating your markup with classes and ids and matching purely on those while avoiding all uses of sibling, descendant and child selectors will actually make a page perform significantly better in all browsers.
– Dave Hyatt
如何编写高效的 CSS?Mozilla Developer Center 有这么一篇文章值得一读:Writing Efficient CSS。
13th March 2006, 11:01 pm
Markdown 是 John Gruber 精心设计的一套文本标记系统,由 Michel Fortin 转换到 PHP 并提供了 WordPress 的插件。这两天抽空翻译了一下 Markdown 的基本功能以备学习。感谢 hlb 的指点,我想下面要做的大概是翻译完整的 syntax 文件和 PHP Markdown 的扩展功能。此外,MultiMarkdown 也是个有趣的东西。
噢对了,翻译后的文件在这儿。
24th February 2006, 07:51 am
在印刷排版中,“point”是一个绝对的单位,它等于 1/72 英寸,可以用尺子丈量的,物理的英寸。但在 CSS 中 pt 的含义却非如此,例如我们指定一个字体是 9pt,我们会以为按照 CSS 规范,它等于:
9 * 1/72 = 1/8 inch
这是一个误解,因为我们的显示器被分割为了一个个的像素,单个像素只能有一种颜色 (为了简化,这里暂不讨论次像素反锯齿技术),要在屏幕上显示,必须先把以 pt 为单位的长度转换为以像素为单位的长度,这个转换的媒介,就是 DPI (事实上,这里的所谓的 DPI,是操作系统和浏览器中使用的术语,即为 PPI, pixels per inch,和扫描仪、打印机、数码相机中的 DPI 是不同的概念)。
例如,无论在哪个操作系统中,Firefox 浏览器默认的 DPI 都是 96,那么实际上 9pt = 9 * 1/72 * 96 = 12px。
所以,虽然“DPI”中的“I”和“1pt 等于 1/72 inch”中的“inch”,都不代表物理上的英寸,但这两个单位互相之间是相等的,也就在相乘中约掉了。
那么,真实的物理长度怎么计算呢?请拿出一把尺子,丈量你的显示器的可见宽度 (我这里是 11.2992 英寸),除以横向分辨率 (我这里是 1024 像素),得到的就是每个像素的物理长度。
现在我们可以回答这样一个问题,网页上 9pt 的字体究竟占用了多宽的空间?答案是:
9 * 1/72 * 96 * 11.2992 / 1024 = 0.1324 英寸 = 0.3363 厘米。
有兴趣的朋友可以自己查证一下。
29th January 2006, 06:13 pm

其实在 ALA 上 Printing a Book with CSS: Boom! 这篇文章出现的时候就想写篇文章说说这个东西了,拖到现在实在有点不好意思。
简单的说,Prince (可能这个网站在国内被封禁了) 是这么个工具,你可以在用简单的 (X)HTML 和 CSS 来描述自己的文档之后,把它转换成适合打印的 PDF。
乍看起来,Prince 是一个近乎完美的工具,优秀的 CSS 支持——它甚至已经 Pass 了 Acid 2,支持透明 PNG,能够自动探测并支持 HTML 和 XML 格式,对 CSS 3 Page Media 的创新性实现,Prince 对非营利的学术使用是免费的……等等。CSS 的创始者,Bert Bos 和 Håkon Wium Lie 已经用这种方式完成了一本书。
那是不是它就没有缺陷了呢?正相反,缺陷也同样明显——对基本的印刷排版的支持还是太少,毕竟 CSS 相比书面排版,已经是一个简化而又简化的模型了,最大的问题是缺乏自动断字 (hyphening),如果不能断字,左右对齐 (justify) 的文本中每个单词之间就会有过大的间隙,这是印刷排版中最致命的地方。(顺便说说,TeX 中最有趣的一个算法就是创新的断行算法,当时为了看这个算法专门复印了 70 来页的论文,555..)
此外还有边界出血、色彩使用等许多问题,导致 ALA 上这篇文章的评论中纷纷表示“Not the right tool”。但作者的看法也有其道理:你可以创建这样的书,在支持绝大多数浏览器阅读的情况下,还有能力转换成 PDF 供纸上阅读,不是很方便的吗?对于不愿意深入了解 LaTeX 或其他专业排版工具的 CSS 专家们来说,这也是很趁手的工具,就像大家喜欢使用 S5 这样的幻灯片制作工具而宁愿放弃 PowerPoint 这样的专门工具一样。
总结起来,Prince 是两位 CSS 创始人作的非常有趣的尝试,它在易用性上已经远远超过 DocBook - XSL-FO - FOP 这种传统的由 XML 生成 PDF 的过程,虽然现在还不能和 TeX 的效果相比,假以时日,排版的效果必会更加出色。
5th October 2005, 09:35 pm
在 9 月发布的 Firefox Beta 1 中我们已经可以看到 CSS3 分栏模式的部分支持,最近一期的 ALA 上 Cédric Savarese 介绍了他用 JavaScript 实现的分栏模式,尽管在屏幕上实现分栏是危险的,但也不失为一个选择。
7th August 2005, 01:44 am
W3C 的东西太学究,估计大家都不喜欢,但世上有一物名幻灯片,特点是简洁明了,大家想必都不讨厌——此物最适合一个学期没看书,临时抱佛脚的偶们。
w3c 近期的一些 presentation,多为介绍技术的趋势,宣讲一些大家平时不大注意的东西,我选了几个不太酸的,有时间不妨看看:
12th December 2004, 03:53 pm
临近半个学期一度的考期,blog 的频率不得不降下来,好几天没上网,确实也出现了不少新的东西。
定位总是一个热门话题,近来,Tommy 的两篇文章:Relatively Absolute 和 Float Layouts 相信能给你一点启发。
Marek 的 CSS Workshop,介绍关于 CSS 的有趣实践,比如纯粹用 CSS 做一个 W3C 的验证标志,给水平线 <hr /> 设定样式等。
Roger 的 Quotations and citations: quoting text 是关于如何正确地在 (X)HTML 中引用别人的文本的一篇解释性文章,而他的 The alt and title attributes 则是就 alt 和 title 属性的正确使用这个老话题而写的。Dave Shea 说得不错,Roger 完全可以就如何正确使用标记写本书了。
最近一期 ALA 的 Invasion of the Body Switchers 是先前流行的 Paul Sowden 版本样式表切换器的一个更新版本,更关心与亲和力方面的应用。
来自 Mozilla 方面的消息,则是 Thunderbird 和 Nvu 分别发布了 1.0 版本和 0.6 版本,不过似乎 nvu 还没有成为 mozilla 的 HTML 编辑器的下一代版本,或许它更愿意作为一个独立软件提供?
时间有限,不得不在这里打住。
4th December 2004, 11:25 am
Joe Gillespie 终止了他的 WPDFD - Web Page Design for Designers,也就是说,这个精彩的站点将不再发布新的信息,仅仅成为一个保留档案的站点。
WPDFD 的建立到现在已经有 8 年的历史,是和 Zeldman News 一样的元老级网站,但恐怕很少有国内的朋友认真浏览过它,Joe 在 Stop the Web, I want to get off 回顾了 Web 和这个网站一起成长的历史,推荐看看。
顺便提一句,Joe 本人,也将近 60 岁了,或许现在的退休也是个不坏的注意。
21st November 2004, 12:50 pm
这里的 CSS REFERENCE 提供了一份在线的 CSS 参考手册,在浏览的同时你还可以在一侧的文本框中输入代码,亲自试一试,很方便。