样式之美 - 《Web标准设计》

JavaScript组件打包模式

aoao — Mon, 05 Apr 2010 16:37:34 +0800

js组件通常带着css image ，但这样使用起来可能会有些小麻烦，为了让组件足够的solo，有了把css image也打包在js的想法，然后顺便把请求数变少，这个顺便好像更重要，呵呵。

那怎样打包呢，虽然有resource-packages这样的方案，可是我们的核心用户还在玩ie6这种时尚的浏览器呢！

我的方案：

CSS：CSS可以当成字符串存在js里，并由js动态加到页面上，页面用的可能不适合，但组件通常不会影响。
image：CSS里用的图片用dataURI（RFC 2397）跟MHTML（RFC 2557）的方式编到js里面。（秦歌写的dataURI和MHTML依然推荐给不知道是什么东东的同学看）。CSS里如果要绝对路径同样可以存js，js如果有直接用到的理论上也是可以，但js通常只改className会比较好。
flash：一些比较小的flash，比如存储，复制等也可以选择打包，不过现在米解决非IE的问题，非IE使用外链吧

这个有个打包测试的例子。

一些细节和纠结的地方

所有图片都打包到js里不一定合理，打包进去的应该是必用的图片。
那排除的图片是再打一个包好呢还是直接用图片？
图片可以先压后编，我选用的图片压缩工具是pngout，而且一般是用-s5。
有人做了些测试Uncompressed data in base64? Probably not，大家自行判断。
重复的图片引用直接用dataURI会搞得很大很大，gzip又笨得跟猪一样不会压掉。
我是选用存成js变量，淘宝的同学是用提class的方式
MHTML在ie7+/vista缺少结束分割符无法显示，win03sp2缺少Content-Type会有安全提示，原因都MIME不标准，不是所有的东西都可以省。
是选择把所有的东西都打包在一个文件还是按MHTML跟dataURI分类型打包成两份在server按ua派文件或由类库智能去读取，好像后者比较和谐。
swf用dataURI编入有问题，据说fp8没问题，现在都fp10了。
另一种solo的方案就是把js打包到swf，不过感觉不和谐

multipart/related例子

不算标准但能跑，换行也是很重要的

Content-Type:multipart/related;boundary="_BAIDU_YOUA_BB_YEP"

--_BAIDU_YOUA_BB_YEP
Content-Type:image/png
Content-Location:logo.png
Content-Transfer-Encoding:base64

...base64...

--_BAIDU_YOUA_BB_YEP
Content-Type:image/png
Content-Location:nono.png
Content-Transfer-Encoding:base64

...base64...

--_BAIDU_YOUA_BB_YEP--

btw:上篇文章的评论里发现了这个打包的站，输出界面很帅

推荐本书：《Web标准设计》

人民币的符号的正确表示法？一杠？两杠？￥还是¥呢？

aoao — Sat, 20 Mar 2010 19:30:21 +0800

因为做的项目会跟钱打了交道，所以被研究了。

那是一杠还是两杠呢？最简单的方式就是拿出钱包，掏出张“新”的50或100，翻到背面的银线上，就会发现两杠的符号。这个是以前跟同事在讨论是一杠还是两杠时，发现最有效的方案。

杠杠数的问题解决了，可￥（指的是通常输入法中文全角模式下按shift+4的那个）在宋体（v3.03, v5.0）的情况下是显示一杠囧rz。不过还好的是，常见字体：微软雅黑（Microsoft YaHei），华文细黑（STXihei），細明體（MingLiu）能显示两杠，理论上以下写法可以解决大部分问题。

font-family: 'Microsoft YaHei',STXihei,MingLiu

虽然部分用unicode表示的中文字体名可能会更好（via 中文字体在 CSS 中的写法），例如这样：

font-family: '\5FAE\8F6F\96C5\9ED1','\534E\6587\7EC6\9ED1',MingLiu

由于MingLiu也不是“盖”的，而且在12px上还算挺好看滴，看人个喜好，反正我不喜欢“乱码”。

当然，如果你有更好的方案也可以介绍给我，还有一些想到的方案:

编个字体，里面只有一个￥,用font-face的方式来使用，不过我也就想想，有兴趣的同学可以玩下。
在研究过程中还发现了 ¥ （在HTML中，“¥”的命名实体是“¥”，字符代码是“¥”和“¥”。mac os 按alt+y可输入 via ），虽然从命名可以知道是yen而不是yuan，好像现在变能通用了，又不过很多情况别人会把¥当成JPY 而不是CNY。

在找资料时还发现这个：有关于该符号的另一种诙谐讲法，说女人一旦嫁“到”了丈“夫”了就有钱了，所以“倒夫”字就是货币的符号了（via）

推荐本书：《Web标准设计》

MHTML在ie7/vista bug 解决方案

aoao — Sat, 30 Jan 2010 21:55:45 +0800

