Yahoo! BrowserPlus

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 (或高于) 和 Safari 3 在 Windows 上支持 Internet Explorer 7 和 Firefox 2 [&he... 10 条评论 »

如何让 Firefox 2 和 Firefox 3 版本并存

最新的 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 来解决。

... 16 条评论 »

图片垂直居中的使用技巧

在曾经的 淘宝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:200px; border: 1px solid #eee; } .box img { /*设置图片垂直居中*/ vertical-align:middle; } <div class="box"... 77 条评论 »

浏览器 cookie 限制

一、浏览器允许每个域名所包含的 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 […]

... 7 条评论 »

link 和 style 元素在 HTML 文档中的位置

对于 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 […]

... 4 条评论 »

密码强度规则(仿 google)

一、密码长度: 5 分: 小于等于 4 个字符 10 分: 5 到 7 字符 25 分: 大于等于 8 个字符 二、字母: 0 分: 没有字母 10 分: 全都是小(大)写字母 20 分: 大小写混合字母 三、数字: 0 分: 没有数字 10 分: 1 个数字 20 分: 大于等于 3 个数字 四、符号: 0 分: 没有符号 10 分: 1 个符号 25 分: 大于 1 个符号 五、奖励: 2 […]

... 16 条评论 »

详解CSS的优先权

发现很多朋友对 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 值,按照从左到右的顺序逐位比较。 除了 Specificity 还有一些其他规则... 46 条评论 »

YUI Grids CSS 解读

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》 […]

... 48 条评论 »

IETester

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 目前已知的问题有: 当窗口大小改变的时候,页面内容可能会消失(作者改进中); 上一页/下一页功能不正常; […]

... 19 条评论 »