2009年3月28日星期六

简单实现Firefox的Chrome主题

有图有真相:

安装以下扩展:

全部安装完重启后简单配置下Personal Menu及定制下工具栏即可。

2009年3月27日星期五

IE6 BUG:边框不能设为透明

前言:

有时候我们需要用纯CSS来写小三角,如下图:

代码:

HTML:

<body>
<div class="pointer">
</div>
</body>

CSS:

body{background-color:yellow;}
.pointer{width:0;height:0;border-top:100px transparent solid;border-right:200px red solid;font-size:0;}

为了方便看效果,特意放大

问题:

正常显示效果:

IE6下却遭遇BUG(不透明):

解决方法:

将实线改为虚线,代码:

body{background-color:yellow;}
.pointer{width:0;height:0;border-top:100px transparent dotted;/*dashed亦可*/border-right:200px red solid;font-size:0;}

IE6下显示效果:

虽然边缘有轻微锯齿,但可以接受

意外收获:

Firefox、Chrome边缘比较平滑

而IE 6/7/8、Opera、Safari边缘有轻微锯齿

2009年3月26日星期四

Stylish:JavaEye - 加大正文字体

前言:

JavaEye是个不错的技术网站,虽然我之前学的是.NET,但Java阵营的东东也会时常关注下。

说明:

屏幕越大,越不习惯阅读12px的正文字体,将几个常用栏目的正文字体改为了14px。

安装地址:

http://userstyles.org/styles/16385

2009年3月24日星期二

视觉规范

明天讨论视觉规范,搜集了几篇不错的文章:

冰山一角:

看到做好的页面,UI设计师:“必须严格按照我的效果图来做!这里不是这个样子呀!”

打开效果图,“诶,我记得不是这样的啊...不好意思啊,是我搞错了,呵呵O(∩_∩)O~,这里改成这样...”

我内心深处:“OOXX...”

2009年3月22日星期日

一周年

来公司整整一年:

  1. 感谢lvh的信任及各位小u的疼爱;
  2. 感谢gengcl、kuol等老乡的照顾;
  3. 感谢tiexg、lifl、rongxr等各位研发同事的配合;
  4. 感谢xiaoy、zhangqs等足球队友将10号球衣让给小弟;
  5. 感谢暗中为我争风吃醋的各位plmm...
2009年3月18日星期三

Yahoo与Gmail的CSS Sprites对比

前言:

使用CSS Sprite的目的是为了优化((#‵′)凸)。

Yahoo,以左侧导航为例:

CSS Sprites图片地址:

http://l.yimg.com/a/i/ww/sp/trough_2.0_062308.gif

HTML:

<ul id="trough-1" class="col1">
<li><a href="r/4d" style="background-position:-400px -120px">Answers</a></li>
<li><a href="r/2h" style="background-position:-400px -440px">Autos</a></li>
<li><a href="r/25" style="background-position:0 -761px">Finance</a></li>
<li><a href="r/28" style="background-position:0 -1600px">Games</a></li>
<li><a href="r/2r" style="background-position:0 -1400px">Groups</a></li>
<li><a href="r/3o" style="background-position:0 -439px">HotJobs</a></li>
<li><a href="r/24" style="background-position:0 -600px">Maps</a></li>
<li><a href="r/3a" style="background-position:0 -161px">Mobile Web</a></li>
<li><a href="r/2i" style="background-position:0 -561px;display:inline">Movies</a> | <a class="trough_tv" href="r/2j">TV</a></li>
<li><a href="r/3m" style="background-position:0 -1562px">Music</a></li>
<li><a href="r/gx" style="background-position:-400px -1119px">OMG</a></li>
<li><a href="r/33" style="background-position:0 -40px">Personals</a></li>
<li><a href="r/2p" style="background-position:-400px -161px">Real Estate</a></li>
<li><a href="r/s3" style="background-position:-400px -1321px">Shine</a></li>
<li><a href="r/2q" style="background-position:0 -1640px">Shopping</a></li>
<li><a href="r/26" style="background-position:0 -800px">Sports</a></li>
<li><a href="r/29" style="background-position:0 -79px">Travel</a></li>
<li><a href="r/2k" style="background-position:0 -121px">Yellow Pages</a></li>
</ul>

图片分析(图中虚线为20*20的参考线):

原始大小:

放大至200%:

特点:

  1. HTML结构清晰,背景写在a标签上;
  2. 切图方式:每个图标放置于20*20的单元格中,未从单元格左上角开始放置,而是上下左右都留有部分像素的距离(依据显示效果而定)。大部分情况下直接调用即可,如background-position:-400px –120px;偶尔需要调整偏移量,如background-position:0 -161px
  3. 第二列图标距离左侧400px,每行图标间隔一个单元格的距离,充分留白;
  4. 图片为gif格式,尺寸:420*1700,大小:16.2KB,总共80个图标。

Gmail,同样以左侧导航为例:

CSS Sprites图片地址:

https://mail.google.com/mail/images/2/5/chrome/icons7.png

HTML(以星标为例):

<div class="nH pX">
<div class="nH">
 <div class="nH">
     <div class="pi" style="height:4px;">
         <div class="ph p" style="width:4px;"></div>
         <div class="ph q" style="width:4px;"></div>
         <div class="l o"></div>
     </div>
     <div class="l m">
         <div class="l n" style="margin-left:4px;">
             <div class="k" style="margin:-2px 4px -2px 0px;padding:0px;">
                 <div class="diLZtc">
                     <div class="nH">
                         <div class="qk">
                             <span id=":qj" class="" idlink="">
                             <div style="overflow:hidden;white-space:nowrap;">
                                 <div id=":r0" class="p5" idlink="">
                                     <a class="p9" href="https://mail.google.com/mail/#starred" target="_top" title="已加星标">已加星标</a><img class="pW" src="images/cleardot.gif" /></div>
                             </div>
                             </span></div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <div class="dJ"></div>
     <div class="pi" style="height:4px;">
         <div class="ph i" style="width:4px;"></div>
         <div class="ph j" style="width:4px;"></div>
         <div class="l h"></div>
     </div>
 </div>
</div>
</div>

图片放大至200%:

特点:

  1. HTML结构极度混乱(咳咳,至少我是这么认为),甚至还有内联元素span嵌套div的情形。背景写在img上(Gmail将所有放图标的地方插入一个1*1的透明图片:<img class="pW" src="images/cleardot.gif" />,然后根据不同的class设置拉伸至不同的大小及背景坐标,并用margin修正偏移量),这么做的原因也许是跨浏览器的inline-block(Firefox 3以前的版本不支持display:inline-block)

  2. 切图方式:每个小图放置于20*20的单元格中,大部分左上角顶齐,调用时直接用该图标左上角的坐标取值即可,如background-position:-20px –20px
  3. 每个单元格放一个图标,比较紧凑。
  4. 图片为png格式,尺寸:180*120,大小:4.83KB,总共47个图标。

对比(带有强烈主观色彩,请自行判断):

YahooGmail胜方
HTML结构清晰,易于维护臃肿杂乱Yahoo
图片排列宽松紧凑,易于维护(尤其是我们这种小屏幕人士)Gmail
CSS调用方便,部分图片需微调background-position方便,部分图片需微调margin平手
图片优化可改为png-8格式进一步压缩(YUI的PPT中提倡用png-8,为什么自己不这么做呢)已压缩Gmail

最后的话:

二者各有优缺点,大家可取其精华,弃其糟粕,根据项目特点任意发挥,囧

2009年3月17日星期二

IE 6/7 BUG:下拉框select设宽度时option超出显示不全

问题如下图:

解决思路:

  1. 当鼠标移到select元素时将其宽度置为auto;
  2. 鼠标移开时恢复为原定宽度。

代码(基于jQuery):

$(function() {
 $(".ProductAttributesSelect")
     .mouseover(function(){
         $(this)
             .data("origWidth", $(this).css("width"))
             .css("width", "auto");
     })
     .mouseout(function(){
         $(this).css("width", $(this).data("origWidth"));
     });
});

英文雅虎的注册页面有DEMO,童鞋们可以去围观下,O(∩_∩)O~

简译自:Select Cuts Off Options In IE (Fix)

2009年3月12日星期四

主流国产RSS阅读器初步比较

背景:

传闻近来国产RSS阅读器的日子都不太好过:

事件:

小弟最近开了博,之后打算在各大国产RSS阅读器将自己的博客添加进去,然后进行无耻的“自顶”行为进行推广... 然而结果却是:

  1. 首先我尝试的是

    鲜果

    :因为近来鲜果的表现相对好一些。将博客地址http://ytzong.blogspot.com及RSS源的地址http://ytzong.blogspot.com/feeds/posts/default填进去均提示“您订阅的频道不存在”;
  2. 抓虾:输入博客地址很顺利就找到两个源:http://ytzong.blogspot.com/feeds/posts/default?alt=rss及http://ytzong.blogspot.com/feeds/posts/default,成功订阅;
  3. 有道:前今天看了有道的技术分享,用网易通行证账号即可登陆。添加博客地址后未成功,之后RSS源及博客地址反复尝试几次之后成功;
  4. 豆瓣九点:提示未抓取,等待几分钟后成功。

结论:

仅添加订阅而言:抓虾>有道≈豆瓣>鲜果。

2009年3月10日星期二

CSS修饰上传域<input type="file" />

在WebMail项目中,我们需要使用图片修饰的按钮来替代系统默认的上传域。

原理:

将上传上传域透明,绝对定位叠在修饰的图片按钮上方,点击图片按钮时其实是点到上传域。

问题:

图片按钮太大时,上传域的可点击区域不能将其完全覆盖。

解决方法:

加大字体。

HTML:

<input class="file" type="file" />

CSS:

input.file{font-size:5em;}

各浏览器显示效果:

嘿嘿,这下够用了吧~

延伸阅读:

2009年3月5日星期四

去除Gmail右侧广告/隐藏聊天/隐藏邀请

预览:

安装地址:

http://userstyles.org/styles/15631

最新源码:

/*加大正文字体及行高*/
.ii.gt,.ii.gt *{font-size:14px !important;line-height:1.5 !important}
/*隐藏读信广告*/
table.T1HY1.nH.iY{width:100% !important;}
table.T1HY1.nH.iY td.tELAdc:first-child + td.tELAdc, table.T1HY1.nH.iY td.tELAdc:last-child .VB6tt + div > div:first-child > div:first-child + div,table.T1HY1.nH.iY td.tELAdc:last-child .VB6tt + div > div:first-child > div:last-child{display:none !important}
/*设置快捷操作位置*/
table.T1HY1.nH.iY td.tELAdc:last-child{position:absolute !important;top:-37px !important;right:0 !important;}
table.T1HY1.nH.iY td.tELAdc:last-child .nH{width:auto !important}
table.T1HY1.nH.iY td.tELAdc:last-child .hk{float:right !important;margin-left:1em !important;}
/*隐藏聊天*/
.nH.pz.pA.pX + div + div + div{display: none !important;}
/*隐藏邀请*/
.nH.pz.pA.pX + div + div + div + div{display: none !important;}

源码分析:

Gmail的HTML写的非常之“变态”且没有语义,导致我的选择器也跟着一起“变态”,⊙﹏⊙b汗~~

我们首先来看下Gmail左侧导航的HTML结构(为了方便,将注释写在了title属性中):

<div class="nH nn" style="width:155px;">
<div class="nH">
    <div class="nH pz pA pX" title="撰写邮件" />
    <div class="nH pp" title="收件箱等" />
    <div class="nH pp ps" style="-moz-user-select:none;" title="标签" />
    <div class="nH pp ps" style="" title="聊天" />
    <div class="nH pp ps" title="邀请" />
</div>
</div>

隐藏聊天:

.nH.pz.pA.pX + div + div + div{display: none !important;}

以撰写邮件为基准点,向下查找同级第三个div,将其隐藏。

这里的要点是相邻同胞选择器“+”

隐藏邀请同理。

读信页面的HTML结构如下:

<table cellpadding="0" class="T1HY1 nH iY">
<tr>
 <td class="tELAdc" title="邮件正文"></td>
 <td class="tELAdc" title="间距空白"></td>
 <td class="tELAdc" title="广告单元格">
     <div style="width: 0px;"
class="VB6tt" />
        <div style="width:
189px;" class="nH">            
<div class="nH">                
<div class="nH" title="快捷操作" />                
<div class="nH" title="广告" />                
<div class="nH u8" title="关于这些链接" />            
</div>
     </div>
 </td>
</tr>
</table>

去广告:

table.T1HY1.nH.iY td.tELAdc:last-child .VB6tt + div > div:first-child > div:first-child + div{display:none !important}

先找到该表格的最后一个单元格下的class="VB6tt"的元素,在找同级元素下的第一个div下的第一个div相邻的div(好绕口啊,+_+),将其隐藏。

其余同理....

2009-3-8更新:

  1. 加大正文字体至14px,加大正文行高至1.5
  2. 隐藏聊天

2009-3-7更新:

修复邮件新窗口中打开时正文显示不出来的BUG

2009-3-6更新:

  1. 去除读信页右侧广告
  2. 将读信页右侧快捷操作位置放到邮件与搜索栏之间靠右的位置
  3. 隐藏左侧邀请
2009年3月3日星期二

139邮箱集成Google Reader

下载地址:http://userscripts.org/scripts/show/43488/

友情提示:您需要使用Firefox,并安装Greasemonkey扩展(需重启),之后进入http://userscripts.org/scripts/show/43488/,点 Install 就开始安装了。

配合这个使用更佳:Stylish脚本:Google Reader