样式之美 http://www.aoao.org.cn 没落的角落 Tue, 03 Apr 2012 16:40:36 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 Retina 显示屏下 @2x 图片的模拟 http://www.aoao.org.cn/blog/2012/04/retina-display-image-2x/ http://www.aoao.org.cn/blog/2012/04/retina-display-image-2x/#comments Mon, 02 Apr 2012 06:52:11 +0000 aoao http://www.aoao.org.cn/?p=174 前几天在不小心看到传说中Apple在其网站让网页图片支持 Retina Display 的 JS image_replacer.js ，结果认真看了一下，代码中比较好玩的地方是用 ☃ 当“变量”，但核心实现却无比坑爹，居然是图片多做一份@2x 的版本，发现是高分屏，就把图片的地址换下。 =。=

在高分屏下，正常图片一般让人感觉模糊一点，条件允许的情况下，多做份@2x 的图片当然后是效果更好，并不是所有的图片都方便处理成@2x，有没有@2x的版本还不知道呢，程序如果能自动化处理的话，成本自然低了，不过，我还不知道有啥程序算法可以把已经丢了细节的图片还原回去。

这时我想起了 在HTML 5 的 Canvas 中应用卷积矩阵对图像处理，我偷拷了他的代码 顺便修改了处理图片边缘跟透明度的部分，做了个图片锐化的效果，如果你用电脑看的话，放大一下网页还是勉强可以看出效果，不过没 Retina Display 的设备明显，可以用iPhone 4+ 或者new iPad 试一下，或者看我的截图。

优点

  • 大部分图片效果比原来好，不用做@2x 的图片
  • 多终端统一维护，脚本渐进增强
  • 文件小省带宽，3G 时还是有一定的优势 用EDGE的就更不用说了。

缺点

  • 效果真心没 @2x的好，当然如果有更好的算法也难说
  • canvas 读图片数据存在跨域问题 （有所谓的解决方案，见后面）
  • 锐化目前的实现，基本就是读点的操作，大图片手机估计吃不消

以上方案纯属研究，如要投入生产还要再三考虑。

顺便说下 js可以能过 window.devicePixelRatio 来判断 是否为Retina。

canvas 读取跨域图片数据的解决方案

当年用的iframe 来解决跨域的方案再次改造实现，挖哈哈。在图片所在的域下放一网页用来读图片数据跟通讯，不过这次是改用 postMessage 来传图片数据。

这里有份之前实现的代码 github.com/aoao/Image64 ，那时是做图片分析时写的，有兴趣的同学可以看一下。如果有更好的方式也介绍给我，我一直觉得这方式太坑爹了，在电脑上用可能还行，在手机上跑可能比较不适合。

扩展阅读

]]> http://www.aoao.org.cn/blog/2012/04/retina-display-image-2x/feed/ 4 transform:rotate在手机上显示有锯齿的解决方案 http://www.aoao.org.cn/blog/2012/03/transform-rotate-anti-aliasing/ http://www.aoao.org.cn/blog/2012/03/transform-rotate-anti-aliasing/#comments Thu, 08 Mar 2012 13:42:32 +0000 aoao http://www.aoao.org.cn/?p=171 transform:rotate 属于简单好用的效果，但在手机上显示时，会有比较明显锯齿。

解决方案也很简单， 利用外层容器的overflow:hidden 加上图片margin:-1px 就可以解决。

原理没去深究，理论上是矢量跟位图的处理不一样，这个方案也有个小问题 就是图片变小了 ^_^ 可以用手机看看demo http://labs.aoao.org.cn/demo/transform-rotate/

update: 大家反应这方案在电脑上反而会出问题。

我测试了个新的方案rotate3d + border:1px solid transparent;，问题也算是解决了。

同时发现另一个小问题，缩放的图片使用rotate3d 在非retina 屏下图片会变模糊了点点（属于不对比不发现的），而用rotate就没这问题，这个问题在old iPad 发现。

