标签归档:CSS

CssGaga 快速上手指南

CssGagaytzong(涛哥)基于我们在朋友网日常的重构工作流程,为了提高工作效率而开发并不断完善起来的一个重构辅助工具。运行于Windows + .NET的环境,提供了重构相关的一系列解决方案。最近越来越多的朋友通过腾讯微博、QQ和Email咨询到有关CssGaga的问题,由于CssGaga本身也是在不断升级,以前的教程有些已经陈旧,为了帮助新接触到这个工具的同学,我这里再写一篇日志介绍一下CssGaga的基本使用。

CssGaga功能特性

  1. 合并import的CSS文件,开发阶段将CSS文件按模块拆分复用,发布上线后合并减少HTTP请求;
  2. 优化、压缩CSS代码,减少带宽占用,加快下载速度;
  3. 优化、发布CSS中使用到的图片,可以不必考虑多发、漏发图片文件的情况;
  4. 自动应用CSS Sprite技术,开发阶段不用考虑图标合并,便于管理,发布后的多个图标自动合并为一个图片,并自动更新CSS代码处理背景定位;
  5. 对CSS代码中使用到的图片自动加时间戳,以便在使用长Cache与更新后的图片及时生效;
  6. 样式有多套配色风格时,通过CssGaga可以实现皮肤的自动化同步;
  7. CSS样式、图片一键去色功能,在遇到特殊政治任务的时候,全站能迅速进行去色改版,迅速恢复;
  8. 生成iOS设备所需的不同尺寸Icon文件;
  9. 处理一些浏览器兼容方面的问题;

继续阅读

深入解析CSS样式层叠权重值

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

继续阅读

容易被误解的overflow:hidden

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

对《优化浏览器渲染》的补充【译】

ISD Webteam的大布同学(twitter:@tc_bryanzhang)在2010年1月翻译了google Page Speed系列中的Optimize browser rendering,很是方便了大家。在此基础上,google又有了更新,我且在此把google新增的部分翻译一下,作为对大布同学译稿的补充。

google这篇文章关注的是资源被下载到客户端以后,在浏览器加载、解释、渲染HTML、CSS和JavaScript阶段的性能优化,提出了5个要点:

  1. 使用高效率的CSS选择器
  2. 避免CSS expressions
  3. 将样式表放在页面顶部
  4. 指定图像尺寸
  5. 尽早指定文档的字符编码

继续阅读

自适应的多列图文混排改进

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

image

继续阅读

CSS边框实现“无图化”设计【译】

原文:http://www.yuiblog.com/blog/2011/03/08/css-border-tricks-with-collapsed-boxes/

译文:[cref css-border-tricks-with-collapsed-boxes-translation http://ofcss.com/?p=1078]

作者:Thierry Koblentz (雅虎前端工程师)

用css边框实现小三角的技巧现在已经被越来越多的网站所采用,减少图片、减少HTTP请求的低碳设计越来越受欢迎。这次,来自雅虎的前端工程师又给我们带来了一组新的CSS边框设计技巧,原文列出了三种(双色背景导航条、水平排列元素间的点线分隔符、带左右箭头的垂直导航条),实际上除了这三种外,其范例页中还给出了额外的两种(水平分页导航条、垂直分组导航条)。以下是译文:

继续阅读

在非IE浏览器中模拟zoom创建块级上下文【译】

原文:http://www.stubbornella.org/?p=726

译文:[cref the-hacktastic-zoom-fix-translation 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最终采用的代码做了逐行讲解。

以下是译文:

继续阅读

CSS技巧:如何避免IE6中的"浮动下坠"【译】

原文:http://www.yuiblog.com/?p=2820

译文:[cref prevent-a-float-drop-in-ie6-translation http://ofcss.com/?p=1028]

作者:Thierry Koblentz

尽管这种情况通常被称为"浮动下坠"或者"浮动下沉",但实际上下坠或下沉的列并不一定是浮动的……只要它比预留给它的空间更宽就有可能出现下沉。请记住这是一种特定情况下才会发生的在跨浏览器时很常见的行为——网页的某一栏太宽了,于是它下沉了。

继续阅读