“2008年5月 ”存档日志

BrowserPlus 到底是什么，又能做什么？
BrowserPlus 是 Yahoo! 最近刚发布一个 Web 扩展的平台：终端用户需安装他，而开发者可以通过一个小的 JavaScript 库使用他的特性。平台现有的一些属性包括：

从桌面的拖拽；
用户断图片的处理（裁切，翻转和滤镜）；
桌面通知。

BrowserPlus 最独特的特性是他能在运行中更新和添加服务，而无需重新启动浏览器或甚至加载页面。对于用户，这意味着没有更多的中断或安装运行，而 Yahoo! 去处理软件分发的复杂性以及升级。对于开发者，这意味着能够通过一个简单的函数引用检查和激活新的服务（当然待用户批准）。
目前支持哪些平台：

Windows XP
Windows Vista
Mac OS X 10.4, Tiger (intel only)
Mac OS X 10.5, Leopard (intel only)

目前支持哪些浏览器：

在 Mac 上支持 Firefox 2 (或高... 10 条评论 »

最新的 Firefox 2 版本为 Firefox 2.0.0.14， Firefox 3 版本为 Firefox 3.0rc1。主流依然是 Firefox 2.0.0.14，但由于在不久的将来 Firefox 2 会升级到 Firefox 3，对于我们前端是好消息（更好更优的功能），也是坏消息（提前进入“作战”状态，现在就应该开始测试网站在 Firefox 3 下的兼容性了！）。
大家都知道 IE 有多版本集成的软件（比如：IETester），而 Firefox 的多版本如何解决呢？
下面提供两个方案：
1、针对Windows的用户：《How to Run both Firefox 2 and Firefox 3 Together》，不爱看或者看不懂英文的，还可以《如何让Firefox2和Firefox3在Windows下共存？》。
2、针对其他平台的用户（aoao 提供的方案）：Firefox 装 3.0 的，再安装个 Flock1.x（内核为Firefox 2），就可以并存两个版本，某些插件不支持新版可装 Nightly Tester Tools 来解决。

在曾经的 淘宝UED 招聘 中有这样一道题目：
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”
当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。
题目的难点在于两点：

垂直居中；
图片是个置换元素，有些特殊的特性。

至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;

/*设置水平居中*/
text-align:center;

/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/

width:200px;
height:200... 43 条评论 »

一、浏览器允许每个域名所包含的 cookie 数：

Microsoft 指出 Internet Explorer 8 增加 cookie 限制为每个域名 50 个，但 IE7 似乎也允许每个域名 50 个 cookie（《Update to Internet Explorer’s Cookie Jar》）。
Firefox 每个域名 cookie 限制为 50 个。
Opera 每个域名 cookie 限制为 30 个。
Safari/WebKit 貌似没有 cookie 限制。但是如果 cookie 很多，则会使 header 大小超过服务器的处理的限制，会导致错误发生。

注：“每个域名 cookie 限制为 20 个”将不再正确！
二、当很多的 cookie 被设置，浏览器如何去响应。除 Safari（可以设置全部cookie，不管数量多少），有两个方法：

最少最近使用（least recently used (LRU)）的方法：当 Cookie 已达到限额，自动踢除最老的 Cookie ，以使给最新的 [...]

对于 link 元素 和 style 元素 我相信大家都比较了解，但对于他们的出现位置可能有误解。
在 淘宝 的所有频道中出现这样一个问题：频道头部文件由于是统一支配的（为什么？历史原因！），所以我们无法在每个频道的 head 元素中以 link 或 style 方式加入各自的样式。最后选取了折中的方式，在主体内容中直接写入 style 元素，也就是说 style 元素置于了 body 元素中。
一切看着貌似很完美。其实不然，在 W3C 中对于 link 元素 和 style 元素 出现的位置有详细的说明：
HTML permits any number of STYLE elements in the HEAD section of a document.
The LINK element defines a link. Unlike A, it may only appear in the [...]

一、密码长度:

5 分: 小于等于 4 个字符
10 分: 5 到 7 字符
25 分: 大于等于 8 个字符

二、字母:

0 分: 没有字母
10 分: 全都是小（大）写字母
20 分: 大小写混合字母

三、数字:

0 分: 没有数字
10 分: 1 个数字
20 分: 大于等于 3 个数字

四、符号:

0 分: 没有符号
10 分: 1 个符号
25 分: 大于 1 个符号

五、奖励:

2 分: 字母和数字
3 分: 字母、数字和符号
5 分: 大小写字母、数字和符号

最后的评分标准:

>= 90: 非常安全
>= 80: 安全（Secure）
>= 70: 非常强
>= 60: [...]

发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？
CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。
Specificity 具体的计算规则：

元素的 style 样式属性，加 1,0,0,0。
每个 ID 选择符（#id），加 0,1,0,0。
每个 class 选择符（.class）、每个属性选择符（例 [attr=”"] ）、每个伪类（例 :hover），加 0,0,1,0。
每个元素或伪元素（例 :firstchild）等，加 0,0,0,1。
其他选择符（例 全局选择符 *，子选择符 >），加 0,0,0,0。

最后逐位相加数字串，得到最终的 Specificity 值，按照从左到右的顺序逐位比... 30 条评论 »

YUI 中的 Grids CSS 主要有三个部分值得大家关注和学习：
1、布局的思想：使用 “负 margin（Negative Margins）” 技术
详细可参阅：《Creating Liquid Layouts with Negative Margins》
2、使用 em ：当用户改变字体大小时，宽度同时改变。
技巧：用 13 像素来平分宽度（保留小数到千分位），而 IE 浏览器用 13.333 。
/* 750 centered, and backward compatibility */
#doc {
width:57.69em;
*width:56.251em;
min-width:750px;
}

57.69 = 750 / 13
56.251 = 750 / 13.333

注：《Setting Page Width with YUI Grids》 一文中提到：IE 下的 em 是宽度除以 13 ，再乘以 .9759 得到。同解于为什么现在的 YUI 源码中 IE 下 750px [...]

Multiple IE（支持 XP下IE3 到IE6多版本共存） 相信很多朋友都用过，但其不支持 Vista，最大的问题是该软件已经很久未更新，集成的 IE 版本都过老，不适应现在浏览器测试的需求。
长江后浪推前浪：IETester 。

IETester 支持 Vista 和 XP 下IE8 beta 1, IE7，IE 6 和IE5.5 版本共存。
最新版本：v0.2.1 下载 中文包 (加入Languages 文件夹，默认在 C:\Program Files\Core Services\IETester )
最小需求：Windows Vista 或者 Windows XP 安装 IE7 版本( 如果安装的 IE6 版本 ，则Windows XP 下的 IE6 有一些小问题，并且在这个配置下 IE7/IE8 版本不能运行 )
不过任何软件都有不完美之处——
IETester 目前已知的问题有：

当窗口大小改变的时候，页面内容可能会消失（作者改进中）；
上一页/下一页功能不正常；
Focus功能不正常；
Java apple不能运行；
Flash... 18 条评论 »