同时又发现另另一个小问题，iOS 4.x上的 想要平滑，缩放图片哪种都会变模糊了点点（同样属于不对比不发现的），这个问题在old old iPhone 发现的。

当然，本来缩放图片是件不好的事，可是缩放图片在这里是故意的，大家选适合的方案在对应的场景使用吧，原本方案就没想着要在电脑上的浏览器上使用的

]]> http://www.aoao.org.cn/blog/2012/03/transform-rotate-anti-aliasing/feed/ 3 暂停页面资源占用 http://www.aoao.org.cn/blog/2012/01/pause-page/ http://www.aoao.org.cn/blog/2012/01/pause-page/#comments Thu, 12 Jan 2012 16:05:04 +0000 aoao http://www.aoao.org.cn/?p=169 “暂停页面资源占用”其实是个function，javascript也是可以用中文来写滴

function 暂停页面资源占用(){
	幻灯广告2.暂停();
	文字滚动5.暂停();
	啥啥啥动画.暂停();
	定时更新长链接.低迷模式();
}

为什么要这样做呢？ 装厚道，把资源让给别人，有些情况下还可以省自己服务器的资源。

那什么时候调用他呢？ onblur，那怎样变回正常呢？再写一个对应滴。

但是这样看起来不是特别高级，怎样更高级呢？自定义事件 我记得好久好久前写过个task 让那些爱动的元素玩上 onElementShow onElementHide 这样的事件，然后就把上面的 function 分开了，让元素看不到时就可以开始暂停。

其实还不够高级，我们还可以把 元素看不到 、页面 blur、窗口最小化 做进一步细分，不同阶段做不同深度的事。

附窗口最小化检查

function isMinStatus() {
	var isMin = false;
	if(window.outerWidth != undefined){
		isMin = window.outerWidth <= 160 && window.outerHeight <= 27;
	}else{
		isMin = window.screenTop < -30000 && window.screenLeft < -30000;
	}
	return isMin;
}

这代码也不是我发明的。。很久前找到的，忘记出处了。win下基本都能用。mac 研究了发现没啥好办法发现最小化，最后用了个很土的办法，键盘控有效。囧rz

event.metaKey && event.keyCode =='77' //⌘command + m

大家有其他好办法没？

update
小光说的Page Visibility 测试地址 M$测试地址，ie10 Chrome ff10+ 都支持， ff在mac支持得比较好，最小化算，但command+h 也不算，不知道为什么，突然在想显示桌面(F11/fn+F11) 要不要算。

相关资料

btw: 这内容是很久很久前写的，那时是想写个前端长篇小说，但后来不知道怎样没了，今天碰巧跟同学聊到这事，我整理整理发出来

]]> http://www.aoao.org.cn/blog/2012/01/pause-page/feed/ 4 带图案的二维码 http://www.aoao.org.cn/blog/2011/08/qr-code/ http://www.aoao.org.cn/blog/2011/08/qr-code/#comments Thu, 11 Aug 2011 14:39:35 +0000 aoao http://www.aoao.org.cn/?p=163 那个黑不溜秋的二维码大家都见过吧。最近随着高档手机才稍微有人知道，大家用这个 QR-Code Generator，生成自己想要的信息，比如生成这样：

^_^

如果你用iPhone 的话。可以用Scan 或 ScanIt 这样的app来解码。其他手机自己想办法。

好了，现在来说明为什么那个二维码有图案，据说二维码的容错非常高，所以，只把图片或者字找个相似的地方放上去就行。。这里有令人拍案叫绝的15个二维码，可以看看，我最喜欢的是这个：

]]> http://www.aoao.org.cn/blog/2011/08/qr-code/feed/ 8 判断一个网页是否适合手机浏览 http://www.aoao.org.cn/blog/2011/07/mobile-accessibility/ http://www.aoao.org.cn/blog/2011/07/mobile-accessibility/#comments Sun, 24 Jul 2011 09:19:29 +0000 aoao http://www.aoao.org.cn/?p=159 最近在做一个项目，需要知道一个网页是否适合手机浏览，想了点方案。

