裁纸刀下

CssGaga是ytzong（涛哥）基于我们在朋友网日常的重构工作流程，为了提高工作效率而开发并不断完善起来的一个重构辅助工具。运行于Windows + .NET的环境，提供了重构相关的一系列解决方案。最近越来越多的朋友通过腾讯微博、QQ和Email咨询到有关CssGaga的问题，由于CssGaga本身也是在不断升级，以前的教程有些已经陈旧，为了帮助新接触到这个工具的同学，我这里再写一篇日志介绍一下CssGaga的基本使用。 CssGaga功能特性 合并import的CSS文件，开发阶段将CSS文件按模块拆分复用，发布上线后合并减少HTTP请求； 优化、压缩CSS代码，减少带宽占用，加快下载速度； 优化、发布CSS中使用到的图片，可以不必考虑多发、漏发图片文件的情况； 自动应用CSS Sprite技术，开发阶段不用考虑图标合并，便于管理，发布后的多个图标自动合并为一个图片，并自动更新CSS代码处理背景定位； 对CSS代码中使用到的图片自动加时间戳，以便在使用长Cache与更新后的图片及时生效； 样式有多套配色风格时，通过CssGaga可以实现皮肤的自动化同步； CSS样式、图片一键去色功能，在遇到特殊政治任务的时候，全站能迅速进行去色改版，迅速恢复； 生成iOS设备所需的不同尺寸Icon文件； 处理一些浏览器兼容方面的问题；

在学习iOS App开发中遇到需要计算时间差并格式化输出的需求，没有现成的方法，需要结合NSCalendar和NSDateComponents来实现。所以干脆把代码封装成一个熟悉的dateDiff方法。不过这个方法跟VB和sql里的dateDiff还是有点不一样，虽然可以封装成完全一样，不过我觉得直接返回NSDateComponents会更方便，因为所需要的各种单位上的值都包含在其中了。 我是把代码封装到自己的一个工具类KRUtils里作为类方法，使用起来也很方便。代码如下：

读到《重新认识CSS的权重》这篇，鬼哥在文章最后给出了便于记忆的顺序：“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”。那么这个顺序是怎么得出来的呢？实际上在CSS2规范关于具体性(specificity)的定义中，描述是非常明确的，但是很多中文版本的css图书中采用了10进制的简单相加计算方式（包括第一版《CSS权威指南》，第二版中已经纠正）。因此把规范中对CSS层叠优先级的相关定义意译一下，希望给初入门或对权重计算尚有疑惑的朋友提供一些参考。

为了页面的健壮性，我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开，有时候是为了配合其它规则实现文字截断，还有时候纯粹是为了创建块级上下文。但是，很多人对这个属性是存在着一定的误解的，网上很多入门的资料或文章都只提到用overflow:hidden加固定的宽度（或高度）可以强制隐藏内部的超出容器的内容。包括之前我们在使用overflow:hidden创建块级上下文的方式来实现图文混排时，都认为overflow:hidden造成了特殊情况下的麻烦（详见自适应的多列图文混排改进）。但如果认真阅读一下css规范，会发现overflow:hidden其实并不一定隐藏溢出内容。我之前翻译的clearfix改良及overflow:hidden详解一文中第二部分有讲解，不过可那篇文章的重点是谈清除浮动的问题，所以有关overflow的问题反而没引起注意。

ISD Webteam的大布同学（twitter：@tc_bryanzhang）在2010年1月翻译了google Page Speed系列中的Optimize browser rendering，很是方便了大家。在此基础上，google又有了更新，我且在此把google新增的部分翻译一下，作为对大布同学译稿的补充。 google这篇文章关注的是资源被下载到客户端以后，在浏览器加载、解释、渲染HTML、CSS和JavaScript阶段的性能优化，提出了5个要点： 使用高效率的CSS选择器 避免CSS expressions 将样式表放在页面顶部 指定图像尺寸 尽早指定文档的字符编码

关于网页两栏、三栏的布局讨论由来已久，有各种各样上佳的方案。本文重点讨论的不是两栏、三栏布局这样通用的解决方案，而是一个专门针对两栏图文混排的特定需求的改进型方案。当然其中的原理也可以被应用于两栏布局甚至更多，那是你举一反三，不是本文讨论的重点。你也可以先看一下最终的示例页面。

原文：http://www.yuiblog.com/blog/2011/03/08/css-border-tricks-with-collapsed-boxes/ 译文：http://ofcss.com/?p=1078 作者：Thierry Koblentz （雅虎前端工程师） 用css边框实现小三角的技巧现在已经被越来越多的网站所采用，减少图片、减少HTTP请求的低碳设计越来越受欢迎。这次，来自雅虎的前端工程师又给我们带来了一组新的CSS边框设计技巧，原文列出了三种（双色背景导航条、水平排列元素间的点线分隔符、带左右箭头的垂直导航条），实际上除了这三种外，其范例页中还给出了额外的两种（水平分页导航条、垂直分组导航条）。以下是译文：

原文：http://www.stubbornella.org/?p=726 译文：http://ofcss.com/?p=1055 作者：Nicole Sullivan 本文介绍了OOCSS栅格系统中，”content:’ x x x x x x x x x x … ‘”这行怪异代码的来历。作者详细讲解了他寻找栅格系统最后一列最佳实现方式的全过程，并通过这个过程，详细讲解了zoom、overflow:hidden、display:table-cell、css生成内容等创建块级上下文的不同方法各自的优缺点，并对OOCSS最终采用的代码做了逐行讲解。 以下是译文：