幸福收藏夹

关于用户密码存储/传输加密

sofish — Fri, 10 Feb 2012 14:11:58 +0800

早上在 twitter 上问了大家在数据库中存储用户密码怎么加密比较好。大家都有各自的想法，主要是：

sha(salt$password+secret)
md5(md5(password)+salt))
sha1(md5(pass)+userID+siteConfigSecret)
salt$base64(sha1(pwd))
hash255+salt

加密是靠谱的

在服务端的话，其实无论是哪种方式，都是不能破解的（或者说一般人不能破解吧）。问题就集中在 http 的传输上（情况是没有 https 的情况下，如果有直接传明文就可以了）。@leafduo 同学的一句话让我突然明白了客户端传输的东西其实即使是加密过的数据，也已经是一种登陆密码，我们来看一下，假设我们使用的是 Pja 的 js md5 库，那么我们生成一个密钥，使用的加密算法我们不说，结果是：

YT7xt1uF119021eeae08751c0845ad3e51a9126ff

Javascript 加密是不安全的

好吧，没人知道这个字符串到底代表什么，只知道他是一串密码，用于去 post 到后台去登陆的。那么我们要如何破解呢？其实还是很难破解的。是吧，不过，不破解依然能行，因为他依然可以登陆。

我们看一下客户端的 javascript（这个是所有人都可以看得见的），生成这个加密字符串的小程序是这样的：

var origiPassword = input['password'].value,
	 encryptedPassword = md5(origiPassword);

// salt, 只是一个随机的字 md5-like 的字符串
function generateSalt(len) {
    var set = '0123456789abcdefghijklmnopqurstuvwxyzABCDEFGHIJKLMNOPQURSTUVWXYZ',
        setLen = set.length,
        salt = '';
    for (var i = 0; i < len; i++) {
        var p = Math.floor(Math.random() * setLen);
        salt += set[p];
    }
    return salt;
};

// 最终结果：YT7xt1uF119021eeae08751c0845ad3e51a9126ff
encryptedPassword += salt;

// post 到后台
post(encryptedPassword);

好吧，写到这里，大家应该明白了吧。因为 salt 其实就是一个随机字符，而这个我们之前看不懂的字符串其实是这样的：

YT7xt1uF1 + 19021eeae08751c0845ad3e51a9126ff

而 md5 值是唯一的，那么 19021eeae08751c0845ad3e51a9126ff 已经可以成为我们想要用的内容了。想象一下后台的操作，假设我们从数据库取出一个 md5 值，或者最操作后成为一个 md5 值，登陆一般是这样的：

serverSideMd5EncryptedPassword === encryptedPassword.slice(0, 9)// 去除 salt

返回 true 的话，就算登陆成功了。那么，想象一下刚才为什么说不破解 md5 值也一样可以用他来登陆了呢？看一下这个 cURL post 到后台的一个结果：

加密数据也是一种 “明文” 密码

$ curl -d 'username=sofish&password=YT7xt1uF119021eeae08751c0845ad3e51a9126ff' http://localhost:3000/test
>> true%

登陆成功啊，姐姐！！！

好吧，对于一个后端新手来说，今天大家的帮助又给我上了一课。特别感谢twitter 上的各们：@janlay, @leafduo, @ayanamist, @singinrain, @mcfog, @ruisin, @MoistRot

最终结果是，再牛逼的算法，"最终还不过 https 安全"（保留意见！）。- -!

IE6 Multiple Classes

sofish — Tue, 03 Jan 2012 23:28:38 +0800

UPDATE: 2012/01/04 （多谢各位的评论，又学了一课）

IE6 渲染的具体原理是：将 .multiple.classes 渲染成 AllSelector.classes 这样，也即最终渲染为最后一个 class。可以看一下这个 Demo，主要代码：

<style>
.FAKE.classes{color:red;}
.classes.FAKE{font-size:30px;color:green}
</style>

<p class="classes">
    hello momoko2k.
</p>

========

在 CSS 规范中，双重 class (Multiple Classes) 的优先级比单 class 更高。但它不适应于 IE6。像 !important 一样，不是不能应用于 IE6，而是它可能在当时起不到它的真正作用。如下面的代码，在 IE6 中，我们还是可以看到段落的颜色是红色：

<style>
    .multiple.classes{color:red;}
</style>

<p class="multiple classes">
    multiple class.
</p>

上面的代码已经告诉我们，multiple classes 是可以在 IE6 运行的。我们再看一下这段代码，(demo)，理论上，由于 multiple classes 的优先级更高，所以，在浏览器中显示的应该是红色，但你可以用 IE6 打开看看：