1.域名: 二、三级域名中包含有m 3g wap mobile 的算是。当然像 mobile也有坑爹的 比如像mobile.qq.com，mobile.yahoo.com

2.网页的DTD: XHTML MP 或 wap

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.dtd">

但是wap并不一定适合手机浏览，有种破手机叫iPhone。他有个破浏览器叫Safari

3.网页的meta里有viewport 如

<meta name="viewport" content="width=xxx; ..... "/>

但是，可能只适合某些手机。适合手机访问不代表一定是手机版，某搜索就直接用这个判定为网页是手机版

4.网页标题包含有“手机版” “触屏版”

接着另一个问题，怎样让不适合手机浏览的网页变得适合呢？

5.让spider 装手机去逛，看会不会适配。

6.特定网站集的把topN的人肉找出手机版，找出与pc版匹配的规则，配

7.使用中转服务

]]> http://www.aoao.org.cn/blog/2011/07/mobile-accessibility/feed/ 2 iPhone Web App 动态 icon http://www.aoao.org.cn/blog/2011/01/iphone-web-app-dynamic-icon/ http://www.aoao.org.cn/blog/2011/01/iphone-web-app-dynamic-icon/#comments Sat, 01 Jan 2011 15:11:11 +0000 aoao http://www.aoao.org.cn/?p=151 不记得什么时候发现 iPhone 收藏到桌面的网页，在每次打开后会更新apple-touch-icon 的图片，也正是因为这个特性，我们可以用来动态更新icon

看下这个例子 http://aoao.ws/app/testicon/ 这个真的是iPhone Web App哦。不是iOS的，不信用iPad试下。。XD

测试时，发现启动图也可以变更。但是，切记 iPhone 的启动图大小只能是320*460 。为什么不是320*480呢，这是为了让web app启动时，如果是横屏，能留20px的白边玩的。iPad 的启动图是768*1004，目前的测试发现只支持竖屏，囧rz

然后又想了半天，发现除了日历、天气外，好像没啥啥应用要动态更新icon的样子。

做了个体验性的天气 http://aoao.ws/app/weather/?w=北京。

iphone weather icon qrcode

写了才发现。。canvas在iOS3.x上真不给力。。fillText可以考虑用canvastext不然你的文字不知道飞到哪。不过这个也只能解决英文的问题，中文就别折腾了，真的要做服务的话，可以考虑服务端生成对应的图片。

如果app太久没开的话，它还会坏掉，就成了这样

iphone weather bug icon

T_T 自己加上系统的高光，初步估计原因可是为 iOS会在没开app的情况，自己去更新apple-touch-icon-precomposed.png ，但因为这图片实际又不存在，然后就自做主张了，加入收藏时，桌面图标是好的，但其实已经坏掉了，双击home键时可以看到，只要动态改的就会坏，准确的说用data:image/png;base64,这种方式写入的会坏，但对于桌面的什么时候会变坏还是不清楚，同时发现我的高光画的不好，为什么要自己画高光呢，因为原生带的天气也不是用系统的高光，不过绘下边的文字还是偷懒了，其实可以做得更好。

=。= 目前不支持 Retina Display ，其实写过测试，但发现图片得大点，Native App的优势体现了。

]]> http://www.aoao.org.cn/blog/2011/01/iphone-web-app-dynamic-icon/feed/ 3 所谓招聘 http://www.aoao.org.cn/blog/2010/10/job/ http://www.aoao.org.cn/blog/2010/10/job/#comments Tue, 05 Oct 2010 15:16:39 +0000 aoao http://www.aoao.org.cn/?p=150 最近做了个好玩的招聘视频，大家娱乐一下。