在多数情况下，以增加文件大小代价来换连接数是有价值。而MHTML+dataURI = 省连接数，如果你不知道这是什么东东，可以看秦歌写的Data URI 和 MHTML

因为之前发现在vista上的ie7有bug，且没有好解决方案，所以一直不敢项目上使用，之前虽然有看到有个用304的方案(via Data URIs, MHTML and IE7/Win7/Vista blues)，但觉一来做起来折腾，一来效果也不好，特别是hover时。

ie7 vista的bug大约这样，相应文件一旦local cache 后，浏览器就读不到。

今天，我要骄傲的跟大家，有两种可行的解决方案

方案1

Content-Type:multipart/related;boundary="_aoao_org_cn"
--_aoao_org_cn
Content-Location:aoao.gif
Content-Transfer-Encoding:base64
... base64...
--_aoao_org_cn--

注意最后的“--_aoao_org_cn--” ，查了不少资料，原来标准写法就是这样！（via rfc2557 第7页）囧rz

这个故事跟我们说一件事：有问题，查文档。我之前一直以为cache到本地后浏览器木权限用

方案2

------=_NextPart_000_0000_12345678.12345678
Content-Location:aoao.gif
Content-Transfer-Encoding:base64
... base64...

如果你有用ie存mht并研究结构的话，应该会觉得很眼熟，很神奇，但唯一的问题就是只能用一张图片，囧rz 反正有方案1，无视之。

伴随这个不是bug的bug的终结，相应的工具与应用也要浮出水面了。

推荐本书：《Web标准设计》

一次炮轰引发的深思

aoao — Thu, 24 Sep 2009 03:31:09 +0800

话说前文，有人在无忧发了个书的推荐，然后hax与爱民同学讲解其样章N处不解（疑是错误，主要是作者认为不是错误，偶js又水平不行，不敢乱下定论）之处。。然后因为众所周知的原因，出现了炮轰事件，又见讨-论，

那样多人推荐的一本书为什么会炮轰呢？怎没人来炮轰我的书呢? T_T 我经过深思后感觉原因有3点:

我没RP
水平烂到了没人理的地步
没那样多人给我推荐

当然3是最不可能的原因，肯定不是因为很多人推荐本书（因为没看过书，还不敢说是好书，当然也有可能是烂书，想当时，好像我也光荣的被邀请写书评，不过因为时间关系导致没写）就被乱轰，

有人说是书的原因，这书到底好不好。个人很难断定，各有说法，当然像hax同学这种只看看样章就评价的行为并不是非常推荐的，不就在样章里找出一堆问题呢？难道整本书都跟样章一样，样章能代表这本书吗？再看看人家的专题站引用的评价的都是好的，哪来像你这样多问题，连taobao的阿当都说这书好（其实我不认识他，没听过，只是见作者引用，又失败一下），理论这样多人推荐应该算好吧，我们暂时先不讨论这书到底好不好。

又有人说书有没有错误并不是主要原因，说的好像也是。好像我的书也有一堆错别字，还有属性打少字母的。其实很多书第一版都会有些错误（当然错误也有分不同的错法），以前也没见到这样大的事件，有错误应该不是核心问题。

那又是什么原因呢？这让我大思不得其解，最后，不小心看到一篇名为《一些技术图书编写、推荐、出版人员需要自重》

好了。。不兜了大家也勿盲目围观。围观的关键在于能否在围观过程中了解到有价值的东西。

最后希望大家买书时不要买到 “脑白金”。

扩展阅读：从“装B被雷劈”讲起

推荐本书：《Web标准设计》

superLink，让伪链接更有可用性

aoao — Mon, 01 Jun 2009 01:48:02 +0800

前几天，看到有人写了个superLink的东东，主要的做什么用呢？

我们有时会给在大块元素加个window.location='http://www.aoao.org.cn'，还顺便把光标定义成移上去会变成手势还代替链接，为什么不直接用<a>因为有时东西太多，不能放在链接里，比如hx、p、 li之类的。那问题来了，用js处理会让链接的功能没了一堆，作者在他的文章说到：

中键：新tab打开（aoao注：中键功能变更滴同学无视）

CTRL/SHIFT 单点：新窗口新tab打开（aoao注：自己浏览器改过设置以自己的为准）

右键菜单：虾米虾米方式打开

浏览器状态栏

其他，等（aoao注：好像也没其他的）

那看看效果： superLink Demo，试一下左中右键功能。

实现其实不难，就是把你原来加window.location的元素上盖上一个链接，透明为0，这样就可以把上面4条功能还原，-_-!。

总的来说，想法很好，有总比没有好，还封装好让别人用 ^_^，不过如果有机会再遇到类同的应用时，我应该会在原来那块元素里面的a里加个无用的span（语义愤青别BS我），虽然定位可能有点麻烦，但总是能定准的，直接样式搞定。