<style>
.multiple.classes{color:red;}

/* ie6 最终显示为绿色，因为 .multiple.classes 虽然显示正确，
 * 但却没有起到作用，它的优先级被 .multiple 和 .classes 分别盖过 */
.multiple{color:gray;}
.classes{color:green;}
</style>

<p class="multiple classes">
    multiple class.
</p>

这是 AliceUI 读者来咨询的一个问题，当时就写了个例子测试。因为记忆中一直是 multiple classes 在 ie6 中不可以用。多谢读者的问题，让我自己写了这个用例，又多了解多一个知识点。

跨浏览器获取 Geolocation

sofish — Sun, 01 Jan 2012 22:51:15 +0800

年末，这一年的工作都差不多搞完了。因为下一年的目标是 HTML5 应用，所以在做一些小尝试。距离第一次在支付宝分享 HTML5，已经有一年半了，时间好快，就这么过去了。而我似乎还是那个我。话多了。前几天和同事聊到可能可以做个基于 LBS 的服务，回到家里就尝试了一下 HTML5 的 Geolocation API。翻开一年前写的文档，很快就熟悉起来。主要有两个函数，下面是对比：

用于	方法	参数描述
单次	getCurrentPosition(successCallback [, errorCallBack, [, positionOptions])	successCallback: 成功请求时调用的 callback； errorCallBack: 请求出现异常时调用的 callback，可选； positionOptions: 对得于的位置进得微调。
重复	var watchPositionHandler = watchPosition(successCallback [, errorCallBack, [, positionOptions])
重复	clearWatch(watchPositionHandler)

理论上来说，watchPosition 对于需要重复执行的操作是非常有用的，比如不断在地图上显示目标的位置。但事情上 W3C 并没有规定获取的频率是多少（难道是我找不到？），所以导致了浏览器处理的结果非我们想要，下面这个截图分别是 Chrome 和 Firefox 的获取频率，Chrome 显示频率非常混乱，而 Firefox 则是每分钟/一次：

因此，如果想执行重复操作，最好还是利用定时器来重用执行 getCurrentLocation 以使你的程序能够显示正确的数据。当然，这是一方面的问题，只要浏览器支持 HTML5 的 Geolocation API，那么什么事都好商量，而我们问题就在于，像 IE 或者一下其他的，更老的浏览器，是不支持的。我们是不是有办法可以解决。

其实网站有很多提供免费 IP 获取的工具，比如 google Gears（停止开发了）、hostIP.info 等。所以利用这些工具，我们还是可以在其他只支持 javascript 的浏览器上获取地理位置信息的。下面是我写一个纯 JS 解决方案：

// Github 地址：geolocation.js
// 结合这个 js 和 QQ 地图做的一个简单 Web APP：Between US

/*
 * @Name: Geolocation
 * @Overview: the javascript way to fetch the geolocation
 * @Author: sofish Lin <http://sofish.de>
 */

// TODO: error handler for ie

function Geo(successCallback, errorCallback) {

    var that = this,

        // native geolocation API
        _w3cAPI = navigator.geolocation;

    // get ip-base geolocation
    // fallback for the w3c way
    function _ipBaseWay(){
        var that = this;

        var doc = document,
            script = doc.createElement('script');

        script.setAttribute('src','http://j.maxmind.com/app/geoip.js');
        doc.body.appendChild(script);

        script.attachEvent('onreadystatechange', function(){
            var target = window.event.srcElement;
            if(/loaded|complete/.test(target.readyState)){
                var coords = {
                    latitude: geoip_latitude(),
                    longitude: geoip_longitude()
                };
                return successCallback.call(that, coords);
            }
        });
    };

    // fetch coords using w3c Geoloactions API
    function _w3cWay (){
        var that = this;

        _w3cAPI.getCurrentPosition(function(position){
            successCallback.call(that, position.coords);
        },function(error){
            var err;
            switch (error.code) {
                case error.PERMISSION_DENIED:
                	err = 'You did not share geolocation data!'; break;
                case error.POSITION_UNAVAILABLE:
                	err = 'Could not detect current position!'; break;
                case error.TIMEOUT:
                	err = 'Retrieving position timedout!'; break;
                default:
                	err = 'Unknown error';
            };
            errorCallback.call(that, err);
        });

    };

    // create the position
    !!(_w3cAPI) ? _w3cWay() : _ipBaseWay();
};

开源 Alice 样式库解决方案

sofish — Fri, 23 Dec 2011 14:46:43 +0800

CSS 作为一门灵活的语言，并不容易像 JavaScript 一样构建出一个库。理解 CSS，建立相应的对应方案，目前在国内外都没有很好的案例。在差不多 2 年前，我刚来到支付宝的时候，师傅让我看一个杂乱的有 6000 行、100k+ 的 CSS 文件，体积不是问题，问题在于对于这个文件无从下手。谁都不敢改，更没有规律让你去优化。当时我的想法是，做一个让大家用起来更方便的方案。包括代码+文档，而后来他还包含了一个兼容解决方案库，最终还增加了编辑器插件。

一年后，Alice 出来了。经过 1 年的探索和应用。新的样式方案已经全面应用在支付宝 2011年12月15号发布的新版上，并应用于支付宝大大小小的各个项目中，接受各种考验。今天 Alice 将作为一个圣诞礼物。对外开放：

Github 仓库：https://github.com/sofish/Alice
官方展示网站：http://aliceui.com

我想，发布一个开源的项目不仅仅是 PO 出代码让大家查看/使用/评论，而更多的是一份责任。我们希望发布代码，帮助有需要的人；也将收集反馈，不断改进这个产品，以便于使用的人能跟项目一样成长起来。我不知道是否能真正帮助到，但我相信可以。至少在支付宝，我觉得 Alice 已经改变了大家应用 CSS 的基本，这个基本是，代码必须是有注释的、命名规范统一的、模块化的，并且能抽象供重用的。

采用 MIT License 许可。属于开源协议中开放权限最好的协议之一。基本上只要署名即可用，详情可以见 Alice License。我们基于“分享·贡献·学习”的理念建立 Alice 网站，开源部分团队成果。欢迎参与 Alice 的开发，或提出你宝贵的意见。

了解这个开源程序。可以看看我们官方网站上的介绍，而快速开始，你可以通过下面几个链接来到达核心的内容：

1. Alice 入门指南

如何快速开始，了解和使用 Alice 提升团队合作的效率。

2. 成为作者/贡献者

成为一个代码贡献者、插件作者，或者 fork 一个自己的分支吧，让你的简历多一份可写的内容

3. Alice 样式库解决方案

如果我们风格统一，那么代码将是有规可循的。我们可以根据命名了解结构，根据结构理解构建的代码原理。对于跨产品合作，将是无缝的；对于多人 debug 也将是无碍的。样式解决方案正在为这样的目标努力。现在她已经应用于支付宝的各条产品线。

4. 阅读 HTML5/CSS3 标准文档

标准化文档项（Standard Specs），目前主要是对 HTML5/CSS3 这些较新的标准技术进行的标准文档研究。使用于标准布道。让更多不熟悉相关技术的人可以阅读更易懂的文档、了解需要注意的点和知悉相关的解决方案。后续计划是产出网站应用新技术的渐进增强方案和实践解决方案。

如有问题，请第一时间联系我们：admin@aliceui.com

========

更新：2011123T16:58

不好意思，服务器被攻击，请先访问我们的仓库：

https://github.com/sofish/Alice

。官方首页稍候开放。

HTML5 全屏 API

sofish — Thu, 10 Nov 2011 15:09:43 +0800

注：提 HTML5 只是说明他是一项新的东西，至于浏览器的 JavaScript API 应不应是 HTML5 的一个配套？我们不纠结。不如看这个接口能给我带来什么，思考可以如何给网页做个体验上的增强应用吧。

一、说在前面的

其实只是一个新的 JavaScript API，让 HTML 元素可以实现全屏显示。不过，这已经足够让我们兴奋。具体是怎样呢？其实这个从 iOS 和 Safari 5.0 就已经可以用在 <video> 上。看一下这个，在 iPhone 上访问 youku 上的一个视频：

我们可以点击中间这个大大的放映按钮，这里 iOS 里的 safari 会把影片全屏显示，使用的就是这个接口。只不过是 Safari 自己实现的接口。依然不是 W3C 标准。如下图：

二、FullScreen JavaScript API 具体使用

1、JavaScript API

FullScreen Javascript API 目前仍是草案，实现这个 API，更确切来说是具有这项功能的浏览器有：Chrome 15 / Firefox Nightly / Safari 5.1。对于 JS API 的前端调用，我们可以先看看下面的代码：

// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen(); 

// Firefox (works in nightly)
element.mozRequestFullScreen();
document.mozCancelFullScreen(); 

// W3C 提议
element.requestFullscreen();
document.exitFullscreen();

只有两个方法，在需要调用全屏的元素调用 requestFullscreen() 方法，在需要退出时对 document 调用 exitFullscreen() 这个 API。问题不大，只是命名上的不同。

只是，厂商前缀，各浏览器的实现和 W3C 不一致，代码又得写得跟屎一样。我特意把不同用颜色标注出来。绿色的是相同的点，红色的是不同的点。在这一点上倒觉得 W3C 有点奇怪。好不容易 Webkit 和 Mozilla 是一致的，何必改掉命名。既然发，为什么不把 request 发成 enter 与 exit 对应？！。无论如何，至少可以实现，目前 IE 仍没有决定要不要实现这个草案，Johndyer 这样说：“I have an email from a IE team member saying they are discussing it, but have not made any decisions. ” 。呃~

在这里吐槽也没什么用，我们返回正题。浏览器支持 fullscreenchange 事件。让你可以为全屏做更多事。官方草案没有多提，只是略过，这一段来自 Johndyer 的代码，使用的是 Mozilla 的提案，具体使用还需要具体对待：

// Webkit-base: element.onwebkitfullscreenchange
// Firefox: element.onmozfullscreenchange

// W3C Method:
element.addEventListener('fullscreenchange', function(e) {
    if (document.fullScreen) {
       /* make it look good for fullscreen */
    } else {
       /* return to the normal state in page */
    }
}, true);

2. CSS 选择器：:fullscreen / :fullscreen-ancestor

这两个选择器的作用是这样的：

:fullscreen – 当前全屏化的元素
:fullscreen-ancestor – 所有全屏化元素的祖先元素

对于 :fullscreen 还是比较好理解的，但对于 fullscreen-ancestor 要选出它的全家，而不仅仅是父节点，似乎不能理解其他使用。其实，看一下官方草案提供的 Demo 代码，就知道了：可以隐藏或者什么的。但为什么不把全屏的内容设置为最高级别置顶的元素呢？这一点 W3C 的选择似乎也比较另令想吐槽。看官方 CSS Demo 代码吧：

:fullscreen {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:2147483647;
  background:black;
  width:100%;
  height:100%;
}
/* If there is a fullscreen element that is not the root then
   we should hide the viewport scrollbar. */
:fullscreen-ancestor:root {
  overflow:hidden;
}
:fullscreen-ancestor {
  /* Ancestors of a fullscreen element should not induce stacking contexts
     that would prevent the fullscreen element from being on top. */
  z-index:auto;
  /* Ancestors of a fullscreen element should not be partially transparent,
     since that would apply to the fullscreen element and make the page visible
     behind it. It would also create a pseudo-stacking-context that would let content
     draw on top of the fullscreen element. */
  opacity:1;
  /* Ancestors of a fullscreen element should not apply SVG masking, clipping, or
     filtering, since that would affect the fullscreen element and create a pseudo-
     stacking context. */
  mask:none;
  clip:none;
  filter:none;
  transform:none;
}

3. HTML 标签属性: allowFullScreen

像 flash 使用的 <object> 和 <embed> 可以设置是否允许全屏，现在这个特性同样可以应用于 <iframe> 标签。只要添加 allowFullScreen 属性即可：

<!-- content from another site that is allowed to use the fullscreen command -->
<iframe width="640" height="360" src="http://anothersite.com/video/123" allowfullscreen=""></iframe>

三、解决方案

一般来说，全屏主要应用还是在视频和游戏。当然，也可以实现像 Mac Lion 一样的全屏显示，就像 Preview.app，全屏的时候使用起来是非常爽的。游戏和视频可以使用 flash 来兼容旧的浏览器和不支持 fullScreen JavaScript API 的浏览器。像 Firefox Nightly( v10 会支持)，Chrome 15， Safari 5.1 可以使用 Johndyer 的 jQuery 插件：https://gist.github.com/1354468

四、总结

目前遇到的问题可能是：

IE 对这个功能的实现没有安排
全屏在 Mac 下是浏览器全屏还是内置实现的全屏？Chrome 实现的是 Lion 内置的全屏，而 Safari 本身实现的是浏览器自身的全屏。
安全问题，全屏下伪造一个系统登陆框？
是否所有元素都应该被全屏内容盖住？

似乎第 1 点和第 3 点是我们比较关注的，也需要去关注的。反而对于 API 的调用是比较简单的，不需要那么多思考。

引用 DEMO: Fullscreen JavaScript API

五、引用文档

1. 参考事件的处理：Let Your Content Do the Talking: Fullscreen API
2. 大部分代码引用这篇文章：Native Fullscreen JavaScript API (plus jQuery plugin)
3. 历史和讨论：Fullscreen HTML5 video
4. 标准与厂商对比：W3C Draft: Fullscreen

可访问：弹出菜单/窗口

sofish — Thu, 13 Oct 2011 19:19:55 +0800

想象一下，你把一个重要内容放在一个弹出窗口，又不聚集到这个窗口。让使用屏幕阅读器的同学情何以堪，只有当他们 tab 到这页面结束，还继续 tab，才可能找到这个弹窗。是不是应该为弹出菜单提供更好的可访问支持？这篇文章将涉及到3种常见的弹窗：

window.open 新建的浏览器窗口
<iframe /> 创建的窗口
页面 DOM 创建的伪弹出窗口：如弹出 tips 等

一、当页面无 JS 的时候

通常来说，无 JS 的情况那就按 HTML 的行为来做事。让链接可以链接，就已经解决。比较简单，我们简单带过：

1. window.open 新建的浏览器窗口：尽量让 JS 触发器绑定在 <a /> 上，并把 a 链接到一个新的页面，即可。

// 链接与 window.open 的目标相同
<a href="/target.html" target="_blank">[open window]</a>

// 记得阻止链接有默认行为，不然有 JS 的时候会打开两次
window.open('./iframe.html', 'name', 'height=300,width=500');
return false;

2. <iframe /> 创建的窗口：如果是用 JS 动态创建的，那么记得触发器也应该像 window.open 的方法一样，把解法链接写在一个 <a /> 上，让用户通过链接来访问。而如果是隐藏的，那么尽量来使用 <noscript /> 来隐藏，再用 JS 让其正常显示出来；或者高度为 0 的空 iframe 。这样即可保证在有 JS 的时候可用，而在无 JS 的时候可以正常显示。详细应用可以参照：支付宝新首页的几点前端实践。

// 动态创建，请尽量使用这种方法，因为 IE8 不能用 JS focus 到动态创建的 focusable 元素
// 而空 src 则请使用 javascript:'' 这种方式，因为这是解决性能的最好方式，详见：空路径对页面性能影响的解决方案

<a href="/target.html" target="_blank">[open iframe]</a>
<iframe src="javascript:''" frameborder=0 id="theframe"></iframe>

// js
document.getElementById('theframe').src = '/target.html'

3. 页面 DOM 创建的伪弹出窗口：使用 <noscript /> 来隐藏。链接用锚点。

<a href="#target">[open current page DOM]</a>
... 很多很多东西隔在中间 ...
<noscript><div id="target">content</div></noscript>

二、大多数情况下

大数多情况下，用户的浏览器都是有开启 JS 的。而我们要做的是：focus 到弹出的窗口，并且第一个 tab 就可以访问里面的内容。听过来挺简单的，hub? 先看看 DEMO:

预览：可访问弹出菜单/窗口

1. window.open 新建的浏览器窗口：focus 到新建的窗口即可。

// 引用自：QuickMode - popups
function popitup(url) {
    newwindow=window.open(url,'name','height=200,width=150');
    if (window.focus) {
        // focus 到新建窗口
        newwindow.focus();
    }
    // 阻止触发器的默认行为
    return false;
}

2. <iframe /> 创建的窗口：调试了好久，IE8/9 需要等 iframe onload 成功后 setTimeout 来 hack；firefox 不能使用 ifrcontentWindow.focus()，只能用 iframe.focus()。综合起来需要这样的代码：

// for all except firefox
setTimeout(function(){
    f.contentWindow.focus();
}, 50);

// hack for firefox
navigator.userAgent.toLowerCase().indexOf('firefox') !== -1 && f.focus();

3. 页面 DOM 创建的伪弹出窗口：对于 dom，除了 <a /> <input /> 等这些 focusable 元素（W3C SPEC），都是不可以 focus 的。那么当需要 focus 到一个 div 时，我们有什么方法可以做到呢？通常来说，我们可以设置 Tabindex 来让像 <div /> 这样的非 focusable 元素可以触发 focus 事件。但我们想要的时真正 focus 到一个地方，以便于使用 tab 来访问这个区域的内容，所以这种方法对我们等于无用。

目前还没有比较好的方法（对于我能想到的和找到的），所以目前来说，我们只能利用一个 focusable 元素来创建 focus 目标。我们可以这样做：

<a href="#" class="getfocus">Get focus</a>
<input title="testing" />

但问题是，对于这个链接对于我们来说是毫无作用的，我们需要隐藏他，又能 focus 到。但 display:none 的时候是不能 focus 的。对于隐藏来说，这里也不想说太多。推荐看看这篇文章：使用clip隐藏内容。那么我们可以这样来 hack 我们的这个链接：

// html: 注意用 hidefocus 来删除虚线框
<a href="#" class="getfocus" hidefocus>Get focus</a>

// CSS: 使用 clip
.getfocus{
    position:relative;
    clip:rect(1px 1px 1px 1px);
    clip:rect(1px, 1px, 1px, 1px);
}

// javascript: 记得把 <a /> 放在这个 DOM 结构的最前面方便自上至下 tab 下去
a.focus()

三、总结：

至此，重要的技术实现点也已经说明白。代码请见这个粗陋的 DEMO，虽然只是没有特别优化的一段代码，但相信可以解决很多问题。对于可访问性，我们要走的路还有很多。一点点来吧，从今天开始。

背景半透明最佳实践

sofish — Wed, 12 Oct 2011 13:48:48 +0800

透明作为一种效果增强的方案，被众多视觉设计师喜欢。但因为 IE 的原因，透明，特别是半透明，已经成为前端工程师最不愿意实现的东西。现在有一个需求，需要对一个纯色的层实现半透明效果。效果如下，边框需要透明，透明度为 #000000 的 30%：

用各种浏览器打开下面这个 DEMO, IE9 有特殊显示：

DEMO: 背景半透明最佳实践 »

一、使用 `opacity` + `Alpha Filter`

看起来手挺简单的吧？嗯。挺简单的… 希望你能很方便实现这个方案！其实见到这个的时候，我们的第一想法当然是 background + opacity，在不支持 opacity 的 IE 使用 filter 的 alpha 滤镜来实现。然后，我们得到这样的效果：

.opacity{
    background:#000;
    opacity:0.3;
    filter: alpha(opacity=30);
}

无一例外，最外层，最内层和文字，都被设置了 opacity（alpha 也是使用 opacity ）。当然，我们可以给各层设置 opacity 变回来。但这是多麻烦的事(不信试一下)。

二、最佳实践：`rgba色彩` + `Gradient Filter`

其实我们可以选用 background-color: rgba() 来实现，同样可以实现透明效果，并且只应用于当前元素，不继承。而 IE 的 filter 有很多滤镜效果。其中的渐变滤镜，只要变通一下，就可以实现我们想要的效果，并且这个滤镜不会被下级元素继承，这样元素的内容就不会被虚化。代码如下：

/*
 * filter 渐变滤镜详细用法，[参见这里]
 * StartColorStr 和 EndColorStr:
 *    #4c000000 是 30% 透明度的 #000000 的意思
 *    组成: # + 透明度 + 颜色
 *    算法: Math.floor(0.6 * 255).toString(16);
 */
.rgba{
    background:rgba(0, 0, 0, 0.3);
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000');
}

不过，我们得到的效果是这样的，IE9 的透明度竟然有 60%!! 这显然不是我们想法的。原因是：IE9 也支持 filter，使得 filter 的结果和 background-color 叠加，所以是 60%。具体参见 DEMO 和示例图:

那么我们可以利用 IE 的 HACK，单独把 IE9 的 filter 变成透明度为 0 即可。高级浏览器大部分支持 :root 伪类，但不支持 filter 属性，而 IE 只有 IE9 支持，所以我们可以这样写。代码如下：

:root .rgba{
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000');
}

当然，第二种方法可以应用于 background，也可应用于 border 上。整体的代码可参见 DEMO。最后，还是那句话，期待你更好的解决方案。

参考文献：

垂直居中的几种实现方法

sofish — Mon, 10 Oct 2011 15:26:19 +0800

用过 Fireworks / PhotoShop 的人应该都知道，在画布中将一个页面模块居中是多容易的事，可如果是垂直居中，前端就苦逼了。因为 CSS 本身并没有提供相应的 API 支持（确切来说是提供不全）。今天重新整理一下思路，说说前端在实现页面元素垂直居中的几种思路：

一、利用 position 和负边距

利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明：

/* 代码实现：
 * 设定宽度和高度，父节点为 position:relative; CSS是这样写的:
 */
.selector {
     position:absolute;top:50%;。
     margin-top:-元素自身高度的一半;
}

二、使用 `<table />`

<table /> 真是各种好用，她是各种布局、居中的法宝。垂直居中对其来说，也是非常简单的事。table cells 的 vertical-align:middle 就可以直接解决。所以实现起也来只要这样一行代码：

td{ vertical-align:middle; }

三、通用解决方案

使用第一方案的问题是，通常我们需要垂直居中的元素高度都是不确实的。这里我们需要用 JS 来实现高度的计算，再实现负边；而第二种方案的局限在于只应用于 <table />。其实是，我们可能综合这两种方法，来做一个 Hack。

像我们知道的，在 CSS2.1 中，任何元素都可以使用 display:table / display:table-cell来实现与 table 一样的功能。那么，只要支持 display:table 的浏览器，已经可以轻松解决，只要这样写代码：

<!-- DOM 结构 -->
<div>
    <p>content</p>
</div>

/* CSS 实现 */
div { display:table; }
p{ display:table-cell; vertical-align:middle; }

但问题是，这种方法在 IE6/7 是不能实现的，因为他们不支持 display:table 这个特性。那有没有办法不计算高度，利用第一种方案来实现垂直居中呢？其实也未尝不可。看看下面这个 DOM 结构和图示：

<div class="wrap">
    <div class="hack">
        <div class="cnt">
            content
        </div>
    </div>
</div>

其实我们只要加多一层。内 .hack 层 top:50%; 再让 .cnt 层相对自身向上提50%。如上图所示。这里有一个 DEMO:

垂直居中最终方案: DEMO

/* CSS 部分的代码实现：整体代码参见上述 demo*/
.wrap{
    width:500px;height:300px;border:3px solid #ddd;margin:0 auto;padding:20px;display:table;
    *position:relative;
}
.hack{
    display:table-cell;vertical-align:middle;
    *position:absolute;*top:50%;
}
.cnt{
    *position:relative;*top:-50%;
}

这是在支付宝通用解决方案中实现的一个方案。=_,= 欢迎提供更好的方案…

CSS4 选择器

sofish — Sun, 09 Oct 2011 14:51:40 +0800

CSS3 还没完全用上，CSS4 已经提上日程。官方发布了 update to the working Selectors Level 4 spec，对选择器做了一些升级。前端最大的优点就是技术更新快，可以经常学到新东西；最大的缺点也是技术更新快，要跟上潮流还真不是那么简单。不过，这次更新有像“父选择器”这样让人兴奋的内容，让我们先睹为快，了解一下吧：

一、父元素 `$E > F`

CSS 终于有了与 DOM 一样的父选择器。这个选择器将会把样式显示在包含有 F 的 $E 上。用 $ 符表示父选择器：

/* 样式显示在 li 上 */
$li > p { border: 1px solid #ccc; }

/* 样式显示在 ol 上 */
#wrapper > $ol > li { background:#f8f8f8; }

二、ID匹配`E /foo/ F`

用双斜杆（//）包含 HTML 属性名。 E /foo/ F 表示选中的所有页面中所有 F 里 ID 值与 E 元素的 foo 属性值相等的。

<!-- 我们写一个 tab 的时候通常使用这样的情况 -->
<ul>
    <li targetID="tab1">trigger1</li>
    <li targetID="tab2">trigger2</li>
</ul>
<div>
    <p id="tab1">tab1 content</p>
    <p id="tab2">tab2 content</p>
</div>

/* 样式应用与当前 :hover 所在的 li 的 target ID 属性值相等的 p 上 */
li:hover /targetID/ p { border:2px solid #609060; }

三、匹配 `:matches`

div:matches(s1, s2) 所有div 匹配 s1 和 s2 的时候，这个 div 应用样式。比如我们想在 label 在 hover 状态的时候，所对应有 input 边框变成紫色(#609060)，可以这样写：

label:matches(:hover, :focus) /for/ input{ border:1px solid #609060; }

有一点值得注意的是，只有 compound selectors 可以应用于 :matches() ，它自己不能嵌套自己，所以像 :not(): :matches(:matches(...)) 和 :not(:matches(...)) 都是不合法的。更多»

四、链接相关 `:any-link & :local-link`

:any-link 匹配任何链接，:local-link 匹配任何本地链接。:local-link(n) 可以加参数，n 表示链接 path/ (目录的级数)，从序数 0 起算。官方文档描述得不是很清楚。像 a 和 :any-link 其实是一样的，而 div:any-link 呢？应该是拥有 src / href 值的 div 被选中。:local-link 看起来更有用。

/* 匹配所有与页面域名相同的链接，这样所有内部链接都会变成紫色的，而外部链接都是红色 */
a{color:#f30;}
a:local-link{ color:#609060; }

/* 匹配所有具有 2 级目录的内部链接:
 * 如：http://sofish.de/path1/path2/
 */
a:local-link(2) { color:#080; }

五、状态 `:current & :pass & :future`

状态选择器描述太不清楚了。是指一切在时间线内的东西。可以看一下这篇吐槽，说是在 twitter 等的回复都说对这个规范都是完全不知所言。按理来说，应该是在页面的有时间线的 canvas, video, audio, 屏幕阅读等的内容上应用样式：

/* 时间线内当前被处理（选中）的元素，如果是 p 或者 li 背景变成浅黄色 */
:current(p, li){ background:#ffc; }

:pass 表示时间线上的前一个元素，如果不在时间线内，则指其前一个元素（相当于 DOM 的 prevSibling）。

:future 表示时间线上的后一个元素，如果不在时间线内，则指其后一个元素（相当于 DOM 的 nextSibling）。

六、方向 `:dir`

根据 HTML 属性选中。比如选中 <p dir="rtl"> ，如代码：

p:dir(rtl){ color:#888; }

七、默认选项 `:default`

选中多个子元素中的默认元素。比如 select 中的默认 option，允许有多个 :default。比如在允许多选的 select 中，有多个 :default 元素。

option:default { background:#ffc; }

八、表单限制 `:required & ：optional`

表单项中必处理项与可选项。记不记得 HTML5 中的 required 属性？！说的就是这个。

input:required { color:#f30; }

九、可读可写 `:read-write & :read-only`

大部分元素都是可读不可写的，所以都是 :read-only；像 text input 这些值可以改变的，和 HTML5 中设置了 contenteditable 的元素其本身是可改变的，这些被认为是具有写属性的，所以是 :read-write

:read-write { font-family: Georgia; }

十、`:vaild & :invaild / :in-range & ：out-of-range`

官方文档表示写得很不容易懂。数据和范围，估计都说是 [XFORMS10] 和 [HTML5] 中的一些内容。

总结：

好吧，这就是 CSS4 选择器更新的内容。或许还有些遗漏我没发现的。表示对于父选择器和匹配选择器都很期待。而对于一些规范描述不太清楚的，大家可以先了解了解就可以了。毕竟还只是预览版。

参考文献：

Selectors Level 4 – W3C Working Draft 29 September 2011
CSS4 Preview – Selectors
[selectors4] "time-dimensional canvas"?

空路径对页面性能影响的解决方案

sofish — Thu, 29 Sep 2011 23:10:00 +0800

前几天在 Google Reader 中看到玉伯博客的分享——空路径对页面性能的影响。确实，在写 CSS 的时候，用 background:url(#) 还是会对页面进行多一次请求的。

不过，因为写多 CSS，一般需要用空背景来解决 bug 的时候，测试结果用 background:url(about:blank) 才是我们想要的：解 bug，不影响性能。那很简单，解决方案不就不出来？等等，让我们来做个测试吧。

测试地址：http://sofish.de/file/demo/empty_source.html

懒得截图了，自己自行搞搞吧，浏览结果已经把大致的都写在测试页面上了。最终的解决方案是：

大胆使用 about:blank 来代替空，或者‘＃’，特别是在 background-image 中使用
在 img / script / iframe 这些推荐使用 javascript:” 来解决问题

其他更好的办法？这个测试结果有问题？随时欢迎提供、指正。谢谢。

幸福收藏夹

关于用户密码存储/传输加密

加密是靠谱的

Javascript 加密是不安全的

加密数据也是一种 “明文” 密码

IE6 Multiple Classes

跨浏览器获取 Geolocation

开源 Alice 样式库解决方案

1. Alice 入门指南

2. 成为作者/贡献者

3. Alice 样式库解决方案

4. 阅读 HTML5/CSS3 标准文档

HTML5 全屏 API

一、说在前面的

二、FullScreen JavaScript API 具体使用

三、解决方案

四、总结

五、引用文档

可访问：弹出菜单/窗口

一、当页面无 JS 的时候

二、大多数情况下

三、总结：

背景半透明最佳实践

一、使用 opacity + Alpha Filter

二、最佳实践：rgba色彩 + Gradient Filter

参考文献：

垂直居中的几种实现方法

一、利用 position 和负边距

二、使用 <table />

三、通用解决方案

CSS4 选择器

一、父元素 $E > F

二、ID匹配 E /foo/ F

三、匹配 :matches

四、链接相关 :any-link & :local-link

五、状态 :current & :pass & :future

六、方向 :dir

七、默认选项 :default

八、表单限制 :required & ：optional

九、可读可写 :read-write & :read-only

十、:vaild & :invaild / :in-range & ：out-of-range

总结：

参考文献：

空路径对页面性能影响的解决方案

一、使用 `opacity` + `Alpha Filter`

二、最佳实践：`rgba色彩` + `Gradient Filter`

二、使用 `<table />`

一、父元素 `$E > F`

二、ID匹配`E /foo/ F`

三、匹配 `:matches`

四、链接相关 `:any-link & :local-link`

五、状态 `:current & :pass & :future`

六、方向 `:dir`

七、默认选项 `:default`

八、表单限制 `:required & ：optional`

九、可读可写 `:read-write & :read-only`

十、`:vaild & :invaild / :in-range & ：out-of-range`