看不到的同学可以到http://v.youku.com/v_show/id_XMjA5ODI2OTE2.html

]]> http://www.aoao.org.cn/blog/2010/10/job/feed/ 15 JavaScript组件打包模式 http://www.aoao.org.cn/blog/2010/04/js-resource-packages/ http://www.aoao.org.cn/blog/2010/04/js-resource-packages/#comments Mon, 05 Apr 2010 08:37:34 +0000 aoao http://www.aoao.org.cn/?p=149 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使用外链吧

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

一些细节和纠结的地方

  1. 所有图片都打包到js里不一定合理，打包进去的应该是必用的图片。
    那排除的图片是再打一个包好呢还是直接用图片？
  2. 图片可以先压后编，我选用的图片压缩工具是pngout，而且一般是用-s5。
    有人做了些测试Uncompressed data in base64? Probably not，大家自行判断。
  3. 重复的图片引用直接用dataURI会搞得很大很大，gzip又笨得跟猪一样不会压掉。
    我是选用存成js变量，淘宝的同学是用提class的方式
  4. MHTML在ie7+/vista缺少结束分割符无法显示，win03sp2缺少Content-Type会有安全提示，原因都MIME不标准，不是所有的东西都可以省。
  5. 是选择把所有的东西都打包在一个文件还是按MHTML跟dataURI分类型打包成两份在server按ua派文件或由类库智能去读取，好像后者比较和谐。
  6. 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:上篇文章的评论里发现了这个打包的站，输出界面很帅

]]> http://www.aoao.org.cn/blog/2010/04/js-resource-packages/feed/ 11 人民币的符号的正确表示法？一杠？两杠？￥还是¥呢？ http://www.aoao.org.cn/blog/2010/03/rmb/ http://www.aoao.org.cn/blog/2010/03/rmb/#comments Sat, 20 Mar 2010 11:30:21 +0000 aoao http://www.aoao.org.cn/?p=147 因为做的项目会跟钱打了交道，所以被研究了。

