样式之美 ^{没落的角落}

前几天，看到有人写了个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我），虽然定位可能有点麻烦，但总是能定准的，直接样式搞定。

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

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

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

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

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

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

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

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

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

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

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

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

省市级联这东西基本是网注一份，而且基本是全是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提交，哎。

大家应该经常看到在文本框里提示文字，然后一点就没了。通常做法都是默认给个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上，不过哪种方式在哪些情况应用会更适合呢，大家自己决定吧。

在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!的解决方案吧？

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

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

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

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

• IE用window.external.addFavorite
• Win的其他浏览器提示使用ctrl+D
• Mac的浏览器提示使用command+D

直接调用系统的颜色显示在网页上本来是件很好玩滴事，但是，也有个缺点，就是可用的色太少 比如Bindows在它的启动画面一点点应用。

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

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

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

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

阅读《CSS系统颜色》全文

终于，《Web标准设计》出版了，很高兴，这本书从开始到现在刚好是两年。签合同的时间是2006年12月13号，我去出版社拿样书的时间是2008年12月12号，真TMD的巧。估计很少作者的书要出这样久，月影是我在接书后骗去写《JavaScirpt王者归来》，人家再慢也都已经第二次印刷了，更不敢去对比人家2两个月交稿。

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

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

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

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

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

gzip 是什么东东呢？百科跟我们说

gzip是GNU zip的缩写，它是一个 GNU 自由软件的文件压缩程序。…
gzip 的基础是 DEFLATE ，DEFLATE 是 LZ77 与哈夫曼编码的一个组合体。…
“gzip” 也经常用来表示 gzip 文件格式，这种格式：

• 10 字节的头，包含幻数、版本号以及时间戳
• 可选的扩展头，如原文件名
• 文件体，包括 DEFLATE 压缩的数据
• 8 字节的尾注，包括 CRC-32 校验和以及未压缩的原始数据长度

简单来说，Gzip就是一种让你的网页显示变快一种神奇的东东。

那么，什么是人肉Gzip呢？就把本来要服务器动态压的东东人工压，大家可以先看一下这篇：Gzipping CSS and Javascript files。实现方式就人工zip一下，然后服务器再派上头。

<link rel="stylesheet" href="style.cgz" media="all" type="text/css" />

# Compressed css files
AddEncoding x-gzip .cgz
AddType text/css .cgz

其实Gzip就是三个选择：CPU、内存、IO，通常都是cpu+内存来做，我并不喜欢这个人工IO的方式，它最大的一个问题就是不能解决http1.0的问题，而且很体力活，不过我们可以人工zip来看我们的东西Gzip后的大小。在中国，因为有好多xx版XP的原因，http1.0成为了可能。