推荐本书：《Web标准设计》

yslow 2 更新（含可下载地址）

aoao — Fri, 01 May 2009 22:29:30 +0800

在前端开发中，Yslow 是个很不错的参考，对于网站的优化也能提出一些不错的建议。

这次的版本做了些很不错的修改，除了官方提供的地址在国内下载不了外没什么不好，详细的大家自己体验了。下载地址：

官方下载（暂时下载不了，估计是文件服务器没同步，代理可下）
我放在box跟自己的空间，是从官方下来的。

推荐本书：《Web标准设计》

纯CSS在Firefox模拟text-overflow: ellipsis效果

aoao — Sun, 15 Mar 2009 22:09:45 +0800

text-overflow这个属性真让Firefox折腾，虽然之前有写过Firefox通过XUL实现text-overflow:ellipsis的效果，不过要外挂xbl来用也就一直没用，虽然想过Data URI，但其实还不如外挂xbl。

这两天在论坛看到14px同学写的超过宽度显示省略号（无js全兼容），想法很有创意，使用一张图片来做“…”，另一张图片用来在字不够长的情况下盖掉“…”，原文攻略很完整，大家可以去看一下思路，个人认为的缺点就是用了图片，不够灵活，所以我就悄悄修改了代码，思路是用父一层的元素的伪类:after来完成“…”，再用元素自身伪类:after来盖掉不应该出来的“…”，看一下效果：

看上去好像很理想，但是text-overflow也不是那样好模拟的，有兴趣的同学看看demo就知道还有多少问题。

当成技术练手还是不错滴，不过估计应该不会拿着应用。

推荐本书：《Web标准设计》

用私有属性来拯救IE7缩放图片的失真

aoao — Mon, 02 Mar 2009 01:13:06 +0800

图片缩放会失真是真理，在浏览器里也一样，貌似使用传说中的双三次插值可以让失真看起来比较不明显，但是真的想不通IE7已经实现了，却不默认打开，是体谅我们的CPU还是内存呢？

简单来说，我们在图片的CSS 加-ms-interpolation-mode: bicubic 就可以让IE7的图片在有缩放的情况下，失真变得不怎样明显，

更多的测试可以到可以到MSDN做的例子看一下效果，或者到血統の森-web実験小屋看一下效果。

没想到IE7平滑的效果居然可以比Safari好。更让我想不到的是，居然还有另一个属性值nearest-neighbor，难道为了让人节省CPU而使用吗？最少我现在还没想到为什么要用的理由。

BTW：那时发现这个属性后给同事笑到说，人家某部门去年就发现了，居然我开始火星鸟，不过发现了不用也没什么作用，呵呵，谨以此文献给比我还火星滴同学

推荐本书：《Web标准设计》

省市级联菜单的可用性

aoao — Sun, 15 Feb 2009 03:02:43 +0800

省市级联这东西基本是网注一份，而且基本是全是js写的，js写唯一坏处就是JS无效时不可用，我所说的js无效包括不支持js，js加载未完成或者失败。

为了避免不可用，我曾经跟同事讨论过这样的实现方案。

默认显示为 input , 没加载完或者XX时，用户也可以填；
js有效时，用select代替掉input；
如果input里已经有内容，要记得拿给select；
某些情况可以考虑把第一个直接输出在html上。

还要考虑的问题

input 输入的地址数据的修正与格式(结构)化；
不能格式化的前端反应。

以前只是想想，最终因为XX原因米完成，今天不小心看到adsense 的注册页面也做了类似的处理。很好很强大。

有些东西，并不是你想得到就一定得做得了，比如某网站全站都不支持html的form提交，哎。

推荐本书：《Web标准设计》

语义化的label？

aoao — Sun, 08 Feb 2009 23:39:10 +0800

大家应该经常看到在文本框里提示文字，然后一点就没了。通常做法都是默认给个value，通过js来处理。详细实现都不介绍了，大家都会。现在来看一下一个比较创意的实现。

就是直接用label的内容盖在input上面，然后用js来处理一下。详细实现就不用说了，反正我想尝试纯CSS是没办法实现滴。从结构上来看，还是比较理想的，充分利用了label

<label id="usernameLabel" for="username" class="placeholder"><span>Member Name</span></label>
<input id="username" name="username" class="text" type="text" maxlength="128" value="" />

其实看图看不出什么，点图去网站看一下。

我还特别试了一下noscript的效果，跳转囧rz。

有些细节的，比如提示文字从灰变得更灰的过渡效果，是-webkit-transition的应用，要用webkit的浏览器才能体现。

再其实，input有个叫placeholder的属性，参考以前类型为search的input及相关属性，可以直接用在type="text"的input上，不过哪种方式在哪些情况应用会更适合呢，大家自己决定吧。

推荐本书：《Web标准设计》