那是一杠还是两杠呢？最简单的方式就是拿出钱包，掏出张“新”的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中，“¥”的命名实体是“&yen;”，字符代码是“&#165;”和“&#xA5;”。mac os 按alt+y可输入 via ），虽然从命名可以知道是yen而不是yuan，好像现在变能通用了，又不过很多情况别人会把¥当成JPY 而不是CNY。

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

]]> http://www.aoao.org.cn/blog/2010/03/rmb/feed/ 15 MHTML在ie7/vista bug 解决方案 http://www.aoao.org.cn/blog/2010/01/fixed-mhtml-ie7-vista/ http://www.aoao.org.cn/blog/2010/01/fixed-mhtml-ie7-vista/#comments Sat, 30 Jan 2010 13:55:45 +0000 aoao http://www.aoao.org.cn/?p=146 在多数情况下，以增加文件大小代价来换连接数是有价值。而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的终结，相应的工具与应用也要浮出水面了。

]]> http://www.aoao.org.cn/blog/2010/01/fixed-mhtml-ie7-vista/feed/ 10 一次炮轰引发的深思 http://www.aoao.org.cn/blog/2009/09/book-x-review/ http://www.aoao.org.cn/blog/2009/09/book-x-review/#comments Wed, 23 Sep 2009 19:31:09 +0000 aoao http://www.aoao.org.cn/?p=143 话说前文，有人在无忧发了个书的推荐，然后hax与爱民同学讲解其样章N处不解（疑是错误，主要是作者认为不是错误，偶js又水平不行，不敢乱下定论）之处。。然后因为众所周知的原因，出现了炮轰事件，又见讨-论，

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

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

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

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

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

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

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

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

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

]]> http://www.aoao.org.cn/blog/2009/09/book-x-review/feed/ 38 superLink，让伪链接更有可用性 http://www.aoao.org.cn/blog/2009/06/superlink/ http://www.aoao.org.cn/blog/2009/06/superlink/#comments Sun, 31 May 2009 17:48:02 +0000 aoao http://www.aoao.org.cn/?p=142 前几天，看到有人写了个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我），虽然定位可能有点麻烦，但总是能定准的，直接样式搞定。

]]> http://www.aoao.org.cn/blog/2009/06/superlink/feed/ 15 yslow 2 更新（含可下载地址） http://www.aoao.org.cn/blog/2009/05/yslow-2/ http://www.aoao.org.cn/blog/2009/05/yslow-2/#comments Fri, 01 May 2009 14:29:30 +0000 aoao http://www.aoao.org.cn/?p=141 在前端开发中，Yslow 是个很不错的参考，对于网站的优化也能提出一些不错的建议。

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

]]> http://www.aoao.org.cn/blog/2009/05/yslow-2/feed/ 8 纯CSS在Firefox模拟text-overflow: ellipsis效果 http://www.aoao.org.cn/blog/2009/03/firefox-css-text-overflow-ellipsis/ http://www.aoao.org.cn/blog/2009/03/firefox-css-text-overflow-ellipsis/#comments Sun, 15 Mar 2009 14:09:45 +0000 aoao http://www.aoao.org.cn/?p=140 text-overflow这个属性真让Firefox折腾，虽然之前有写过Firefox通过XUL实现text-overflow:ellipsis的效果，不过要外挂xbl来用也就一直没用，虽然想过Data URI，但其实还不如外挂xbl。

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

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

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

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

]]> http://www.aoao.org.cn/blog/2009/03/firefox-css-text-overflow-ellipsis/feed/ 18 用私有属性来拯救IE7缩放图片的失真 http://www.aoao.org.cn/blog/2009/03/img-ms-interpolation-mode/ http://www.aoao.org.cn/blog/2009/03/img-ms-interpolation-mode/#comments Sun, 01 Mar 2009 17:13:06 +0000 aoao http://www.aoao.org.cn/?p=137 图片缩放会失真是真理，在浏览器里也一样，貌似使用传说中的双三次插值可以让失真看起来比较不明显，但是真的想不通IE7已经实现了，却不默认打开，是体谅我们的CPU还是内存呢？

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

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

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

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

]]> http://www.aoao.org.cn/blog/2009/03/img-ms-interpolation-mode/feed/ 13 省市级联菜单的可用性 http://www.aoao.org.cn/blog/2009/02/address-selector/ http://www.aoao.org.cn/blog/2009/02/address-selector/#comments Sat, 14 Feb 2009 19:02:43 +0000 aoao http://www.aoao.org.cn/?p=135 省市级联这东西基本是网注一份，而且基本是全是js写的，js写唯一坏处就是JS无效时不可用，我所说的js无效包括不支持js，js加载未完成或者失败。

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

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

还要考虑的问题

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

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

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

]]> http://www.aoao.org.cn/blog/2009/02/address-selector/feed/ 6 语义化的label？ http://www.aoao.org.cn/blog/2009/02/semantic-label/ http://www.aoao.org.cn/blog/2009/02/semantic-label/#comments Sun, 08 Feb 2009 15:39:10 +0000 aoao http://www.aoao.org.cn/blog/2009/02/semantic-label/ 大家应该经常看到在文本框里提示文字，然后一点就没了。通常做法都是默认给个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="" />

MobileMe的登录界面

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

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

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

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

]]> http://www.aoao.org.cn/blog/2009/02/semantic-label/feed/ 13 兼容所有浏览器的设为首页与显示小策略 http://www.aoao.org.cn/blog/2009/01/set-homepage/ http://www.aoao.org.cn/blog/2009/01/set-homepage/#comments Fri, 09 Jan 2009 18:32:02 +0000 aoao http://www.aoao.org.cn/?p=130 在IE比较简单，大家都知道用setHomePage来设置，懒人写法：

<a href="#setHomePage" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.aoao.org.cn');return false;">Set HomePage</a>

