99css: 三月 2009

2009年3月28日星期六

简单实现Firefox的Chrome主题

有图有真相：

安装以下扩展：

Chromifox Basic，仿Chrome主题；
Chromin Frame，将移动标签条到工具栏上方，并替换窗口标题栏和边框的外观为Chrome式样，国人出品；
Personal Menu，实现Chrome的菜单栏；
Locationbar²，突出地址栏域名；
autoHideStatusbar，自动隐藏状态栏（由于时不时要瞄一下TwitterFox未安装）。

全部安装完重启后简单配置下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日星期日

一周年

来公司整整一年：

感谢lvh的信任及各位小u的疼爱；
感谢gengcl、kuol等老乡的照顾；
感谢tiexg、lifl、rongxr等各位研发同事的配合；
感谢xiaoy、zhangqs等足球队友将10号球衣让给小弟；
感谢暗中为我争风吃醋的各位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%：

特点：

HTML结构清晰，背景写在a标签上；
切图方式：每个图标放置于20*20的单元格中，未从单元格左上角开始放置，而是上下左右都留有部分像素的距离（依据显示效果而定）。大部分情况下直接调用即可，如background-position:-400px –120px；偶尔需要调整偏移量，如background-position:0 -161px
第二列图标距离左侧400px，每行图标间隔一个单元格的距离，充分留白；
图片为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%：

特点：

HTML结构极度混乱（咳咳，至少我是这么认为），甚至还有内联元素span嵌套div的情形。背景写在img上（Gmail将所有放图标的地方插入一个1*1的透明图片：<img class="pW" src="images/cleardot.gif" />，然后根据不同的class设置拉伸至不同的大小及背景坐标，并用margin修正偏移量），这么做的原因也许是跨浏览器的inline-block（Firefox 3以前的版本不支持display:inline-block）
切图方式：每个小图放置于20*20的单元格中，大部分左上角顶齐，调用时直接用该图标左上角的坐标取值即可，如background-position:-20px –20px
每个单元格放一个图标，比较紧凑。
图片为png格式，尺寸：180*120，大小：4.83KB，总共47个图标。

对比（带有强烈主观色彩，请自行判断）：

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

最后的话：

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

2009年3月17日星期二

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

问题如下图：

解决思路：

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

代码（基于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阅读器将自己的博客添加进去，然后进行无耻的“自顶”行为进行推广... 然而结果却是：

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

结论：

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

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更新：

加大正文字体至14px，加大正文行高至1.5
隐藏聊天

2009-3-7更新：

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

2009-3-6更新：

去除读信页右侧广告
将读信页右侧快捷操作位置放到邮件与搜索栏之间靠右的位置
隐藏左侧邀请

2009年3月3日星期二

139邮箱集成Google Reader

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

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

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

99css

简单实现Firefox的Chrome主题

IE6 BUG：边框不能设为透明

Stylish：JavaEye - 加大正文字体

视觉规范

一周年

Yahoo与Gmail的CSS Sprites对比

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

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

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

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

139邮箱集成Google Reader

简介

订阅数

标签

归档

链接

抠抠