IE的结束了没?当然没有，其实M$还提供了一个神奇的接口给我们：isHomePage，它是用来干啥呢？它是用来检查一下IE的首页是不是你的，这样我们就可以做设为首页为后就不再显示“设为首页”的效果了。挖哈哈，这里有rank同学写的现成代码，不过我修改了两下，只是写法不同，跟悄悄的加入了广告。

<a href="/setHomePage" id="setHomePage">设为首页</a>
<!--[if IE]>
<script type="text/javascript">
(function(){
  var el=document.getElementById('setHomePage'),url='http://www.aoao.org.cn/',isHp=false;
  el.style.behavior='url(#default#homepage)';
  function check(){
    try{
      isHp=el.isHomePage(url);
    }catch(exia){}
    if(isHp){
      //el.style.visibility='hidden'
      /*AD*/el.innerHTML="《Web标准设计》雷人进行时";
      el.href="http://www.baidu.com/";/**/
      el=null;url=null;isHp=null;check=null;
    }else{
      el.onclick=function(){
        try{
          this.setHomePage(url);
          check();
          return false;
        }catch(exia){return true}
      }
    }
  }
  check();
})();
</script>
<![endif]-->

在inline的情况下，条件注释还是比较帅滴，可能你会问，为什么不把a也放在脚本里输出呢？ 其实，我们也可以解决其他浏览器的问题。

Firefox可没有现成的接口可以实现哦，但是，牛人们还是找出来解决方案，看一下Yahoo!的解决方案吧？

make y! home page@firefox

囧rz，被雷到的同学自觉举手，我用到这样久的Firefox 还不知道怎样设，试了半天，原来是把链接拖到工具栏的小房子上面，就可以设为首页。

还有好多浏览器，这时我们要派出终极解决方案。写帮助 -_-b ，好了，不会写的同学可以去抄一下yahoo的帮助。
那除了IE怎样识别是否被设为首页呢？可以写 cookies 或者用服务器来记，而有没有必要就看具体的应用了。

其实我们不一定要一直显示设置首页，比如用document.referrer发现是从搜索或者XX过来的，也许显示成收藏会更适合，像Yahoo!的首页，看到广告的机会比看到设为首页的机率高多了，大家自己把握吧。

兼容所有浏览器收藏全攻略：

  • IE用window.external.addFavorite
  • Win的其他浏览器提示使用ctrl+D
  • Mac的浏览器提示使用command+D
]]> http://www.aoao.org.cn/blog/2009/01/set-homepage/feed/ 8 CSS系统颜色 http://www.aoao.org.cn/blog/2009/01/css-system-colors/ http://www.aoao.org.cn/blog/2009/01/css-system-colors/#comments Sat, 03 Jan 2009 18:01:23 +0000 aoao http://www.aoao.org.cn/?p=128 直接调用系统的颜色显示在网页上本来是件很好玩滴事，但是，也有个缺点，就是可用的色太少 比如Bindows在它的启动画面一点点应用。

=。= 上次本来想在某个产品上应用，结果给人BS了，原因是色不好看 囧rz

在css21 中 System Colors也有相关描述，CSS3还加了超链接的色，还有个flavor。

但是，要有浏览器支持才是硬道理，浏览器不支持，虾米都回家睡觉。

附各色显示效果，如果看不到文字部分就像刮彩票一半刮开看一下，其中，Background 这个在safari 比较神奇，是透明哦。

CSS2.1中的System Colors

ActiveBorder
Active window border.
ActiveCaption
Active window caption.
AppWorkspace
Background color of multiple document interface.
Background
Desktop background. » test color:Background @aoao
ButtonFace
Face color for three-dimensional display elements.
ButtonHighlight
Highlight color for three-dimensional display elements (for edges facing away from the light source).
ButtonShadow
Shadow color for three-dimensional display elements.
ButtonText
Text on push buttons.
CaptionText
Text in caption, size box, and scrollbar arrow box.
GrayText
Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.
Highlight
Item(s) selected in a control.
HighlightText
Text of item(s) selected in a control.
InactiveBorder
Inactive window border.
InactiveCaption
Inactive window caption.
InactiveCaptionText
Color of text in an inactive caption.
InfoBackground
Background color for tooltip controls.
InfoText
Text color for tooltip controls.
Menu
Menu background.
MenuText
Text in menus.
Scrollbar
Scroll bar gray area.
ThreeDDarkShadow
Dark shadow for three-dimensional display elements.
ThreeDFace
Face color for three-dimensional display elements.
ThreeDHighlight
Highlight color for three-dimensional display elements.
ThreeDLightShadow
Light color for three-dimensional display elements (for edges facing the light source).
ThreeDShadow
Dark shadow for three-dimensional display elements.
Window
Window background.
WindowFrame
Window frame.
WindowText
Text in windows.

CSS3 新加的 User preferences for hyperlink colors

ActiveHyperlink
Active hyperlink background.
ActiveHyperlinkText
Text of an active hyperlink.
HoverHyperlink
Hover hyperlink background.
HoverHyperlinkText
Text of a hyperlink in the hover state.
Hyperlink
Hyperlink background.
HyperlinkText
Hyperlink text.
VisitedHyperlink
Visited hyperlink background.
VisitedHyperlinkText
Text of a visited hyperlink.
flavor
An accent color (typically chosen by the user) to customize the user interface of the user agent itself. User agents may default the ‘flavor’ color to the dominant accent color used on the physical machine/mechanism that the user is interacting with (frequently a mouse, keyboard, monitor and computer case, often just a laptop), if the UA is able to retrieve that information from the platform and machine. It is not expected that this value will make sense on all platforms and machines.
]]> http://www.aoao.org.cn/blog/2009/01/css-system-colors/feed/ 9 出版了《Web标准设计》！兴奋与失望 http://www.aoao.org.cn/blog/2008/12/web-standards-design/ http://www.aoao.org.cn/blog/2008/12/web-standards-design/#comments Sun, 14 Dec 2008 14:33:37 +0000 aoao http://www.aoao.org.cn/?p=127 终于，《Web标准设计》出版了，很高兴，这本书从开始到现在刚好是两年。签合同的时间是2006年12月13号，我去出版社拿样书的时间是2008年12月12号，真TMD的巧。估计很少作者的书要出这样久，月影是我在接书后骗去写《JavaScirpt王者归来》，人家再慢也都已经第二次印刷了，更不敢去对比人家2两个月交稿。

书的封面最终还是使用这个我不喜欢的封面

《Web标准设计》封面

并不是因为创意不好，是制作工艺不好，过重的阴影，让他看起来更山寨。最最让我不能接受的书的排版。从内容开始，除了引用的文字从仿宋改成黑体外，我看不出 跟我交的Word的排版有多少什么区别。早知道这样我就应该坚持我第一次交稿时那样，把图片都排在代码右边，这样看起来又明了，又省纸。价格也不是我能接 受了，虽然说最近纸贵，但是距离我最初想控制在50块下的目标太远了。就算打完折还有5~60块。

一本书还没正式面市就有勘误表，应该算是比较失败，更失败的是这本书是我写的，我现在最担心的是送印厂的版本不是最终校完的版本。

也许这本书的收藏意义更大于指导意义。毕竟两年前开始写时对技术的了解远没达到现在的程度。但不管怎样，书是我的，我会努力去维护好它。

原来计划推出与书同风格的小站主题也因为各种原因拖没了，就连现在的专题页也是拿到样书才发现我什么都没开始做才东拼西凑临时做的。用Webkit的浏览器（Safari,Chrome）会看到一些奇怪的效果哦 ^_^，好了大家来看看《Web标准设计》专题页面。

]]> http://www.aoao.org.cn/blog/2008/12/web-standards-design/feed/ 82