Responsive Design设计工具，早前在《15+ Responsive设计的测试工具》中只整理了一些测试工具，今天特意在《Responsive Design资源之一：学习线路》基础之上，整理Responsive Design资源系列第二部分——设计工具。希望这些工具能帮助大家更好的学习Responsive。

Responsive设计工具中主要包括“设计灵感”、“设计草图”、“Psd辅助图”、“框架与原型”、“样式指南”和“计算器”六个部分，其中“设计灵感”中罗列的是一些Responsive设计案例；“设计草图”中提供了一些Responsive设计草图的常用工具；“Psd辅助”主要是用来帮助设计师在制图时更好的帮助设计师设计；“框架与原型”中总结了一些优秀的Responsive设计的框架和原型；“样式指南”中提供了CSS处理Responsvie的方法与细节；最后一部分是有关于一些计算器，帮助大家在制作过程中的单位转换。接下来我们一起来看看这些资源。

Responsive设计灵感（案例资源）

这里主要收集了Responsive设计的一些案例，大家可以通过这些案例，为您的Responsive设计提供灵感。

1、Mediaqueri.es

2、This Is Responsive tagged 'Inspiration'

3、Responsive Deck

4、Zurb Responsive Gallery

二、Responsive设计草图

Responsive设计过程，对于制作草图是很有必要的一个环节，下面给大家提供了四个优秀的Responsive草图制作工具。

1、Responsive Web Design Sketch Sheets

2、Responsive Design Sketch Sheets

3、Interface Sketch

4、Responsive Sketch Sheets

三、Responsive设计辅助图

对于做设计的同学来说，Psd应该很熟悉，其实在对Responsive做设计时，也有一些图可以辅助我们，让大家更好的实现Responsive设计，在这里给大家提供了两套设计，以供使用。

1、A better Photoshop grid for responsive web design

2、Stripes - Responsive Web Design PSD

四、Responsive框架与原型

有关于Responsive框架，在互联网上特别的多，就W3cplus就搜集了不少，比如说《8个实用的响应式设计框架》经过一年多的积累，现在有近20个Responsive框架，另外在《16个优秀的Responsive CSS框架》也整理了16个Responsive方面的框架。现在多了，也不知道如何选择，这里为大家推荐几个国外讨论较多的Responsive框架以供大家参考。

1、Twitter Bootstrap

2、320 And Up

3、Foundation ZURB

4、LESS Framework

5、Jetstrap

6、FRAMELESS

7、Mobile Boilerplate

8、Wirefy

五、样式指南

这一节中，主要提供了几份优秀的CSS指南文档，在这些文档中也涵盖了Responsive设计方面的知识。

1、Style Tiles

2、Front-end Style Guide Roundup

3、Pears

4、Future-Friendly Style Guides

5、Starbucks Style Guide

六、计算器

计算器，并不是我们平时的所用的计算器，而是用于前端的单位转换的计算器，比如说像素单位转百分比单位、像素单位转em单位等等，其实这样的工具在《70+优秀的前端工具》一文中搜集了前端方面近80个在线工具。在这里，只是将单位转换方面的工具列出来，因为这些工具对你的Responsive布局会有很大的帮助。

1、RWD Calc

2、RatioStrong

3、PixelPerc

4、PixeltoEm

6、Em Calculator

上面总共整理了28个有关于Responsive设计工具方面的资源，不过介绍Responsive设计工具方面肯定不只这些，如果大家平时也有观注这方面的内容，或者你那有更好的资源，也可以跟我们一起分享。

特别声明：以上资源都是外文，如果您碰到打不开的链接，不用着急，开启您的VPN您就可以正常的阅读。此文所列资源都来自于：Responsive Resources（需要VPN才能正常打开）一文。

如需转载，烦请注明出处：http://www.w3cplus.com/source/responsive-resources-design-tools.html

自从一个月前偶然发现Less之后我就开始坚定的使用它了。就CSS本身而言，对于我来说从来就不是问题，但是我很好奇的相法，使用变量来沿着一个调色板为我的网站或者模板创建一些东西。拥有一个提供固定数量给我选择的调色板，可以让我避免颜色太过跳跃，以致于从一个已定的风格中脱离。

Less英文官网需要开启VPN才能正常访问，如果你无法打开Less官网，建议您移步到Alexis Sellier领导的团队所译的中文官网Less中文。

——大漠

事实证明，Less——以及Sass对于这个功能，远不止这些。LESS和Sass在语法上有些共性，比如下面的这些：

1. 混合（Mixins）：class中的class;
2. 参数混合（Parametric）：可以像函数一样传递参数的class;
3. 嵌套规则（Nested Rules）：class中嵌套class，从而减少重复的代码；
4. 运算（Operations）：css中的数学计算；
5. 颜色功能（Color function）：可以编辑你的颜色；
6. 命名空间（Namespaces）：样式分组，从而方便被调用；
7. 作用域（Scope）：局部修改样式；
8. JavaScript表达式(Javascript evaluation)：在CSS样式中使用Javascript表达式赋值。

上面八条在LESS和Sass中是一个很重要的概念，只有把上面的概念理解清楚了，才能更好的学习LESS和Sass，在这里我借花献佛，从各处摘抄了一下，对这几个概念的简单的介绍：

1、Mixins，此处我译成了混合，也有很多同行朋友将其译成混入，不管是混合也好，还是混入也罢。其主要意思是将一个定义好的class A引入到另一个class B中，从而简单实现class B继承了class A的所有属性。

2、Parametric，带参数混合，像函数一样在class A中定义一个参数的默认值、或者参数属性集合，还可以是@arguments蛮量，然后将定义好的class A引入class B中

3、Nested Rules译成嵌套规则，指的是在一个选择器中嵌套另一个选择器来实现继承。从而减少了代码量，并且增加了代码的可读性。

4、Operations运算，在CSS中使用加、减、乘、除进行数学运算，主要运用于属性值和颜色的运算，可以轻松实现属性值之间的复杂关系。

5、Color function颜色功能，颜色的函数运算，颜色会先被转化成HSL色彩空间，然后在通道级别操作。

6、Namespaces命名空间，将一些变量或者混合模块打包封装，更好的组织CSS和属性集的重复使用；

7、Scope作用域，先从本地查找变量或者混合模块，如果没有找到的话就会去父级作用域中查找，直到找到为止，这一点和其他程序语言的作域非常的相似；

8、Javascript evaluation，javascript的表达式,在Less或sass文件中可以使用js的表达式,用来赋值。

——大漠

LESS和Sass之间的主要区别是他们的实现方式不同，LESS是基于JavaScript运行,所以LESS是在客户端处理。

另一方面，Sass是基于Ruby的，是在服务器端处理的。很多开发者不选择LESS是因为LESS输出修改过的CSS到浏览器需要依赖于Javascript引擎，而Javascript引擎需要额外的时间来处理代码。关于这个有很多种方式，我选择的是只在开发环节使用LESS。一旦开发完成，我就复制粘贴LESS输出的到一个压缩器，然后到一个单独的CSS文件来替代LESS文件。另一种方式是使用LESS APP来编译和压缩你的LESS文件。两种方式都将是最小化你的样式输出，从而避免由于用户的浏览器不支持Javascript而可能引起的任何问题。尽管这不大可能，但终归是有可能的。

LESS转译工具除了LESS APP之外，现在目前流行的主要有：SimpLess、WinLess、CodeKit.app、LESS编译辅助脚本-LESS2CSS。

——大漠

更新：在Twitter的评论上，LESS和Sass对比讨论也是相当的热烈。也请考虑Adam Stacoviak回复。现实情况，Sass确实需要在Ruby上运行,然而他不需要在服务器上编译CSS。它也可以在本地编译（正如前面提到的LESS）,编译后的CSS可以运用到你的项目上，Wordpress主题中.引擎模板，或者任何服务器就像你的CSS文件。正如Smashiing Magazine读者和其他读者存在很大的差异，我猜想有很大一部分读者正在使用Mac阅读这评论一样。Mac也默认提供了对Sass的安装和支持，只需要一行命令就可以（sudo gem install sass）。

如果你安装了Sass，你在本地就可以将Sass转译成CSS，并将转译的代码用到你的项目中。如果你还不知道如何安装Sass(或者Compass)，我们也写了一份详细的指南Getting Started with Sass and Compass，可以很好的帮你清除这个障碍。

LESS Is More

安装

在你的项目中引入LESS很简单：

1. 去下载一个你要的less.js脚本；
2. 创建一个文件来放置你的样式，比如说style.less
3. 添加下面的代码到你的HTML的<head>中。

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

请注意“link”的“rel”属性。你需要在属性值后面使用“/less”，LESS才起作用。你也需要在“link”样式表后面引入"script"。如果你正在使用“HTML5”语法，我无法想像为什么你不会用呢？你可以少去“type=‘text/css’”和“type='text/javascript'”。

安装LESS有两个细节需要特别强调，往往很多人就是这里出错：

1. 调用less样式表时，link标签的rel属性一定是“stylesheet/less”，其中“/less”不可缺少；
2. less.js脚本只能放在加载less样式的link后面，才能生效。

——大漠

LESS还有一个服务器端的版本。可以通过Node Package Manager简单的在服务器上安装LESS。

变量

如果你是一个开发人员，变量应该是你最好朋友之一。如果你要重复使用一个信息（比如例中的颜色color），将它设置为一个变量就可以。使用这种方式，你就可以保证自己的一致性并可能减少滚动代码来查找颜色值、复制和粘贴等繁琐的工作了。你甚至可以使用加或者减颜色值，从而得到你需要的颜色值，例如：

@blue: #00c;/*定义蓝色变量*/
@light_blue: @blue + #333;/*定义浅蓝色变量*/
@dark_blue: @blue - #333;/*定义深蓝变量*/

如果我们将这些样式应用到3个div上面，我们就可以看到加上和减掉十六进度的颜色值和原始的蓝色形成的渐变效果：

从@light_blue到@blue到@dark_blue的渐变效果

这段LESS代码应该是这样使用的：

.light_blue {
  background-color: @light_blue;
}
.blue {
  background-color: @blue;
}
.dark_blue {
  background-color: @dark_blue;
}

——大漠

LESS和Sass中的变量的唯一区别就是，LESS使用@，而Sass使用$。同时还有一些作用域上的差别，我们后面会介绍。

混合（Mixin）

有时，我们会创建一些样式，目的是在样式中重复使用这些样式规则。没有人会阻止你在一个HTML中使用多少个class，但是你可以使用LESS，在样式表中完成。为了说明这一点，我粘贴了一些代码示例：

.border {
  border-top: 1px dotted #333;
}

article.post {
  background: #eee;
  .border;
}

ul.menu {
  background: #ccc;
  .border;
}

这和你在两个元素中分别添加类名“.bordered”得到同样的效果，而且你仅仅在样式表中就完成了。并且它工作的很好：

两个文章列表和无序列表都共享同一个边框样式。

在Sass中，你要在样式规则前面添加@minix声明，规则它是个嵌套。然后，通过@include来调用它：

@mixin border {
  border-top: 1px dotted #333;
}

article.post {
  background: #eee;
  @include border;
}

ul.menu {
  background: #ccc;
  @include border;
}

带参数混合（Parametric mixins）

在CSS中也有像函数的功能,这些对于那些CSS中看似多余代码非常有用。最好和最有用的例子就是CSS2到CSS3中各浏览器的私有属性前缀。Nettuts+有一篇Jeffre Way写的很赞的视频和文章，内容中包含了有用的参数组成的文件，他们涵盖了大部分使用各个浏览器私有前缀的CSS3属性。例如，在他们的格式中，一个简单的处理圆角的mixin是这样的：

.border-radius( @radius: 3px ) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

在这个例子中，“.border-radius”有个默认的3px圆角，但是你可以使用你想用的任何圆角属性值。例如“.border-radius(10px)”将会生成半径为10px的圆角。

在Sass中的语法和LESS的语法很相似，只是使用$声明变量，然后使用前面提到的@mixin和@include来调用。

选择器继承

下面这些是LESS中没有提供的。通过这个功能，你可以将一个选择器附加到已经预先定义的选择器上，而无需再使用逗号将两者分开的写法了：

.menu {
  border: 1px solid #ddd;
}
.footer {
  @extend .menu;
}
/* 上面的规则和下面的规则是一样的效果 */
.menu, .footer {
  border: 1px solid #ddd;
}

嵌套规则(Nested rules)

在CSS中嵌class和id是避免样式干扰或者被别的样式干扰的唯一方式。但是可能变得很乱。使用一个选择器，类似于"#site-body .post .post-header h2"是毫无用处，而且还占用大量没必要的空间。使用LESS,你可以嵌套ID、class以及元素标签。对于前面提到的例子，你可以这样写：

#site-body { …
  .post { …
    .post-header { …
      h2 { … }
      a { …
        &:visited { … }
        &:hover { … }
      }
    }
  }
}

上面的代码最终效果和上面的一大串选择器效果一样，但是要更容易阅读和理解的多，而且它占用很少的空间。你也可以通过&来引用元素样式到他们的伪元素上，这个功能类似于javascript中的this。

运算（Operations）

你很可能期望在CSS中使用数字或者变量实现数学运算！

@base_margin: 10px;
@double_margin: @base_margin * 2;

@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;

声明一下，在取得“@quarter_age”变量时，我们也可以直接除以4，但是在这里，我们只是想演示一下圆括号组成的“运算顺序”（这个运算顺序可能小学生也知道的）。在复合型运算中，小括号也是很有必要的，例如：“ border: (@width / 2) solid #000”。

Sass在数字上要比LESS更专业,他已经可以直接换算单位了。Sass可以处理无法识别的度量单位，并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。

/* Sass */
2in + 3cm + 2pc = 3.514in

/* LESS */
2in + 3cm + 2pc = Error

Color函数

前面，我提到了LESS如何帮我们用编码来实现一个调色板。在这里功能最大的一部分就是颜色函数。假设您在样式中使用一个标准的蓝色风格,然后，你想要使用这个颜色在一个表单中制作一个渐变的“提交”。你可以打开Photoshop或者另一个编辑器来得到一个比蓝色稍亮或变暗的十六进制值色作为一个渐变色。或者你可以只使用LESS中的颜色函数。

@blue: #369;
.submit {
  padding: 5px 10px;
  border: 1px solid @blue;
  background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/
  background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); /*Webkit*/
  background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*Opera*/
  background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
  background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
}

lighten函数很明显就是用百分比值来减轻颜色。在这个例子中，它将在蓝色的基础上减少10%。这种方法使我们只需要简单的改变基础颜色就可以修改渐变的元素或者其他元素的颜色。这对于制作主题模板来说是非常有用的。而且，如果你使用参数函数，像上面提到的，你还可以更简单的应用到一些浏览器私有前缀的声明中，就像这个例子：“.linear-gradient(lighten(@blue), @blue, 100%);”。

无论哪种方式,你都会得到一个不错的效果:

很赞的渐变的、基于变量的”Submit”按钮。

还有很多颜色函数，比如变暗或者调整颜色的饱和度，甚至你可以旋转色盘来使用其他颜色。我建议你亲自尝试下你能想出的用法。

Sass似乎有更多的颜色函数选择——但我们并不需要这么多。我个人最常用的还是lighten和darken函数功能。如果您想了解更多的东西，你可以详细的阅读这里介绍。

条件语句和控制

这是一个很强大的功能，也是LESS不支持的功能。使用Sass，你可以使用if{}else{}这样的条件语句，以及for{}循环语句，他甚至还支持and、or和not，以及<、>、<=、>=和==等操作符。

/* Sass中简单的if语句 */
@if lightness($color) > 30% {
  background-color: #000;
} @else {
  background-color: #fff;
}

/* Sass中简单的for循环语句*/
@for $i from 1px to 10px {
  .border-#{i} {
    border: $i solid blue;
  }
}

命名空间（namespaces）

命名空间可以用于组织我们的CSS，从而提高到另一个层次，我们将一些公用的样式创建分组，然后在使用的时候直接调用。例如，如果我们创建了一个名为“default”的样式分组，我们就可以在使用到的时候直接从该组中调用。/p>

#defaults {
  .nav_list () {
    list-style: none;
    margin: 0; padding: 0;
   }
   .button () { … }
   .quote () { … }
}

然后，在我们的代码中，如果我们正好在一个nav元素中使用了ul元素，我们就会想到我们需要default样式。那么我们就可以简单的调用它，它也会被直接应用。

nav ul {
  #defaults > .nav_list;
}

作用域（scope）

作用域是程序中的一个标准，LESS中也是。如果你在你样式表的root级声明一个变量，它在整个文档中都是可以调用的。然而，如果你在一个选择器，比如id或者class中，重新定义了这个变量，那么，它就只能在这个选择器中可用了——当然是重新定义后的新值。

@color: #00c; /* 蓝色 */

#header {
  @color: #c00; /* 红色 */
   border: 1px solid @color; /* 红色边框 */
}

#footer {
  border: 1px solid @color; /*蓝色边框 */
}

因为我们在#header中重新定义了color变量，变量的值将会是不同的而且只会在该选择器中有效。它之前或者之后的所有地方，如果没有被重新定义，都会保持那个原始的值。

作用域在Sass中稍有不同。在上面的代码中，当@color变量变为红色后，代码中，此处之后的该变量的值，将会被重写（成为红色）。

注解

这一部分比较基础。LESS中允许两种注释写法。标准的CSS注释，/* comment */，是有效的，而且能够通过处理并正确输出。当行注释，// comment，同样可以用但是不能够通过处理也不能被输出，然后，结果是，“无声的”。

导入

导入也相当符合标准。标准的 @import: ‘classes.less’; 处理的很好。然而，如果你想要导入其它的LESS文件，那么文件的扩展名是可选的，所以 @import ‘classes’; 也是可行的。如果你想要导入一些无需LESS处理的内容，你可以使用 .css 扩展 (比如， @import: ‘reset.css’;)。

字符串插入

字符串也是可以用于变量中的，然后通过@{name}来调用。

@base_url = 'http://coding.smashingmagazine.com';
background-image: url("@{base_url}/images/background.png");

转义(Escaping)

有时候,你需要引入一个值,它是无效的CSS语法或者LESS不能识别。通常是一些IE的Hack。要避免抛出异常并破坏LESS，你将需要避开它们。

.class {
  filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}

/* 实际上会输出下面的代码: */
.class {
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}

javascript的表达式

这是LESS中我最中意的部分：在样式表中使用Javascript——相当精彩。你可以使用表达式，也可以参考环境方向来使用反单引号。

@string: `'howdy'.toUpperCase()`; /* @string becomes 'HOWDY' */

/* You can also use the previously mentioned interpolation: */
@string: 'howdy';
@var: ~`'@{string}'.topUpperCase()`; /* becomes 'HOWDY' */

/* Here we access part of the document */
@height = `document.body.clientHeight`;

输出格式

然而LESS并没有输出设置，而Sass提供4中输出选项：nested, compact, compressed 和 expanded。

总结

这两者有很多共同点。对于写代码的设计师来说，他们都是很棒的工具，并且他们还可以帮助开发者更有效、更快速的工作。如果你是Ruby或HAML的爱好者，那么Sass会是你的好助手。对我来说，一个PHP和Javascript极客，我更倾向于LESS，因为它便于引入和能够使用JavaScript表达式以及文档属性。我怀疑我甚至接近真正理解在样式表中编程的可能行了，但是我仍坚持尝试。如果你在工作中有用到它们中的一个，或者两个都用，我很乐意听到关于它的更多内容，并看到你的成果。当然，技巧、诀窍、更正一直是很欢迎的。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载烦请注明出处：

英文原文：http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

中文译文：http://www.w3cplus.com/css/an-introduction-to-less-and-comparison-to-sass.html

Clip属性是大家经常会误解的一个属性，这篇文章帮助大家充分的了解和学习clip属性，用这个属性制作出更好的效果。

我可以确定Clip属性有很多同学并不知道，因为这个属性使用率非常的底，我初次接触是在Drupal的主题之中，他们有一段用来隐藏文本的代码，就是使用的clip属性。

/* Hide only visually, but have it available for screenreaders*/
.visuallyhidden {
  border: 0 none !important;
  clip: rect(1px 1px 1px 1px);/*IE<8*/
  clip: rect(1px,1px,1px,1px);
  height: 1px !important;
  margin: -1px;
  overflow: hidden;
  padding: 0 !important;
  position: absolute !important;
  width: 1px;
}	

如果你不知道也不用担心，接下来的内容将会涵盖clip属性的各个方法。详细阅读这篇文章，你将对clip属性有一个很深的了解。

Clip属性在W3C官网是这样进行描述的：“通过对元素进行剪切来控制元素的可显示区域，默认情况下，元素是不进行任何剪切的，但是也有可能剪切区域也显示的设置了clip属性”。

大家应该看过使用javascript的插件来剪切元素，但是你也可以使用CSS的clip属性实现，也许会有一些限制，但我们可以一起看看。

语法：

想要了解clip属性，我们很有必要先学习clip的语法知识：

.selector {
	clip: <shape> | auto | inherit
}	

首先你要注意：clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。clip无法在设置“position:relative”和“position:static”上工作。

说实话,我真的不知道为什么是这样的。至少,我在网络上没有发现任何有关于这方面的话题,因此,如果你要是知道为什么，希望您能在下面的评论中分享一些知识。

上面的语法告诉我们，clip属性只接受三个不同的属性值：

1. <shape>：shape是一个函数功能，当使用仅使用rect()属性;
2. auto：这是一个默认值，clip设置auto值和没有进行剪切是一样的效果;
3. inherit：继承父元素的clip属性值。

很多时候，你可能希望有更多的shape函数功能使用，比如说rect()和circle()等，但是到目前为止仅有rect()函数可使用，不过不用担心，这个功能就可以帮我们制作很多很酷的效果。

Rect()使用

接下来我们来看rect()使用方法。rect()需要设置四个值：top, right, bottom和left。他们之间需要用逗号隔开，而且rect()属性值和margin、padding以及bodrder具有一样的标准，遵循TRBL顺时针旋转的规则。

  clip: rect(<top>, <right>, <bottom>, <left>);

在CSS2.1中，rect()和<top>和<bottom>指定偏移量是从元素盒子顶部边缘算起；<left>和<right>指定的偏移量是从元素盒子左边边缘算起。

我们简单的来看一个例子：

p#one { clip: rect(5px, 40px, 45px, 5px); }
p#two { clip: rect(5px, 55px, 45px, 5px); }	

上面的例子是在50X55px的长方形盒子中是行剪切，得到虚线的长方形：

<top>, <right>, <bottom>, <left>可以将值设置为“auto”或者长度值<length>。而且还可以充许负的长度值。其中取值为“auto”时，剪切区域的边缘和元素盒子边缘相同。例如：在<top>和<left>设置为auto时，他们就相当于top和left取值为0；如果<right>和<bottom>设置为auto时，他们就相当于元素的宽度（这个宽度包括元素的border、padding和width），或者简单的理解为100%。

针对上面所言，将clip分为以下几种：

1、不显示剪切区域：当rect()中的bottom值小于top值，或者right值小于left值时，整个剪切区域不会显示。例如：

.rect2 img {
  clip: rect(13px,0,161px,30px);/*right值小于left值*/
}
.rect3 img {
  clip:rect(13px, 164px, 0, 30px);/*bottom值小于top值*/
}	

2、top和left取值为auto，当top或者left取值为auto时，相当于取值为0；

.rect4 img {
  clip: rect(auto, 164px, 161px, 30px);
}
.rect5 img {
  clip: rect(13px, 164px, 161px, auto);
}	

rect(auto,164px,161px,30px)效果

rect(13px,164px,161px,auto)效果

3、bottom和right取值为auto，当bottom和right取值为auto时，相当于元素的100%宽度。

.rect6 img {
  clip: rect(13px, auto, 161px, 30px);
}
.rect7 img {
  clip: rect(13px, 164px, auto, 30px);
}	

rect(13px,auto,161px,30px)效果

rect(13px,164px,auto,30px)效果

3、bottom和right取值为auto，当bottom和right取值为auto时，相当于元素的100%宽度。

详细点击demo。

rect()不能支持百分比值，这一点需要特别的注意。

浏览器兼容性

你可能会很关注，这个属性的兼容性不知道如何？请放心，clip属性得到较好的支持，在chrome1.0+、firefox1.0+、opera7.0+、safari1.0+和ie8.0+都支持标准语法，但在ie4.0至ie7.0我们还是需要做一定的处理，需要把每个属性值之间的逗号去掉。

.my-element {
  position: absolute;
  clip: rect(10px  350px  170px  0); /* IE4 to IE7 */
  clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */
}	

需要特别的注意，ie4-ie7的要写在标准语句的前面，不然其他浏览器下将会无任何效果。

案例

上面是各种理论的讲解，接下来我们一起来动手做一个案例，通过clip实现行内sprites的效果。

要制作上图的一个效果，我们平时都是使用三个图来制作，那么使用clip属性我们也可以在行内使用sprites图来实现上图的效果，这两者的区别我就不多说，大家看看他们的对比截图：

图中说明一切，接下来我们主要看的是如何使用clip实现效果，先写个简单的HTML结构：

<ul id="wrapper"&ht;
  <li&ht;<img src="icons.png" alt="Happy Icon" class="icons happy" /&ht;</li&ht;
  <li&ht;<img src="icons.png" alt="Sad Icon" class="icons sad" /&ht;</li&ht;
  <li&ht;<img src="icons.png" alt="Angry Icon" class="icons angry" /&ht;</li&ht;
</ul&ht;	

一个很简单的结构，初步的效果如下：

先来给他一个基本布局样式：

* {
  margin:0;
  padding: 0;
}	

#wrapper {
  position: relative;
  width: 386px;
  margin:50px auto;
  list-style: none outside none;
}	
#wrapper li {
  width: 128px;
  height: 128px;
  float: left;
  position: relative;
}	

此时效果如下：

这离我们需要的效果还相差很远，接下来就需要clip来发挥他的功能了，我们简单先分析一下，对于这三个脸谱，距离顶部的距离都是“0”而距离底部都是“128px”，这样我们就确定两个参数了，只需要对每个脸谱确定left和right的参数。

先来看sad脍，他是在sprites图片的最左边，那么我们可以明显的确定他的另外两个值：left为0;right为128px，如下图所示：

对于happy脸，我们在sprites图中间，根据相关参数，我们可以推算或者测量出其left值为128px，right值为256px，但这个时候有一个细节，我们使用clip进行剪切，前面会留有空白（也就是sad脸位置）,为了能正常显示，需要在这个Img中设置一个left值为“-128px”,将happy拉出来：

最后一张是angry脸，按前面的方法我们很容易的得到left值为256px，right值为384px(在这里也可以是auto，前面有讲过)，同样前面有占位的，也需要用left值拉回来：

详细代码如下：

.icons {
  position:absolute;
  top:0;
  left:0;
}

.happy {
  clip: rect(0 256px 128px 128px);
  left:-128px;
}

.angry {
  clip: rect(0 384px 128px 256px);
  left:-256px;
}

.sad {
  clip: rect(0 128px 128px 0);
}	

如此一来，效果就出来了，大家可以点击这里查看效果。

这里展示的是仅是其中一个很简单的案例效果，其实你可以发挥你的想像力，配合一些css3的特效制作出一些很酷的效果。

这是一个很特殊的属性，也是一个很少见的属性，少见是由于他不被人了解，虽然他受限蛮多，但在一些情况下使用这个属性能轻松的帮你实现你需要的效果。而且这个属性使用也并不复杂。通过上面的介绍，大家应该对clip有所了解了。希望这篇文章能对大家有所收获。

如需转载，烦请注明出处：http://www.w3cplus.com/css3/clip.html

Buttons的制作，现在几乎无需任何图片就可以实现（当然需要忽略IE低版本），而且我现在做的项目，按钮基本上使用CSS3来制作，让那些不支持CSS3的浏览器就用纯色显示，让现代浏览器给用户带来更好的体验。至于Buttons的制作，在W3cplus上也是有很多案例了，今天我再次老调重弹，制作了Icon的button，而且制作了三种形态，3D立体按钮，内描边按钮，圆角按钮，而且配置了多个颜色，希望这些按钮能让你直接用到你的项目中（w3cplus的案例效果，已经有很多网站在直接使用（^_^））。

demodownload

HTML CODE

制作按钮的结构非常的简单，可以使用任何标签元素制作，不过常用的是<a>和<button>标签，此处就是使用的<a>标签：

<!-- 制作3D按钮 -->
<a href="javascript:void(0)" class="button-bevel orange"> <span class="refresh"></span> Refresh </a>
<!-- 制作按钮 -->
<a href="javascript:void(0)" class="button orange"> <span class="refresh"></span> Refresh </a>
<!-- 制作圆角按钮 -->
<a href="javascript:void(0)" class="button rounded orange"> <span class="refresh"></span> Refresh </a>

这里需要注意一下，我们效果中有一个3D的效果使用了类名“button-bevel”；正常按钮使用类名“button”，而制作圆角按钮使用类名“rounded”，每个颜色使用一个类名，比如我们案例中使用了类名“orange”、“magenta”、“cyan”、“red”、“black”、“green”六个色，当然大家还可以根据自己的需求制作其他颜色的按钮。案例中的icon是通过span标签来实现的，在span定义不同的类名，从而控制不同的icon显示。

CSS CODE

其实制作按钮的样式非常的简单的，在我们按例中使用了渐变gradient来制作按钮的背景图片效果、通过box-shadow来实现立体效果和按钮阴影效果，使用@font-face来实现icon。当然从中还配有其他属性，但这几个属性是制作按钮常用到的属性。

简单的来看看按钮实现过程：

/*引入google fonts*/
@import url(http://fonts.googleapis.com/css?family=Arvo);
/*给body一个径向的渐变图像*/
body {
  background: #f8fcd4;
  background: radial-gradient(center, ellipse cover,  #f8fcd4 19%,#dbfacb 100%);
  background-attachment: fixed;
}
/*demo的基本布局*/
.demo {
  text-align: center;
  display: block;
  width: 800px;
  margin: 50px auto;
}

这里引用google的fonts来定义按钮的字体（仅适合英文字体）,另外定义了一些基本样式。

@font-face {
  font-family: 'EntypoRegular';
  src: url('font/entypo-webfont.eot');
  src: url('font/entypo-webfont.eot?#iefix') format('embedded-opentype'),
       url('font/entypo-webfont.woff') format('woff'),
       url('font/entypo-webfont.ttf') format('truetype'),
       url('font/entypo-webfont.svg#EntypoRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

引用本地服务器字体，主要用来制作icon，具体制作方法就不多说了，因为在w3cplus上随处可见这样的教程和案例。

.button, 
.button-bevel {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  padding: 7px 20px 9px;
  margin: .5em .5em .5em 0;
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);/*设置文本阴影*/
  text-transform: capitalize;
  transition: 0.1s linear;/*过渡改变属性*/
}

.button {
  border-radius: 2px;/*设置圆角*/
  box-shadow: inset rgba(255,255,255,0.3) 1px 1px 0;/*设置盒子阴影*/
}
/*按钮悬浮状态效果*/
.button:hover, 
.button-bevel:hover {
  color: #fff;
  text-decoration: none;
} 
/*按钮点击状态效果*/  
.button:active {
  box-shadow: inset rgba(0,0,0,0.4) 0px 0px 6px;/*改变盒子阴影*/
}
/*圆角按钮效果*/
.rounded {
  border-radius: 20px;
}

上面是按钮的基本样式和各种状态下的样式。

/*橙色按钮*/
.orange {
  background: rgb(255,183,0);
  background: -*-linear-gradient(to bottom,  rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb700', endColorstr='#ff8c00',GradientType=0 );
  border: 1px solid #e59500;
}
  
.orange:hover {
  background: rgb(255,203,72);
  background: -*-linear-gradient(to bottom,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcb48', endColorstr='#ff9c23',GradientType=0 );
}
/*洋红色按钮*/  
.magenta {
  background: rgb(255,130,172);
  background: -*-linear-gradient(to bottom,  rgba(255,130,172,1) 0%,rgba(247,37,129,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff82ac', endColorstr='#f72581',GradientType=0 );
  border: 1px solid #c60a56;
}
  
.magenta:hover {
  background: rgb(255,155,189);
  background: -*-linear-gradient(to bottom,  rgba(255,155,189,1) 0%,rgba(248,62,143,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9bbd', endColorstr='#f83e8f',GradientType=0 );
}
/*蓝绿按钮*/ 
.cyan {
  background: rgb(130,207,241);
  background: -*-linear-gradient(to bottom,  rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82cff1', endColorstr='#38aeea',GradientType=0 );
  border: 1px solid #3cafcf;
}
 
.cyan:hover {
  background: rgb(153,216,244);
  background: -*-linear-gradient(to bottom,  rgba(153,216,244,1) 0%,rgba(79,183,236,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99d8f4', endColorstr='#4fb7ec',GradientType=0 );
}
/*大红按钮*/  
.red {
  background: #e25b53;
  background: -*-linear-gradient(to bottom,  #e25b53 0%,#dd2011 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e25b53', endColorstr='#dd2011',GradientType=0 );
  border: 1px solid #c42222;
}

.red:hover {
  background: #dd7671;
  background: -*-linear-gradient(to bottom,  #dd7671 0%,#dd2011 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd7671', endColorstr='#dd2011',GradientType=0 );
}
/*黑色按钮*/
.black {
  background: #444444;
  background: -*-linear-gradient(to bottom,  #444444 0%,#1c1c1c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#1c1c1c',GradientType=0 );
  border: 1px solid #2a2a2a;
}

.black:hover {
  background: #686868;
  background: -*-linear-gradient(to bottom,  #686868 0%,#1c1c1c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#686868', endColorstr='#1c1c1c',GradientType=0 );
}
/*绿色按钮*/
.green {
  background: #82cc5d;
  background: -*-linear-gradient(to bottom,  #82cc5d 0%,#53b73c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82cc5d', endColorstr='#53b73c',GradientType=0 );
  border: 1px solid #429E34;
}

.green:hover {
  background: #99cc80;
  background: -*-linear-gradient(to bottom,  #99cc80 0%,#53b73c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cc80', endColorstr='#53b73c',GradientType=0 );
}

上面代码是六种颜色按钮的实现代码，主要使用的是渐变gradient属性制作，当然大家可以根据自己的需求制作出更多颜色效果。如果你要是熟悉less或者sass，制作这样的按钮效果就更佳方便，要是你感兴趣，w3cplus站上有相关文章介绍，后期也还会加强这方面的分享。

/*3D按钮效果*/
.button-bevel {
  vertical-align: top;
  border-radius: 4px;
  border: none;
  padding: 10px 25px 12px;
}
  
.button-bevel:active {
  position: relative;
  top: 5px;
}
  
.button-bevel.orange {
  box-shadow: #c46d00 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.orange:active {
  box-shadow: #c46d00 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;  
}
  
.button-bevel.magenta {
  box-shadow: #ca075c 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.magenta:active {
  box-shadow: #ca075c 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;  
}
  
.button-bevel.cyan {
  box-shadow: #1994d3 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.cyan:active {
  box-shadow: #1994d3 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;  
 }
  
.button-bevel.red {
  box-shadow: #88180e 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.red:active {
  box-shadow: #88180e 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;  
}
  
.button-bevel.black {
  box-shadow: #000 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px, inset rgba(255, 255, 255, 0.3) 0 0 3px;
}

.button-bevel.black:active {
  box-shadow: #000 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px, inset rgba(255, 255, 255, 0.3) 0 0 3px;  
}
  
.button-bevel.green {
  box-shadow: #439230 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.green:active {
  box-shadow: #439230 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;  
}

这部分代码主要是针对于3D按钮效果的代码，通过box-shadow属性为每个颜色按钮制作3D效果，这个方法用来制作3D阴影效果非常方便，也是最常用的一种方法。

.button span, 
.button-bevel span {
  font-family: 'EntypoRegular';
  font-size: 20px;
  font-weight: normal;
  vertical-align: middle; 
  line-height: 0;
  margin-right: .1em;
}

.refresh:after { content: "h"; font-size: 34px; }
.shuffle:after { content: "f"; font-size: 34px; }
.preview:after { content: "M"; font-size: 34px; }
.tea:after { content: "u"; font-size: 34px; }
.wifi:after { content: "T"; font-size: 34px; }
.locator:after { content: "0"; font-size: 34px; }
 
.rss:after { content: "S"; font-size: 34px; }
.cloud:after { content: "y"; font-size: 34px; }
.download:after { content: "w"; font-size: 34px; }
.trash:after { content: "I"; font-size: 34px; }
.rack:after { content: "t"; font-size: 34px; }
.map:after { content: "1"; font-size: 34px; }
 
.setting:after { content: "@"; font-size: 34px; }
.identity:after { content: "."; font-size: 34px; }
.navigation:after { content: "2"; font-size: 34px; }
.gallery:after { content: "p"; font-size: 34px; }
.email:after { content: "%"; font-size: 34px; }
.users:after { content: "+"; font-size: 34px; }
  
.calendar:after { content: "P"; font-size: 34px; }
.link:after { content: ">"; font-size: 34px; }
.time:after { content: "N"; font-size: 34px; }
.folder:after { content: "s"; font-size: 34px; }
.tag:after { content: "C"; font-size: 34px; }
.share:after { content: "5"; font-size: 34px; }
 
.lock:after { content: "U"; font-size: 34px; }
.unlock:after { content: "V"; font-size: 34px; }
.mic:after { content: "O"; font-size: 34px; }
.love:after { content: "6"; font-size: 34px; }
.star:after { content: "7"; font-size: 34px; }
.like:after { content: "8"; font-size: 34px; }
  
.phone:after { content: "!"; font-size: 34px; }
.flag:after { content: "?"; font-size: 34px; }
.adduser:after { content: "-"; font-size: 34px; }
.attach:after { content: "'"; font-size: 34px; }
.comment:after { content: ":"; font-size: 34px; }
.edit:after { content: "&"; font-size: 34px; }
  
.upload:after { content: "v"; font-size: 34px; }
.storage:after { content: "x"; font-size: 34px; }
.photo:after { content: "D"; font-size: 34px; }
.help:after { content: "K"; font-size: 34px; }
.glass:after { content: "R"; font-size: 34px; }
.print:after { content: "<"; font-size: 34px; }
  
.gadget:after { content: '"'; font-size: 34px; }

看到这部分代码，大家应该知道是用来制作icon的图标，方法简单，但这里对应的类名有点不标签，建议使用@font-face制作icon时，使用w3cplus提供的了体库，这里我是随便找了一个来用的，所以有些和类名并不对应。

所有CSS代码

/*引入google fonts*/
@import url(http://fonts.googleapis.com/css?family=Arvo);
/*给body一个径向的渐变图像*/
body {
  background: #f8fcd4;
  background: radial-gradient(center, ellipse cover,  #f8fcd4 19%,#dbfacb 100%);
  background-attachment: fixed;
}
/*demo的基本布局*/
.demo {
  text-align: center;
  display: block;
  width: 800px;
  margin: 50px auto;
}
@font-face {
  font-family: 'EntypoRegular';
  src: url('font/entypo-webfont.eot');
  src: url('font/entypo-webfont.eot?#iefix') format('embedded-opentype'),
       url('font/entypo-webfont.woff') format('woff'),
       url('font/entypo-webfont.ttf') format('truetype'),
       url('font/entypo-webfont.svg#EntypoRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.button, 
.button-bevel {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  padding: 7px 20px 9px;
  margin: .5em .5em .5em 0;
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);/*设置文本阴影*/
  text-transform: capitalize;
  transition: 0.1s linear;/*过渡改变属性*/
}

.button {
  border-radius: 2px;/*设置圆角*/
  box-shadow: inset rgba(255,255,255,0.3) 1px 1px 0;/*设置盒子阴影*/
}
/*按钮悬浮状态效果*/
.button:hover, 
.button-bevel:hover {
  color: #fff;
  text-decoration: none;
} 
/*按钮点击状态效果*/  
.button:active {
  box-shadow: inset rgba(0,0,0,0.4) 0px 0px 6px;/*改变盒子阴影*/
}
/*圆角按钮效果*/
.rounded {
  border-radius: 20px;
}
/*橙色按钮*/
.orange {
  background: rgb(255,183,0);
  background: -*-linear-gradient(to bottom,  rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb700', endColorstr='#ff8c00',GradientType=0 );
  border: 1px solid #e59500;
}
  
.orange:hover {
  background: rgb(255,203,72);
  background: -*-linear-gradient(to bottom,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcb48', endColorstr='#ff9c23',GradientType=0 );
}
/*洋红色按钮*/  
.magenta {
  background: rgb(255,130,172);
  background: -*-linear-gradient(to bottom,  rgba(255,130,172,1) 0%,rgba(247,37,129,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff82ac', endColorstr='#f72581',GradientType=0 );
  border: 1px solid #c60a56;
}
  
.magenta:hover {
  background: rgb(255,155,189);
  background: -*-linear-gradient(to bottom,  rgba(255,155,189,1) 0%,rgba(248,62,143,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9bbd', endColorstr='#f83e8f',GradientType=0 );
}
/*蓝绿按钮*/ 
.cyan {
  background: rgb(130,207,241);
  background: -*-linear-gradient(to bottom,  rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82cff1', endColorstr='#38aeea',GradientType=0 );
  border: 1px solid #3cafcf;
}
 
.cyan:hover {
  background: rgb(153,216,244);
  background: -*-linear-gradient(to bottom,  rgba(153,216,244,1) 0%,rgba(79,183,236,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99d8f4', endColorstr='#4fb7ec',GradientType=0 );
}
/*大红按钮*/  
.red {
  background: #e25b53;
  background: -*-linear-gradient(to bottom,  #e25b53 0%,#dd2011 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e25b53', endColorstr='#dd2011',GradientType=0 );
  border: 1px solid #c42222;
}

.red:hover {
  background: #dd7671;
  background: -*-linear-gradient(to bottom,  #dd7671 0%,#dd2011 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd7671', endColorstr='#dd2011',GradientType=0 );
}
/*黑色按钮*/
.black {
  background: #444444;
  background: -*-linear-gradient(to bottom,  #444444 0%,#1c1c1c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#1c1c1c',GradientType=0 );
  border: 1px solid #2a2a2a;
}

.black:hover {
  background: #686868;
  background: -*-linear-gradient(to bottom,  #686868 0%,#1c1c1c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#686868', endColorstr='#1c1c1c',GradientType=0 );
}
/*绿色按钮*/
.green {
  background: #82cc5d;
  background: -*-linear-gradient(to bottom,  #82cc5d 0%,#53b73c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82cc5d', endColorstr='#53b73c',GradientType=0 );
  border: 1px solid #429E34;
}

.green:hover {
  background: #99cc80;
  background: -*-linear-gradient(to bottom,  #99cc80 0%,#53b73c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cc80', endColorstr='#53b73c',GradientType=0 );
}
/*3D按钮效果*/
.button-bevel {
  vertical-align: top;
  border-radius: 4px;
  border: none;
  padding: 10px 25px 12px;
}
  
.button-bevel:active {
  position: relative;
  top: 5px;
}
  
.button-bevel.orange {
  box-shadow: #c46d00 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.orange:active {
  box-shadow: #c46d00 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;  
}
  
.button-bevel.magenta {
  box-shadow: #ca075c 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.magenta:active {
  box-shadow: #ca075c 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;  
}
  
.button-bevel.cyan {
  box-shadow: #1994d3 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.cyan:active {
  box-shadow: #1994d3 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;  
 }
  
.button-bevel.red {
  box-shadow: #88180e 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.red:active {
  box-shadow: #88180e 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;  
}
  
.button-bevel.black {
  box-shadow: #000 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px, inset rgba(255, 255, 255, 0.3) 0 0 3px;
}

.button-bevel.black:active {
  box-shadow: #000 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px, inset rgba(255, 255, 255, 0.3) 0 0 3px;  
}
  
.button-bevel.green {
  box-shadow: #439230 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.green:active {
  box-shadow: #439230 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;  
}
.button span, 
.button-bevel span {
  font-family: 'EntypoRegular';
  font-size: 20px;
  font-weight: normal;
  vertical-align: middle; 
  line-height: 0;
  margin-right: .1em;
}

.refresh:after { content: "h"; font-size: 34px; }
.shuffle:after { content: "f"; font-size: 34px; }
.preview:after { content: "M"; font-size: 34px; }
.tea:after { content: "u"; font-size: 34px; }
.wifi:after { content: "T"; font-size: 34px; }
.locator:after { content: "0"; font-size: 34px; }
 
.rss:after { content: "S"; font-size: 34px; }
.cloud:after { content: "y"; font-size: 34px; }
.download:after { content: "w"; font-size: 34px; }
.trash:after { content: "I"; font-size: 34px; }
.rack:after { content: "t"; font-size: 34px; }
.map:after { content: "1"; font-size: 34px; }
 
.setting:after { content: "@"; font-size: 34px; }
.identity:after { content: "."; font-size: 34px; }
.navigation:after { content: "2"; font-size: 34px; }
.gallery:after { content: "p"; font-size: 34px; }
.email:after { content: "%"; font-size: 34px; }
.users:after { content: "+"; font-size: 34px; }
  
.calendar:after { content: "P"; font-size: 34px; }
.link:after { content: ">"; font-size: 34px; }
.time:after { content: "N"; font-size: 34px; }
.folder:after { content: "s"; font-size: 34px; }
.tag:after { content: "C"; font-size: 34px; }
.share:after { content: "5"; font-size: 34px; }
 
.lock:after { content: "U"; font-size: 34px; }
.unlock:after { content: "V"; font-size: 34px; }
.mic:after { content: "O"; font-size: 34px; }
.love:after { content: "6"; font-size: 34px; }
.star:after { content: "7"; font-size: 34px; }
.like:after { content: "8"; font-size: 34px; }
  
.phone:after { content: "!"; font-size: 34px; }
.flag:after { content: "?"; font-size: 34px; }
.adduser:after { content: "-"; font-size: 34px; }
.attach:after { content: "'"; font-size: 34px; }
.comment:after { content: ":"; font-size: 34px; }
.edit:after { content: "&"; font-size: 34px; }
  
.upload:after { content: "v"; font-size: 34px; }
.storage:after { content: "x"; font-size: 34px; }
.photo:after { content: "D"; font-size: 34px; }
.help:after { content: "K"; font-size: 34px; }
.glass:after { content: "R"; font-size: 34px; }
.print:after { content: "<"; font-size: 34px; }
  
.gadget:after { content: '"'; font-size: 34px; }

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/css3-pictogram-button.html

本文根据Andrew Chalkley的《The Absolute Beginner’s Guide to Sass》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-sass，以及作者相关信息

——作者：Andrew Chalkley

——译者：大漠

什么是Sass？

Sass是一门非常优秀的CSS预处语言，他是由Hampton Catlin创立的。它可以减化CSS的工作流，使开发者更加容易开发，维护CSS样式。

例如，你是否在特定的样式表中查找和替换一个十六进制的颜色而烦恼？或者你正在寻找一个计算器为多栏布局的宽度计算而头痛？（不用担心，Sass能帮你解决这样的烦恼）。

本文将介绍Sass的一些基本概念，比如说“变量”、“混合参数”、“嵌套”和“选择器继承”等。

Sass和CSS非常相似，但是在Sass中是没有花括号（｛｝）和分号（；）的。

如下面的CSS：

#skyscraper_ad { 
  display: block; 
  width: 120px; 
  height: 600px; 
} 
#leaderboard_ad { 
  display: block; 
  width: 728px; 
  height: 90px; 
}

在Sass中，上面的CSS代码你要写成下面这样：

#skyscraper_ad 
  display: block 
  width: 120px 
  height: 600px 
#leaderboard_ad 
  display: block 
  width: 728px 
  height: 90px

Sass使用两个空格琮定义嵌套的区别。

你现在看过了Sass是如何书写的，接下来我们一起看一些Sass方面的介绍，让Sass在你手中变得不在可怕。

变量（Variables）

在Sass中定义变量，是用“$”符号声明，然后后面跟变量名称。在这个例子中，定义变量“red”，在变量名后使用冒号（：），然后紧跟变量值：

$red: #ff4848	

Sass还内置了函数功能，例如变暗（darken）和变亮（lighten），他们可以帮助你修改变量。

在这个例子中，段落要使用一个比“h1”标签更深的红色，就可以这样使用：

$red: #ff4848
$fontsize: 12px
h1
  color: $red
p
  color: darken($red,10%)	

你也可以在相同的变量上做加减运算的操作。如果我们想将颜色变黑，我们也可以在变量的基础上减一个十六进制的颜色，例如“#101”。如果我们想把字号调大“10px”，我们也可以在字号的变量基础上加上这个值。

/*加法和减法*/
color: $red - #101
font-size: $fontsize + 10px	

嵌套（Nesting）

Sass有两种嵌套规则：

选择器嵌套

选择器嵌套是Sass嵌套规则中的第一种。

Sass的嵌套类似于你的HTML嵌套：

$fontsize: 12px
.speaker
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .position
    font:
      size: $fontsize    	

如果你看了Sass生成的CSS，你可以看到“.name”嵌套在“.speaker”内，这里生成的CSS选择器是“.speaker .name”。

.speaker .name {
  font-weight: bold;
  font-size: 22px;
}	
.speaker .position {
  font-size: 12px;	
}

属性嵌套

属性嵌套是Sass嵌套的第二种

相同前缀的属性，你可以进行嵌套：

$fontsize: 12px
.speaker
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .position
    font:
      size: $fontsize    	

在上面的例子中，我们有一个“font:”，在新的一行增加两个空格放置他的属性（通常我们看到的是使用连字符“-”来连接）。

因此我们先写“font:”属性，然后断行空两格，写“weight:”属性，在CSS中就变成了“font-weight:”属性。

.speaker .name {
  font-weight: bold;
  font-size: 22px;
}	
.speaker .position {
  font-size: 12px;	
}

所有连字符的选择器都支持。

这种嵌套用来组织你的CSS结构是非常棒的，可以让你不在写一些重复的代码。

混合（Mixins）

混合是Sass中另一个很优秀的特性。混合可以让你定义一整块的Sass代码，甚至你可以给他们定义参数，更酷的是你还可以设置默认值。

使用关键词“@mixin”来定义Sass的混合，你可以你自己的喜好定义一个混合的名称。如果你需要设置一些参数，你还可以将参数设置到这些代码片段中；如果你需要设置默认值，你也可以在混合的代码片段中设置默认值。

调用混合代码片段，可以使用Sass中的关键词“@include”调用，并在其后面跟上你的混合代码片段的名称，你还可以使用括号，在里面设置一些参数。

来看一个简单的例子：

@mixin border-radius($amount: 5px)
  -moz-border-radius: $amount
  -webkit-border-radius: $amount
  border-radius: $amount
h1
  @include border-radius(2px)
.speaker
  @include border-radius    

上面的Sass代码将转译成下面的CSS代码：

h1 {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}	
.speaker {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

我们给“h1”元素指定了一个特定的圆角值，但是并没有给“.speaker”指定任何值，因此他将使用的是默认值“5px”。

选择器继承

选择器的继承可以让你的选择器继承另一个选择器的所有样式风格，这是一个非常优秀的特性。

使用选择器的继承，要使用Sass的关键词“@extend”，后而跟上你需要继承的选择器，那么这个选择器就会继承另一个选择器的所有样式。（当然他们是有继承和被继承的关系）

h1
  border: 4px solid #ff9aa9
.speaker
  @extend h1
  border-width: 2px  	

上面的Sass代码将转译成下面的CSS代码：

h1,
.speaker {
  border: 4px solid #ff9aa9;
}
.speaker {
  border-width: 2px;
}

尝试Sass

网上尝试

如果你的本地电脑没有安装Sass，你可以在网上尝试使用。

在转译之前，你需要选择底部的“Indented Syntax”选项。

安装

Sass是一个Ruby gem。如果你的本地已经安装了Ruby gems，那么可以在你命令终端直接运行：

gem install sass	

Sass也可以使用命令行工具将Sass文件转译成CSS文件。

你可以键入“sass --watch sass_folder:stylesheets_folder”，这个时候你的Sass文件（文件扩展名必须是.sass）stylesheets_folder就会把转译的样式文件保存在“sass_folder”目录，当然你的sass文件必须保存在这个文件目录中。“--watch”选项的意思就是将这个目录中的sass文件转译成样式文件。

CSS转换成Sass

在现有的项目中通过“sass-convert”使用sass。

在终端进入你的目录中，键入“sass-convert --from css --to sass -R .”。将CSS转换成Sass。其中“-R”表示递归，“.”表示当前目录。

Scss

在这里我们只介绍了Sass的语法，然后还有一个新的名称叫SCSS或者Sassy CSS。不同的是SCSS看起来更像CSS，但他也像Sass一样具有变量、混合、嵌套和选择器继承等特性。

总结

在你组织和管理CSS时，Sass真的很优秀。还有个项目Compass,它在CSS框架中使用混合模式，而不是去修改你的HTML结构或者重新定义你的类名。

那你还在等什么呢？在你的下一个项目中就尝试使用Sass吧。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载烦请注明出处：

英文原文：http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-sass

中文译文：http://www.w3cplus.com/css/the-absolute-beginners-guide-to-sass.html

本文根据Johnathan Croom的《Sass vs. LESS vs. Stylus: Preprocessor Shootout》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/，以及作者相关信息

——作者：Johnathan Croom

——译者：大漠

发挥CSS预处器的作用是一种很有挑战性的事情。CSS预处器有不同的语言，有不同的语法和功能。

在这篇文章中,我们将介绍三种不同CSS预处器的蛮量、功能以及他们的好处——Sass、LESS和Stylus

介绍

CSS预处理器是一种语言，用来编写一些CSS的特性,而且无需考虑浏览器兼容性的问题。他们通过编译的代码编写成一般的CSS,不要在停留在石器时代了。CSS预处器有成千上万的特性,在本文中我们将一一介绍。让我们开始。

语法

在使用CSS预处器之前最重要的是对语法的理解，幸运的是，这三种CSS预处器的语法和CSS都差不多。

Sass和LESS

Sass和LESS都使用的是标准的CSS语法。这使用CSS预处器非常容易的将预处器代码转换成CSS代码。默认Sass使用“.scss”扩展名，而LESS使用“.less”扩展名。Sass和LESS基本设置可以像下面所示：

/* style.scss 或者 style.less */
h1 {
  color: #0982C1;
}

正如你所看到的，在Sass和LESS样式中，这样的代码是在简单不过的了。

重要的一点是，Sass也同时支持老的语法,就是不使用花括号和分号，而且文件使用“.sass”扩展名，他的语法类似于：

/* style.sass */
h1
  color: #0982c1

Stylus

Stylus的语法花样多一些，它使用“.styl”的扩展名，Stylus也接受标准的CSS语法，但是他也接受不带花括号和分号的语法，如下所示：

/* style.styl */
h1 {
  color: #0982C1;
}
/* 省略花括号 */
h1
  color: #0982C1;
/* 省略花括号和分号 */
h1
  color #0982C1

你也可以在同一个样式单中使用不同的变量，例如下面的写法也不会报错：

h1 {
  color #0982c1
}
h2
  font-size: 1.2em	

变量(Variables)

你可以在CSS预处理器中声明变量,并在整个样式表中使用。CSS预处理器支持任何变量（例如：颜色、数值（不管是否包括单位）、文本）。然后你可以在任意地方引用变量。

Sass

Sass声明变量必须是“$”开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号（：）隔开。就像CSS属性一样：

$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;
body {
  color: $mainColor;
  border: 1px $borderStyle $mainColor;
  max-width: $siteWidth;	
}	

LESS

LESS声明变量和Sass声明变量一样，唯一区别是变量名前面使用是的“@”字符：

@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;
body {
  color: @mainColor;
  border: 1px @borderStyle @mainColor;
  max-width: @siteWidth;
}	

Stylus

Stylus声明变量没有任何限定,你可以使用"$"符号开始。结尾的分号(;)可有可无,但变量名和变量值之间的等号(=)是需要的。有一点需要注意的是,如果我们使用"@"符号开头来声明（0.22.4）变量，Stylus会进行编译，但其对应的值并不会赋值给变量。换句话说，在Stylus中不要使用“@”符号开头声明变量。

mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
body
  color mainColor
  border 1px $borderStyle mainColor
  max-width siteWidth

转译出来的CSS

上面的代码都将转译成相同的CSS。你可以想像一下,变量的作用有多大。我们不需要为了修改一个颜色而输入许多次,也不需要为了修改一个宽度去到找寻找他.(我们只需要修改定义好的变量,修改一次就足够).下面是转译过来的CSS代码:

 body {
  color: #0982c1;
  border: 1px dotted #0982c1;
  max-width: 1024px;
} 

嵌套（Nesting）

如果我们在CSS中多个元素有一个相同的父元素，那么写样式会变得很乏味，我们需要一遍一遍的在每个元素前写这个父元素.

section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
}  

相反，使用CSS预处理器，我们可以在父元素的花括号({})写这些元素。同时可以使用“&”符号来引用父选择器。

Sass、LESS和Stylus

对于嵌套选择器来说，三个CSS预处器都具有相同的语法：

section {
  margin: 10px;
  nav {
    height: 25px;
    a {
      color: #0982C1;
      &:hover {
        text-decoration: underline;
      }
    }
  }
} 

转译出来的CSS

上面的预处器转译出来的CSS代码。和我们开始展示的CSS代码是相同的。非常的方便吧！

section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
}  

混合（Mixins）

Mixins是预处器中的函数。平时你在写样式时肯定有碰到过，某段CSS样式经常要用到多个元素中，这样你就需要重复的写多次。在CSS预处器中，你可以为这些公用的CSS样式定义一个Mixin，然后在你CSS需要使用这些样式的地方，直接调用你定义好的Mixin。这是一个非常有用的特性。Mixins是一个公认的选择器，还可以在Mixins中定义变量或者是默认参数。

Sass

 /* Sass定义了一个名叫error的mixin，这个error设置了一个参数“$borderWidth”,在没特别定义外，这个参数的值是默认值2px*/
@mixin error($borderWidth: 2px) {
  border: $borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  @include error(); /* 调用error mixins */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  @include error(5px); /* 调用error mixins，并将参数$borderWidth的值指定为5px*/
} 

LESS

 /* LESS 定义了一个名叫error的mixin，这个error设置了一个参数“$borderWidth”,在没特别定义外，这个参数的值是默认值2px */
.error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  .error(); /* 调用error mixins */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  .error(5px); /* 调用error mixins，并将参数$borderWidth的值指定为5px */
} 

Stylus

 /* Stylus 定义了一个名叫error的mixin，这个error设置了一个参数“$borderWidth”,在没特别定义外，这个参数的值是默认值2px */
error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); /* 调用error mixins */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); /* 调用error mixins，并将参数$borderWidth的值指定为5px */
} 

转译出来的CSS

上面三种CSS预处器转译出来的CSS代码都是一样的

.generic-error {
  padding: 20px;
  margin: 4px;
  border: 2px solid #f00;
  color: #f00;
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  border: 5px solid #f00;
  color: #f00;
}

Mixins在三种预处器中都有所不同：

1. Sass：在Sass定义Mixins和LESS、Stylus有所不同，在声明Mixins时需要使用“@mixin”,然后后面紧跟Mixins的名，他也可以定义参数，同时可以给这个参数设置一个默认值，但参数名是使用“$”符号开始，而且和参数值之间需要使用冒号（：）分开。另外在Sass中调用Mixins需要使用“@include”，然后在其后紧跟你要调用的Mixins名。
2. LESS：LESS中声明Mixins和CSS定义样式非常类似，可以将Mixins看成是一个选择器，当然Mixins也可以设置参数，并给参数设置默认值。不过设置参数的变量名是使用“@”开始，同样参数和默认参数值之间需要使用冒号（：）分开。
3. Stylus：Stylus和前两者也略有不同，他可以不使用任何符号，就是直接定义Mixins名，然后在定义参数和默认值之间用等号（=）来连接。

上面只是Mixins在三个CSS预处器的简单区别，详细的还可以进入他们的官网了解，或者对比一下上面的三段代码。

—— 大漠

继承（Inheritance）

在多个元素应用相同的样式时，我们在CSS通常都是这样写：

p,
ul,
ol {
  /* 样式写在这 */
}  

这样做非常的好，但往往我们需要给单独元素添加另外的样式，这个时候我们就需要把其中选择器单独出来写样式，这样一回来我们维护样式就相当的麻烦。为了应对这个问题，CSS预处理器可以从一个选择继承另一个选择器下的所有样式。

Sass和Stylus

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  @extend .block; /* 继承.block所有样式 */
  border: 1px solid #EEE;
}
ul, ol {
  @extend .block; /* 继承.block所有样式 */
  color: #333;
  text-transform: uppercase;
}  

上面的代码转译成CSS

.block, p, ul, ol {
  margin: 10px 5px;
  padding: 2px;
}
p {
  border: 1px solid #EEE;
}
ul, ol {
  color: #333;
  text-transform: uppercase;
}  

LESS

LESS支持的继承和Sass与Stylus不一样,他不是在选择器上继承，而是将Mixins中的样式嵌套到每个选择器里面。这种方法的缺点就是在每个选择器中会有重复的样式产生。

 .block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  .block; /* 继承 '.block'中的样式 */
  border: 1px solid #EEE;
}
ul, ol {
  .block; /*继承'.block'中的样式*/
  color: #333;
  text-transform: uppercase;
} 

转译出来的CSS代码

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  margin: 10px 5px;
  padding: 2px;
  border: 1px solid #EEE;
}
ul,
ol {
  margin: 10px 5px;
  padding: 2px;
  color: #333;
  text-transform: uppercase;
}

正如所看到的，上面的代码“.block”的样式将会被插入到相应的你要继承的选择器中，但需要注意是的优先级的问题。

导入（import）

在CSS中，并不喜欢用@import来导入样式，因为这样的做法会增加HTTP的请求。但是在CSS预处理器中的导入（@import）规则和CSS的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个CSS文件。如果你是通过“@import 'file.css'”导入“file.css”样式文件，那效果跟普通CSS导入样式文件一样。注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突。

Sass、LESS和Stylus

/* file.{type} */
body {
  background: #EEE;
}

@import "reset.css";
@import "file.{type}";
p {
  background: #0982C1;
} 

转译出来的CSS

@import "reset.css";
body {
  background: #EEE;
}
p {
  background: #0982C1;
}  

颜色函数

颜色函数是CSS预处里器中内置的颜色函数功能，这些功能可以对颜色值进行处理，例如颜色的变亮、变暗、渐变颜色等处理十分的方便。

Sass

lighten($color, 10%); /* 返回的颜色在$color基础上变亮10% */
darken($color, 10%);  /* 返回的颜色在$color基础上变暗10% */
saturate($color, 10%);   /* 返回的颜色在$color基础上饱和度增加10% */
desaturate($color, 10%); /* 返回的颜色在$color基础上饱和度减少10% */
grayscale($color);  /* 返回$color的灰度色*/
complement($color); /* returns complement color of $color */
invert($color);     /* 返回$color的反相色 */
mix($color1, $color2, 50%); /* mix $color1 with $color2 with a weight of 50% */ 

这只是Sass中颜色函数的一个简单列表,更多详细的介绍你可以阅读Sass文档。

颜色函数何以运用到任何一个元素上都是一个有颜色的CSS属性，下面是一个简单的例子：

$color: #0982C1;
h1 {
  background: $color;
  border: 3px solid darken($color, 50%);/*边框颜色在$color的基础上变暗50%*/
}  

LESS

lighten(@color, 10%); /* 返回的颜色在@color基础上变亮10% */
darken(@color, 10%);  /* 返回的颜色在@color基础上变暗10%*/
saturate(@color, 10%);   /* 返回的颜色在@color基础上饱和度增加10% */
desaturate(@color, 10%); /* 返回的颜色在@color基础上饱和度降低10%*/
spin(@color, 10);  /* 返回的颜色在@color基础上色调增加10 */
spin(@color, -10); /* 返回的颜色在@color基础上色调减少10 */
mix(@color1, @color2); /* 返回的颜色是@color1和@color2两者的混合色 */  

LESS的完整颜色函数功能，请阅读LESS 文档

下面是LESS中如何使用一个颜色函数的简单例子

@color: #0982C1;
h1 {
  background: @color;
  border: 3px solid darken(@color, 50%);
}  

Stylus

lighten(color, 10%); /* 返回的颜色在'color'基础上变亮10% */
darken(color, 10%);  /* 返回的颜色在'color'基础上变暗10% */
saturate(color, 10%);   /* 返回的颜色在'color'基础上饱和度增加10% */
desaturate(color, 10%); /* 返回的颜色在'color'基础上饱和度降低10% */  

有关于Stylus的颜色函数介绍，请阅读Stylus文档

下面是Stylus颜色函数的一个简单实例

color = #0982C1
h1
  background color
  border 3px solid darken(color, 50%)  

运算符（Operations）

我们都向往在CSS做一些运算，但是无法实现。但是在CSS预处器中对样式做一些运算是一点问题都没有了，例如：

Sass、LESS和Stylus

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: 100px - 50px;
  left: 10 * 10;
}  

实际运用

我们介绍了CSS预处理器各方面的特性，但我们还没有实战过。下面是CSS预处理器应用的一些例子。

属性前缀

这是宣传CSS预处理器的原因之一，并且是一个很好的理由，这样可以节省大量的时间和汗水。创建一个minxin来处理浏览器的前缀问题是一个很简单的，并且能节省大量的重复工作和痛苦的代码编辑，我们来看一个例子。

Sass

 @mixin border-radius($values) {
  -webkit-border-radius: $values;
     -moz-border-radius: $values;
          border-radius: $values;
}
div {
  @include border-radius(10px);
} 

LESS

.border-radius(@values) {
  -webkit-border-radius: @values;
     -moz-border-radius: @values;
          border-radius: @values;
}
div {
  .border-radius(10px);
}  

Stylus

border-radius(values) {
  -webkit-border-radius: values;
     -moz-border-radius: values;
          border-radius: values;
}
div {
  border-radius(10px);
}  

转译出来的CSS

div {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}  

浏览器前缀的问题，主要是针对于CSS3属性的运用，众所周知，CSS3的属性有并不是所有浏览器都支持属性的标准语法，因此在实际运用中时，不得不加上各浏览器的前缀来识别，这对于我们前端人员来说是多么苦逼的一件事情。虽然有prefix这样的js脚本帮我们解决，但对于怎么说也需要额外添加一个脚本文件，这对于追求完美的同学来说可能完法接受。

现在多了一种解决方案，就是使用CSS预处理器，如上面圆角的实现方法，这样减轻了我们很多工作量。如果你对这一部分实现方法感兴趣，不仿花时间阅读一下以下源码：

1. cssmixins：由 Matthew Wagerfield整理的CSS3属性在三种预处理器中的Mixins的定义： LESS、 Sass (还有 SCSS)和 Stylus
2. LESS-Prefixer
3. Custom User @mixins

—— 大漠

3D文本

使用text-shadow的多重属性制作 3D文本效果是一个很好的方法。唯一麻烦的问题就是修改文本阴影的颜色。如果我们使用Mixin和颜色函数的话，实现3D文本效果就非常的轻松了，我们来尝试一下。

Sass

@mixin text3d($color) {
  color: $color;
  text-shadow: 1px 1px 0px darken($color, 5%),
               2px 2px 0px darken($color, 10%),
               3px 3px 0px darken($color, 15%),
               4px 4px 0px darken($color, 20%),
               4px 4px 2px #000;
}
h1 {
  font-size: 32pt;
  @include text3d(#0982c1);
}  

LESS

.text3d(@color) {
  color: @color;
  text-shadow: 1px 1px 0px darken(@color, 5%),
               2px 2px 0px darken(@color, 10%),
               3px 3px 0px darken(@color, 15%),
               4px 4px 0px darken(@color, 20%),
               4px 4px 2px #000;
}
span {
  font-size: 32pt;
  .text3d(#0982c1);
}  

Stylus

text3d(color)
  color: color
  text-shadow: 1px 1px 0px darken(color, 5%), 2px 2px 0px darken(color, 10%), 3px 3px 0px darken(color, 15%), 4px 4px 0px darken(color, 20%), 4px 4px 2px #000
span
  font-size: 32pt
  text3d(#0982c1)  

在Stylus中text-shadow的样式写在一行，是因为stylus中省略了花括号（｛｝）和分号（;）。

上面三种方法实现的效果都是一样的：

列（Columns）

我第一次接触CSS预处理器的时候，我就想着使用数字或者变量进行运算。使用数值和变量运算，可以很方便的实现适应屏幕大小的布局处理。只需要定义宽度的变量，我们就可以很方便的根据需求实现布局。下面的例子就是这么做的。

Sass

$siteWidth: 1024px;
$gutterWidth: 20px;
$sidebarWidth: 300px;
body {
  margin: 0 auto;
  width: $siteWidth;
}
.content {
  float: left;
  width: $siteWidth - ($sidebarWidth+$gutterWidth);
}
.sidebar {
  float: left;
  margin-left: $gutterWidth;
  width: $sidebarWidth;
} 

LESS

@siteWidth: 1024px;
@gutterWidth: 20px;
@sidebarWidth: 300px;
body {
  margin: 0 auto;
  width: @siteWidth;
}
.content {
  float: left;
  width: @siteWidth - (@sidebarWidth+@gutterWidth);
}
.sidebar {
  float: left;
  margin-left: @gutterWidth;
  width: @sidebarWidth;
}  

Stylus

siteWidth = 1024px;
gutterWidth = 20px;
sidebarWidth = 300px;
body {
  margin: 0 auto;
  width: siteWidth;
}
.content {
  float: left;
  width: siteWidth - (sidebarWidth+gutterWidth);
}
.sidebar {
  float: left;
  margin-left: gutterWidth;
  width: sidebarWidth;
}  

转译出来的CSS

body {
  margin: 0 auto;
  width: 1024px;
}
.content {
  float: left;
  width: 704px;
}
.sidebar {
  float: left;
  margin-left: 20px;
  width: 300px;
}  

明显的怪癖

使用CSS预处器都是有些怪癖的，我需要去寻找一些这样的人，如果你真的对这些感兴趣，你可以去搜索他们以及相关的文档，因为在你使用CSS预处理器非常有帮助。

错误报告

如果你经常使用CSS，你会发现很难找到CSS中出错的地方。也许你也会像我一样，花一下午的时间，发了疯的注解每行样式代码来寻找这个CSS错误。

CSS预处理器就轻松多了，他会给你报告错误。你可以阅读这篇文章，学习如何让CSS预处理器报告错误。

注释(Comments)

CSS预处理器支持“/* */”这样的多行注释方式（类似于CSS的注释方式），也支持“//”单行注释方式（类似于Javascript的注释方式）。

需要注意，如果你要压缩文件，你需要把所有注释都删除。

总结

三个预处理器我们都覆盖了（Sass、LESS和Stylus）,都以他们独特的特性完成了相同的效果。这样让开发人员更好的选择适合自己的CSS预处理器，从而更好的维护自己的代码，提高开发效率。

虽然不是开发的要求,但CSS预处理器可以节省大量的时间，并且有一些非常有用的功能。

我鼓励大家尽可能的尝试使用CSS预处理器，这样就可以有效的让你选择一个你最喜欢的和知道他为什么是受人青睐的。如果你还没有尝试过使用CSS预处理器来写你的CSS样式，我强烈建议你尝试一下。

如果你有最喜欢的CSS预处理器的功能，我并没有提到的，希望在下面的评论中与我们分享。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载烦请注明出处：

英文原文：http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout

中文译文：http://www.w3cplus.com/css/sass-vs-less-vs-stylus-a-preprocessor-shootout.html

在2012年，W3cplus每个月都为大家整理和推荐了一些优秀的jQuery插件。这些插件涉及到各方面的Web应用，资深的Javascript工程师可能不消这些插件，但对于Javascript不是很熟悉的同学，这些插件对我们平时的工作还是有很大的帮助。那么在2013年我们依旧会搜集和整理一些优秀的jQuery插件，希望这些插件能帮助大家解决工作中所遇到的效果。

今天为大家推荐的是2013年的第一期，在这期里面十个jQuery插件涵盖了响应式的网格布局插件、图片放大插件、表单元素中自定义select插件，google 地图插件、文件拖放上传插件、tooltip提示插件、3D旋转菜单等等。这些插件的官网都提供了详细的API和相关代码下载，也提供了一些案例展示，可以说稍懂一点前端的同学按照他们提供的API就会使用这些插件。

1、Makisu : jQuery CSS 3D Dropdown Menu concept

Makisu是一个jQuery和css3制作3D下拉菜单的插件，目前仅在chrome下能正常运行。

2、jQuery.Shapeshift

一款轻量级的网格系统插件，可以制作濗布流效果，同时具有拖动、Responsive和touch功能。

3、Rainbow

Rainbow是一个让你代码高亮显示的插件。

4、gmaps

gmaps用来制作google地图的一个插件。

5、jQuery jkit

jQuery jkit是一个依赖于jQuery库的插件，里面包含了Web常用交互效果。

6、dropzone.js

dropzone.js是一个js脚笨库，实用文件的拖拽上传文件，而且还可以预览上传后的文件。

7、Image Picker

Image Picker是一个简单的jQuery插件,它将一个选择元素变成一个更加友好的用户图形界面。

8、Elevate Zoom

Elevate Zoom是一款图片放大的jQuery插件。

9、Opentip

Opentip是一款强大的tooltip插件，支持所有现代浏览器以及IE7+浏览器。

10、Selectik

Selectik是一款自定义表单的select样式的jQuery插件。

如需转载，烦请注明出处：http://www.w3cplus.com/source/best-jquery-plus-2013-part1.html

这个效果我一拿到效果，让我惊叹了一翻，使用纯CSS3代码制作了一个莲花开放的效果，藤藤利用自己所掌握的CSS3知识将Niels Doorn使用js和CSS3制作的莲花开放的案例修改成了纯CSS3的案例。在这个案例中，最关键之处是莲花开放的八个花瓣开放时的时间配合与旋转角度的配合。藤藤为了调整这个时间，花费了不少精力。你看到这个DEMO也会像我一样惊叹。

demodownload

HTML CODE

案例的结构是非常的简单，就是用八个div当作莲花的八个花瓣

<section class="demo">  
  <div class="box">  
     <div class="leaf"></div>  
     <div class="leaf"></div>  
     <div class="leaf"></div>  
     <div class="leaf"></div>  
     <div class="leaf"></div>  
     <div class="leaf"></div>  
     <div class="leaf"></div>  
     <div class="leaf"></div>  
  </div>  
</section>

CSS CODE

这里所用到的CSS3知识点并不复杂，只是要对他的概念了解清楚。特别是动画属性animation里的每个属性值的概念，因为你没有理解清楚他们的概念你就无法配置好时间节点。接下来我们一起简单看看吧：

body {
   background-color: #d4d4d4;
}      

.demo {
   margin: 40px auto;
   width: 500px;
}
/*莲花花瓣的容器*/
.box {
   position: relative;/*设置相对定位，因为花瓣都要进行绝对定位*/   
   height: 400px;
}
/*花瓣进行绝对定位*/
.box .leaf {
   position: absolute;
}
/*绘制莲花花瓣*/
.leaf {
   margin-top: 400px;
   width: 300px;
   height: 300px;
   border-radius: 300px 0px;/*制作花瓣角*/
   background: -*-linear-gradient(45deg,  rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣颜色*/
   opacity: 0.5;
   filter:alpha(opacity=50);
   transform: rotate(45deg);/*花瓣旋转45deg*/
   transform-origin:  top right;/*重置花瓣旋转原点，这个很重要*/
}

上面的代码主要是一些基本样式，以及CSS3制作的莲花花瓣图。花瓣图的关键就是花瓣角和花瓣颜色的制作。

@keyframes show-2 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(71deg);
    }
}
@keyframes show-3 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(96deg);
    }
}
@keyframes show-4 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(123deg);
    }
}
@keyframes show-5 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(149deg);
    }
}
@keyframes show-6 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(175deg);
    }
}
@keyframes show-7 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(200deg);
    }
}
@keyframes show-8 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(225deg);
    }
}  

上面这部分代码很重要的哟，因为我们莲花开花的效果就依靠这些代码来实现，分给制作了八个花瓣旋转的动画效果，从而模仿出开花的效果。一个transform并不难，难得是和下面的时间点配合：

.leaf:nth-child(2) {
  animation: show-2 5s ease-in-out infinite;
}
.leaf:nth-child(3) {
  animation: show-3 5s ease-in-out infinite;
}
.leaf:nth-child(4) {
  animation: show-4 5s ease-in-out infinite;
}
.leaf:nth-child(5) {
  animation: show-5 5s ease-in-out infinite;
}
.leaf:nth-child(6) {
  animation: show-6 5s ease-in-out infinite;
}
.leaf:nth-child(7) {
  animation: show-7 5s ease-in-out infinite;
}
.leaf:nth-child(8) {
  animation: show-8 5s ease-in-out infinite;
}

通过CSS3的“:nth-child()”选择器，为每个花瓣调用自己对应的动画效果。这样一来莲花开放的效果就完成了。

所有CSS代码

body {
   background-color: #d4d4d4;
}      

.demo {
   margin: 40px auto;
   width: 500px;
}
/*莲花花瓣的容器*/
.box {
   position: relative;/*设置相对定位，因为花瓣都要进行绝对定位*/   
   height: 400px;
}
/*花瓣进行绝对定位*/
.box .leaf {
   position: absolute;
}
/*绘制莲花花瓣*/
.leaf {
   margin-top: 400px;
   width: 300px;
   height: 300px;
   border-radius: 300px 0px;/*制作花瓣角*/
   background: -*-linear-gradient(45deg,  rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣颜色*/
   opacity: 0.5;
   filter:alpha(opacity=50);
   transform: rotate(45deg);/*花瓣旋转45deg*/
   transform-origin:  top right;/*重置花瓣旋转原点，这个很重要*/
}
@keyframes show-2 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(71deg);
    }
}
@keyframes show-3 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(96deg);
    }
}
@keyframes show-4 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(123deg);
    }
}
@keyframes show-5 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(149deg);
    }
}
@keyframes show-6 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(175deg);
    }
}
@keyframes show-7 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(200deg);
    }
}
@keyframes show-8 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(225deg);
    }
}  
.leaf:nth-child(2) {
  animation: show-2 5s ease-in-out infinite;
}
.leaf:nth-child(3) {
  animation: show-3 5s ease-in-out infinite;
}
.leaf:nth-child(4) {
  animation: show-4 5s ease-in-out infinite;
}
.leaf:nth-child(5) {
  animation: show-5 5s ease-in-out infinite;
}
.leaf:nth-child(6) {
  animation: show-6 5s ease-in-out infinite;
}
.leaf:nth-child(7) {
  animation: show-7 5s ease-in-out infinite;
}
.leaf:nth-child(8) {
  animation: show-8 5s ease-in-out infinite;
}

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/lotus-open.html

特别声明：此篇文章由D姐根据Jason Michael的英文文章原名《Build a basic responsive site with CSS》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.netmagazine.com/tutorials/build-basic-responsive-site-css以及作者相关信息

——作者：Jason Michael

——译者：D姐

demodownload

响应式设计有很多误会，D姐根据Jason Michael通过带领我们搭建一个简单的响应式网站，来实现一些所谓的神话。

这篇文章首次出现在.net杂志的第 231号问题，这本杂志是全球web设计开发人员最钟爱的杂志

几乎每个人都在讨论响应式设计，但是我不敢确定每个人都理解他是用来做什么的？许多web设计者开发者希望我能解决这些存在的误解，而我也在尝试这么做。

简单来说，响应式设计不是专门为手机做网站，而是为了使网站布局适应多种设备大小设计的。

在这篇文章里，我将给你展现响应式设计背后的细节原则，所以我们需要真正理解这些原则。一旦我们理解了他，就可以在大屏幕小屏幕设备上，完美的呈现一个网站了。

响应式设计已经成为一个热门话题，原因有越来越多的人，使用手机设备访问互联网，如iPhone，ipad，黑莓。

一个网站不应该是只针对pc端，或是手机设备，而是应该一个布局适应不同设备大小，这个理解变得越来越重要。

如果你认为一个新发明会让我们对未来有一个憧憬,那么一个可以根据用户浏览设备自动适应的布局，将变成未来不可替代的主流。

媒体查询变得如此受欢迎的主要原因之一是基于一个事实，就是网站在设计和构建阶段，无法预估会在什么样的设备上面展现。他们变得难以控制，也许他们的固定宽比用户的浏览设备要宽很多，使得要找到他们查找的东西，很难放大或缩小。

很沮丧吧？当然。但是更沮丧的是，作为这些网站的一位开发者，是不是应该用一种办法让网站适应任何设备大小呢？

许多网站使用媒体查询隐藏他们认为不重要的内容部分。这样通过定制内容，就可以使得小屏幕设备的用户轻松使用网站。

但是为什么对于一个移动设备的用户，不能跟桌面用户从网站上获取同样的信息呢？

借助媒体查询我们完全可以根据屏幕尺寸定制我们网站的布局，这个很棒，但是我们确实需要提供网站的好几个尺寸，以适应屏幕大小吗？而且为什么我们不能把网站优雅的实现呢？

用户受挫

一些人认为削减一些他们认为对于用户不重要的内容，是可以的。但是，你怎么确定你删减的信息，或是放到第二页的内容，对于我而言不是最重要的呢？你不能确定。

举一个例子，我以前在我的苹果本上浏览 耐克的足球网站，阅读到有关足球学院在英超联赛的文章,我发现它真的很有趣，而这就是我浏览这个网站的主要原因之一。

然而，当我试图用iphone给我的一个朋友展示的时候，我突然发现耐克有一个专门的手机网站，而且耐克足球手机网站由这样两部分组成：一个是最新的比赛战靴，一个是用在比赛战衣上的新技术。而这两部分我都不感兴趣。

我尝试用ipad打开，他再次跟pc上显示的完全不同，而且仍旧没有我寻找的足球学院信息。

耐克网站并不是个例，像这样做的有成百上千的网站。我觉得很不爽，就因为我使用了不同的浏览设备，我就应该看到不同的页面，好像因为我的选择而应该受到这样的惩罚一样。我觉得如果内容不值得在小屏幕设备上显示，那么它可能不值得给任何人显示。

首先我们需要理解的是，响应式设计不是仅仅针对移动设备，而是考虑到所有的屏幕尺寸。其次，设计一个好的响应式网站，比单纯使用媒体查询并通过大量的网络设备测试，要花费更多的时间和精力，而最重要的是给你的网站提供尽可能一致的用户体验。

我们知道一个响应式网站只需要一个代码库，这一点很棒，它意味着我们不必为每个设备修改我们网站的内容。但是许多网站隐藏对于手机用户不必要看到的内容，这里就存在两个问题。

首先，它影响了浏览网站的手机用户的体验。其次，在我们样式表中隐藏的样式，并不意味这些内容不需要下载。尤其是对于那些访问速度慢的用户来说，就会大大影响性能。

也许最好的方法是为移动端或是更小的设备设计一个网站。首先，你可以关注哪些信息是网站需要提供的最重要的信息，如果有必要的话，你可以在小屏幕的设备上面，用到网格布局，大图片和媒体查询的地方，使用条件加载技术。

许多网站在移动设备上面无法使用的真正原因，是因为他们不能使用任何设备。如果在一开始规划设计的时候做足了准备，那么他就会向前向后兼容的很好。一个响应式的网站，并不是必须以移动设备为设计目标。如果他设计的很到位，那么他不必为任何设备设计，也会自动适配。Ethan Marcotte在他的《Responsive Web Design” from A List Apart》的一文中这样说道：“与其为日益增长的web设备设置很多断点，不如把他们当成相同的经历对待”。他写道：“我们可以设计一个很优秀的设计效果，如果把技术标准融入到我们的设计当中，那么不仅使得他们布局更加灵活，也能在设备上更好的渲染他们。总而言之，我们需要响应式设计实践”。

随着大量设备的改进，响应式设计不会完全阻碍新设备的改变，然而，他应该需要消除设备改进中的显示不同。我们通过他搭建的网站在ie6下面无法工作。这是一个让人疯狂的问题，我们花数小时为他写应用的hack。然而，真正在ie6下面出现的问题并不是很多，只是我们的网站搭建的错误而已。伴随着可用的web设备的大量涌入，我们搭建网站的一个重点就是，去适应这个改变。

分步解说

这篇文章的目的，就是为了让一个网站可以在大屏幕小屏幕设备上面的完美呈现。为所有尺寸的设备保留所有网站内容。而且借助媒体查询，我把水平显示的导航改为在小设备上面的垂直显示，并为用户提供足够的留白，以适应在触摸屏上显示的效果。

我尤其喜欢的一件事是，当你在浏览小屏幕网站，主导航填满整屏的时候，使用页面锚点可以跳到你感兴趣的内容上面。这块功能区出现在页面的头部，可以有效的帮助用户不必为看到主要内容，而必须向下不断的滚动。

Mediaqueri.es是一个很棒的网站，主要用于展示众多的网站在屏幕不一的设备上的显示情况。

响应式设计灵活的关键因素在于流体布局宽度。你需要做的所有就是，创建一个包裹元素，内容元素和列元素的宽度，用以适应不同的设备宽度。这个并不是新东西，然而这一点在现在是比以往更重要的。为了简单起见，我将给你展示如何创建一个流式布局的页面，这个页面是由导航，banner图片和两列组成，他们将考虑在各种尺寸设备的布局。你将会注意到我包含了一个respond.min.js的文件，这个是轻量级的插件，可以在ie6-8上面使用媒体查询。下面是基础的html结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title> Demo | Responsive Web</title>
  <meta name="viewport" content="width=device-width, minimumscale=
1.0, maximum-scale=1.0" />
   <link href="styles/main.css" type="text/css" rel="stylesheet">
   <!--[if lt IE 9]>
     <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
   <script type='text/javascript' src='scripts/respond.min.js'></script>
</head>
<body>
  <div id="wrapper">
    <header>
      <nav id="skipTo">
        <ul>
          <li>
            <a href="#main" title="Skip to Main Content">Skip to Main Content</a>
          </li>
        </ul>
      </nav>
      <h1>Demo</h1>
      <nav>
        <ul>
          <li><a href="#" title="Home">Home</a></li>
          <li><a href="#" title="About">About</a></li>
          <li><a href="#" title="Work">Work</a></li>
          <li><a href="#" title="Contact">Contact</a></li>
         </ul>
      </nav>
      <div id="banner">
        <img src="images/kaws.jpg" alt="banner" />
      </div>
    </header>
    <section id="main">
      <h1>Main section</h1>
      <p>Lorem…p>
    </section>
    <aside>
      <h1>Sub-section</h1>
      <p>Lorem …p>
    </aside>
  </div>
</body>
</html>	

当涉及到css，设置最大宽度是有效阻止，网站页面在超大屏幕上面无限扩展显示，这个对缩小页面不会有影响。当从固定宽度改为流式宽度，面临的一个主要问题是图片的显示尺寸。而这个问题在css中有个简单的解决方法，就是只需要设置图片的宽度是100%。

/* Structure */
#wrapper {
  width: 96%;
  max-width: 920px;
  margin: auto;
  padding: 2%;
}
#main {
  width: 60%;
  margin-right: 5%;
  float: left;
}
aside {
  width: 35%;
  float: right;
}
/* Logo H1 */
header h1 {
  height: 70px;
  width: 160px;
  float: left;
  display: block;
  background: url(../images/demo.gif) 0 0 no-repeat;
  text-indent: -9999px;
}
/* Nav */
header nav {
  float: right;
  margin-top: 40px;
}
header nav li {
  display: inline;
  margin-left: 15px;
}
#skipTo {
  display: none;
}
#skipTo li {
  background: #b1fffc;
}
/* Banner */
#banner {
  float: left;
  margin-bottom: 15px;
  width: 100%;
}
#banner img {
  width: 100%;
}	

现在你的图片将按照他的父元素宽度显示，并根据他的宽度变化而变化。只需要确保图片的最大宽度，不超过包含他的容器的最大宽度，否则他就可能显示在外面。使用这个办法要记住一点，就是你的图片要足够大，以适应最大的浏览设备尺寸。

使用大图片会影响加载时间，所以在小设备上面大图片是不需要的，这就需要一个方法，检查用户设备屏幕的尺寸，根据这个尺寸选择显示大图还是小图。然而使用这个方法仍旧是个不小的挑战，不过可以考虑一下。Mat Marquis，是一个jquery mobile团队的一个成员，他写了一篇很好的文章，就是关于这个方法的，其中阐述了这个方法的利弊。

主导航的改变

这样改变导航的主要原因是比例的缩放，使得可读性降低并且难以点击。使用这种方法，你可以让用户更方便的访问他。你也许注意到代码中的一些改变，main和aside区域显示也不同了，因为他们从两列变成了一列显示。

/* Media Queries */
@media screen and (max-width: 480px) {
  #skipTo {
    display: block;
  }
  header nav, #main, aside {
    float: left;
    clear: left;
    margin: 0 0 10px;
    width: 100%;
  }
  header nav li {
    margin: 0;
    background: #efefef;
    display: block;
    margin-bottom: 3px;
  }
  header nav a {
    display: block;
    padding: 10px;
    text-align: center;
  }
}

你可能注意到在一些移动设备，你的网站就自动瘦身以适应屏幕大小，这时我们就面临了一个问题是，必须放大浏览的内容。

想让你的媒体查询完全起作用，使得你的网站像一个真正的移动网站，就应该包含类似下面这些规则：

宽度属性控制屏幕显示的大小。它可以设置一个特定的像素宽度如960，或是设备宽度，也就是屏幕像素100%的。初始尺寸属性用于用户的首次加载页面。最大最小范围，用户可伸缩属性控制用户放大缩小页面。

正如我前面所说，响应式布局从来没有针对移动设备搭建网站，他是为了适应设备尺寸调整布局。一个响应式网站适应不同的设备，应该作为一个默认的情况。如果你想创建一个移动版本，为了看起来完全不同，只是为了显示最重要的内容，那么至少让用户可以看到整个网站。我们应该关注如何使用在运用响应式这个技术的前提下，创建一个更好的网站。

流式布局给予我们很大的帮助，而且我很兴奋的地方是，流式布局模块。众所周知，flexbox，提供了一个方法，就是在不需要计算宽高值，就可以在父元素内部自动调整子元素的尺寸。动态修改一个元素的尺寸，flexbox也给一个父元素提供了一些属性，用于控制空白的分布。如果你对于flexbox还不了解的话，你可以去看一下 Peter Gasston的文章。

开发人员必须考虑到，让每个人看到用相同的组织方式显示的相同内容。作为开发人员我们应该设定我们的最低标准，为每个人在任何地方，都看到同一个网站。

这篇教程已收到了来自Stephanie Rieger技术审查。

译者手语：初次翻译前端技术博文，整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载烦请注明出处：

英文原文：http://www.netmagazine.com/tutorials/build-basic-responsive-site-css/a>

中文译文：http://www.w3cplus.com/css3/build-basic-responsive-site-css.html

特别声明：此篇文章由Sunnylost根据Louis Lazaris的英文文章原名《JavaScript ‘this’ in Different Contexts》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.impressivewebs.com/javascript-this-different-contexts以及作者相关信息

——作者：Louis Lazaris

——译者：Sunnylost

JavaScript拥有一个名为this 的关键字，在JavaScript程序中的不同位置，this所引用的值会有所不同。

在这篇文章中，我将通过实例来总结几种不同的上下文和this在这些上下文中究竟代表什么意思。注意，所有例子都会假定你在浏览器中开发客户端JavaScript。

在全局上下文中

当你在全局上下文中(也就是说不在任何函数中)引用this 会发生什么？

console.log(this === window); // true  	

你可以将上面那行代码输入到开发工具的控制台，这样便可以在任意页面进行测试。

就像上面那段代码演示的那样，全局上下文中的this 指向了window 对象。观察下面的代码以及随后的输出：

this.message = "Check this out.";
window.message = "Check this out.";

console.log(this.message); // "Check this out."
console.log(window.message); // "Check this out."
console.log(message); // "Check this out."

你可以 使用这个JS Bin来看到代码执行的效果。

那么这里又发生了什么？前两行代码其实都在做同样的事情——创建一个名为“message”的全局变量并将它的值设置为“Check this out.”接下来三条控制台的输出信息证明了这一事实，这些输出内容完全一样。

在函数上下文中

当你在函数或是闭包中引用了this 结果又会如何？

在这个没有任何嵌套的函数中，this值取决于你是否使用了严格模式：

function checkThisOut () {
  console.log(this === window); // true
  console.log(this); // object global
}

checkThisOut();	

JS Bin 例子

你可以看到，这与在全局上下文中没有任何变化(就是说this 依然引用了window对象)

function checkThisOut () {
  "use strict";
  console.log(this === window); // false
  console.log(this); // undefined
}

checkThisOut();	

JS Bin demo

如果我理解正确的话，正如Nicholas Zakas指出的，”use strict”例子展现的行为就是为了防止意外的声明全局变量。这里可能包含着更多的含义，我并没有完全理解，但看起来这就是两段代码之间最大的区别。

在模块模式中

最近我讨论了在写JavaScript时我目前正在使用的模块模式

让我们来看看在一个这种模式的上下文中 this 值引用了什么。

var s,
  PrimaryNameSpace = {

    settings : {
      first: true,
      second: false,
      foo: 'bar'
    },

    init: function () {
      console.log(this); // references PrimaryNameSpace
    },

    nextMethod: function () {
    },

    anotherMethod: function () {
    }

  };

PrimaryNameSpace.init();	

JS Bin demo

在模块模式上下文中，每一个单独方法(即函数)中，this 将引用整个模块。实际上，如果你在开发工具中查看在 init() 方法内生成的控制台信息，你将看到类似下面的内容：

控制台显示了一个对象(命名空间，或者模块)，然后你深入挖掘这个对象就会看到不同的方法，以及所有定义在 settings 对象上的值。

因此，在 init() 方法中，你能够以下列方式使用 this 来引用模块及配置：

/* ... other code here ...*/

  init: function () {
    s = this.settings;
    this.nextMethod();
    this.anotherMethod();
    console.log(s);            
  },

/* ... other code here ...*/

PrimaryNameSpace.init();	

JS Bin demo

使用 this 来引用其他方法和配置可以防止我们写出形式很长的引用。下面这段代码与上面写的内容是等价的：

/* ... other code here ...*/

  init: function () {
    s = PrimaryNameSpace.settings;
    PrimaryNameSpace.nextMethod();
    PrimaryNameSpace.anotherMethod();
    console.log(s);
  },

/* ... other code here ...*/	

JS Bin demo

在这两种情况下，控制台消息将显示为：

对于一个嵌套函数呢？

但是，如果你在众多方法之一里包含了一个匿名函数，那么 this就会发生变化，你将无法通过 this来访问模块对象。此时就需要书写长形式的语法，如下所示：

/* ... other code here ...*/

  init: function () {
    s = this.settings;
    (function () {
      this.nextMethod();
      // [object Window] has no method 'nextMethod'
    })();
  },

/* ... other code here ...*/	

JS Bin demo

我在上面代码中插入的注释是从控制台显示的信息，这表明了在匿名函数中， this 是全局“window”对象的引用，而不是 PrimaryNameSpace 对象的引用。

并且如先前所示，使用严格模式将使 this 值变成undefined而不是全局对象的引用。

总结

如果没有其他意外，这篇文章将证明使用 this 是一种非常有用的捷径。但你需要时刻谨记于心的是：上下文是如何改变 this 的值以及它在严格模式中的表现。

对于这个话题我仅仅讲了些皮毛，这里有一些文章进一步讨论了 this关键字：

1. ‘this’ keyword on MDN
2. Fully understanding the ‘this’ keyword
3. JavaScript ‘this’ Gotchas

如果你对我上面所说内容有更正的话，请将它们添加在留言中，让我能够对应更新。

译者手语：初次翻译前端技术博文，整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

关于Sunnylost

08年开始自学java，09年加入北漂行列，从事Java Web工作，出于对JavaScript的喜爱，在2011年以外包身份进入新浪微博从事JS开发，目前就职于一淘。由于工作关系，逐步接触CSS，开始完善自身的前端技能。欢迎随时关注我：新浪微博

如需转载烦请注明出处：

英文原文：http://www.impressivewebs.com/javascript-this-different-contexts

中文译文：http://www.w3cplus.com/js/javascript-this-different-contexts.html

特别声明：此篇文章由杨礼鑫根据Hongkiat Lim的英文文章原名《20 Useful CSS Tips For Beginners》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.hongkiat.com/blog/20-useful-css-tips-for-beginners以及作者相关信息

——作者：Hongkiat Lim

——译者：杨礼鑫

过去就连一个镜像站点，我们都依靠大量的开发人员和程序员进行维护。得益于CSS和它的灵活性使得样式能够从代码中被独立抽离出来，从而让一个只具备基本CSS理论的初学者都能够轻易地改变网站的样式。

不论你是对用CSS建站感兴趣还是仅仅拿它让你的博客更有feel，打好基础才能盖高楼。下面让我们来看看一些对于初学者实用的CSS常识：

1、使用reset.css

火狐和IE这两种不同的浏览器，在绘制CSS样式方法上截然不同。这种情况下，使用reset.css重置所有的基本样式会让你得到一个全新的空样式表。

这儿有一些常用的reset.css框架——Yahoo Reset CSS、Eric Meyer’s CSS Reset和Tripoli。

扩展阅读

1. Html5的Reset 和Base样式的结合
2. Drupal主题的基础样式—reset、base、layout、print
3. CSS reset的重新审视 – 避免样式重置
4. 目前比较全的CSS重设(reset)方法总结
5. Reset CSS研究（八卦篇）
6. HTML5 Reset Stylesheet
7. normalize.css
8. Reset restarted
9. CSS Frameworks + CSS Reset: Design From Scratch
10. Quick Tip: Create Your Own Simple Reset.css File
11. NO CSS RESET
12. http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/
13. CSS-reset

2、CSS缩写

CSS缩写简化了你的CSS代码，更重要的是，它让你的代码更加整洁易懂。

不是像这样创建CSS

.header {
  background-color: #fff;
  background-image: url(image.gif);
  background-repeat: no-repeat;
  background-position: top left; 

}	

而是像这样创建CSS

.header {
  background: #fff url(image.gif) no-repeat top left  
}  	

扩展阅读

1. Introduction to CSS Shorthand
2. Useful CSS shorthand properties
3. CSS Shorthand Guide
4. Efficient CSS with shorthand properties
5. Proper CSS Shorthand
6. Understanding CSS Shorthand
7. CSS shorthand reference
8. 5 CSS shorthand tips and how to optimize CSS
9. 6 CSS Shorthand Tricks Every Developer Should Know
10. Shorthand properties

3、理解class和id

这两个选择器总是让初学者感到迷惑。在CSS中，Class和ID分别用点“.”和井号“#”来标识。简单来说id就是用来标识那些单独不重复的样式，而class是可以重复使用的。

扩展阅读

1. Class vs. ID
2. When to use Class, ID
3. Applying Class and ID together
4. The Difference Between ID and Class
5. Multiple Class / ID and Class Selectors
6. When using IDs can be a pain in the class...

4、实用的<li>

<li>也叫链接列表，在与<ol>或<ul>正确搭配的时候非常好用，尤其是用在导航菜单样式上。

扩展阅读

1. Taming Lists
2. Amazing LI

5、少用<table>多用<div>

CSS最大的优势之一是使用<div>达到样式上的灵活多变。不同于<table>，<div>里的内容不会被锁在单元格<td>中。可以说几乎所有的表格布局都可以在<div>和样式的正确使用下完成。当然，有大量表格内容时，还是用 <table>吧。

扩展阅读

1. Tables are dead
2. Tables Vs. CSS
3. CSS vs tables
4. Table Layouts vs. Div Layouts: From Hell to… Hell?

6、CSS调试工具

在设计CSS时，能够得到页面布局的预览对于优化CSS样式和纠错是很有帮助的。这里有一些免费的CSS调试工具推荐给你，你可以把它装在浏览器上：FireFox Web Developer、DOM Inspector、Internet Explorer Developer Toolbar、Firebug

7、避免多余的选择器

有时你的CSS声明可以更简单，特别是你发现你的代码和下面的类似:

ul li { ... }  	

ol li { ... }  	

table tr td { ... }  	

它们可以简化为：

li { ... }

td { ... }

如上是因为<li>会且只会与<ul>或<ol>连用，就像<td>只能存在于<tr>和<table>中一样，这儿真没有把它们重复一次的必要。

8、!Important

所有被!important 标记的样式，即使它后来被重写，浏览器也只会采用被标记的那条。

.page {
  background-color:blue !important;
  background-color:red;
}	

比如上面的例子，因为background-color:blue 被标记为!important ，即使后来有把背景改成红色的语句，也只采用被标记的那条。!important 用来强制使一个样式避免在之后的编码中被修改，遗憾的是IE不支持。

扩展阅读

1. !important CSS Declarations: How and When to Use Them
2. When Using !important is The Right Choice
3. Everything You Need to Know About !important CSS Declarations
4. UNDERSTANDING CSS SPECIFICITY

9、图像替代文本

这招经常被用来把一个基于文本的<h1>title</h1>标题换成图片。按照如下所示：

h1 {
  text-indent:-9999px;
  background:url("title.jpg") no-repeat;
  width:100px;
  height:50px;
}	

解释说明： text-indent:-9999px; 利用缩进把文本撤掉，然后用指定了背景和长宽的图片代替。

扩展阅读

1. 十种图片替换文本CSS方法
2. 可用性更好的CSS隐藏文字技术(CSS图片替换文字)
3. Nine Techniques for CSS Image Replacement
4. Using background-image to replace text
5. Dynamic Text Replacement

10、理解CSS的定位position

下列文章阐述了CSS定位position: {...}的理解和用法。

扩展阅读

1. 十步图解CSS的position
2. CSS Positioning 101
3. Using Absolute Positioning in CSS
4. Detailed Positioning
5. An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning
6. Absolute, Relative, Fixed Positioning: How Do They Differ?

11、@import vs <link>

有两种方法可以外部引用CSS文件：@import和<link>

. 如果你不确定用哪种，Difference Between @import and link一文可以帮你选择。

扩展阅读

1. 诡异的@import
2. 高性能网站设计：不要使用@import
3. What’s the Best Way to Add CSS to a Web Page?
4. Four methods of adding CSS to HTML

12、CSS表单设计

在CSS中，设计和制定网页表格变得非常容易。以下几篇文章可以教你怎么做：Table-less form、Form Garden、Styling even more form controls、formee。

13、设计灵感来源

如果你是想寻找一些杰出的基于CSS的网站来激发灵感，或者只是找一些好的UI，这里推荐几个网站：

1. 20个免费下载PSD设计网站
2. 16+国外优秀的UI设计资源库
3. CSS Remix
4. CSS Reboot
5. CSS Beauty
6. CSS Elite
7. CSS Mania
8. CSS Leak

不够？来个合集74 CSS Galleries

14、CSS圆角

这篇文章教你怎么用CSS制作跨浏览器的圆角边框。

15、操持代码整洁

要是你的CSS代码散乱，编完了你会发现它们乱七八糟。回顾的时候，肯定也是困难重重。对于初学者来说，最好排版规范，注释恰当。

扩展阅读

1. 12 Principles For Keeping Your Code Clean
2. Format CSS Codes Online

16、排版度量: Px Vs Em

排版的时候，如何选择度量单位px或em?如果你感到有疑惑？下面几篇文章或许能够让你更好的理解度量单位。Units of Measurement in CSS、CSS Font size explained、Using Points, Pixels, Ems, or Percentages for CSS Fonts。

扩展阅读

1. CSS中强大的EM
2. CSS FONT-SIZE: EM VS. PX VS. PT VS. PERCENT
3. Which font sizing is best? EM vs PX vs %
4. px – em – % – pt – keyword
5. Understanding em Units in CSS

17、CSS浏览器兼容表

我们都知道不同的浏览器对于CSS渲染方式也不相同。有个参考，图表或者清单来说明各种浏览器对CSS的兼容状况是很有用的：

CSS 支持表格: #1, #2, #3, #4.

18、CSS中多列布局

是不是在设计中遇到左，中，右的多列问题？接下来几篇文章或许对你有帮助:

1. In Search of the Holy Grail
2. Faux Columns
3. Top reasons your CSS columns are messed up
4. Litte Boxes (examples)
5. Multi-Column Layouts Climb Out of the Box
6. Absolute Columns

19、使用免费编辑器

专用的编辑器总比记事本强吧。这儿有几个不错的推荐：Simple CSS、Notepad ++、A Style CSS Editor

20、理解媒体类型

当你用<link>的时候可能会遇到媒体类型。print, projection和screen是有时会用到的类型。理解和适当的使用它们可以让用户易于访问。

扩展阅读

1. CSS3 Media Queries
2. CSS and Media Types
3. W3 Media Types
4. CSS Media Types
5. CSS2 Media Types
6. CSS3 Media Queries模板
7. 使用em单位创建CSS3的Media Queries
8. iPads和iPones的Media Queries

译者手语：初次翻译前端技术博文，整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

关于杨礼鑫

毕业于武汉大学，是一名专业的PHP程序员。强烈的兴趣爱好在计算机图形学，特效，3D和游戏，还有前端，才培养的；喜欢设计和创意。欢迎随时关注我：新浪微博

如需转载烦请注明出处：

英文原文：http://www.hongkiat.com/blog/20-useful-css-tips-for-beginners

中文译文：http://www.w3cplus.com/css/20-useful-css-tips-for-beginners.html

这个Demo是一位在校大三的学生白牙制作的，从今天开始白牙同学也将为大家带来很多CSS3的DEMO效果，将会涉及各个方面的UI效果，比如说常见的Button UI，Form UI，Menu UI等等。同样这些CSS3 UI效果都是将国外的一些优秀的UI设计图（psd）转换成CSS代码，让更多的学习受益，同时将在W3cplus上打造一个优秀的UI库，这个库里的代码可以随时使用，可以随时拿来学习。

白牙第一次给大家带来的案例是通过CSS3的渐变属性、阴影、CSS3的伪类和@font-face属性制作的添加物品到购物车的效果。如果你喜欢就往下看吧。

demodownload

HTML结构

制作这个效果所需的结构非常的简单，就是一个Button标签，当然也有人使用a标签制作。

<button name="add to card" type="button" class="blue">add to cart</button>
<button name="add to card" type="button" class="green">add to cart</button>
<button name="add to card" type="button" class="purple">add to cart</button>
<button name="add to card" type="button" class="yellow">add to cart</button>
<button name="add to card" type="button" class="blueness">add to cart</button>

不产同的颜色按钮设置了一个颜色类名，比如此处所示的“blue”、“green”、“purple”、“yellow”和“blueness”，大家可以根据自己的所需，定义适合自己的类名。

CSS代码

这里使用的CSS相对简单，就是几个知识点，也是大家常见的。

/*默认样式*/
body {
  background-color:rgb(230,230,230);
}
.demo {
  width: 235px;
  margin: 50px auto;
}
/*按钮基本样式*/
button {
  line-height:48px;
  padding:0 25px 0 85px;
  position:relative;
  color:#fff;
  border:none;
  border-radius:3px;/*按钮圆角实现*/
  font-size:15px;
  font-weight:bold;
  text-transform:uppercase;
  text-shadow: 0 1px 1px rgba(0,0,0,0.8);/*文字阴影*/
  margin:10px;
}
/*使用伪类制作购物车*/
button:before {
  content:"b";
  font-family:'cart-icon';
  font-size:30px;
  text-transform:none;
  text-shadow: 0 1px 0 rgba(0,0,0,1);
  position:absolute;
  left:-1px;
  top:-1px;
  background-color:rgb(80,82,78);
  height:48px;
  width:60px;
  color:#fff;
  border-radius:3px 0 0 3px;
  border:1px solid rgb(75,75,75);
  border-right:none;
  box-shadow:inset 1px 1px 0 rgb(120,120,120);/*盒子阴影*/
  z-index: 3;
}
/*蓝色按钮效果*/
.blue {
  background-image:-*-linear-gradient(top,rgb(120,170,210),rgb(104,157,193));
  border:1px solid rgb(81,132,171);
  box-shadow: inset -1px 1px 0 rgb(154,194,221),0 1px 0 rgb(182,182,180),0 2px 0 rgb(197,195,197),0 3px 0 rgb(211,213,210);
}
/*绿色按钮效果*/
.green {
  background-image:-*-linear-gradient(top,rgb(80,188,98),rgb(65,172,86));
  border:1px solid rgb(64,152,80);
  box-shadow: inset -1px 1px 0 rgb(137,207,152),0 1px 0 rgb(182,182,180),0 2px 0 rgb(197,195,197),0 3px 0 rgb(211,213,210);
}
/*黄色按钮效果*/
.yellow {
  background-image:-*-linear-gradient(top,rgb(150,130,72),rgb(108,94,53));
  border:1px solid rgb(147,129,75);
  box-shadow: inset -1px 1px 0 rgb(170,163,123),0 1px 0 rgb(182,182,180),0 2px 0 rgb(197,195,197),0 3px 0 rgb(211,213,210);
}
/*紫色按钮效果*/
.purple {
  background-image:-*-linear-gradient(top,rgb(140,90,164),rgb(130,73,149));
  border:1px solid rgb(155,90,175);
  box-shadow: inset -1px 1px 0 rgb(160,120,180),0 1px 0 rgb(182,182,180),0 2px 0 rgb(197,195,197),0 3px 0 rgb(211,213,210);
}
/*浅蓝色按钮*/
.blueness {
  background-image:-*-linear-gradient(top,rgb(82,180,181),rgb(65,162,163));
  border:1px solid rgb(73,163,167);
  box-shadow: inset -1px 1px 0 rgb(128,199,199),0 1px 0 rgb(182,182,180),0 2px 0 rgb(197,195,197),0 3px 0 rgb(211,213,210);
}
/*调用服务器字库制作icon*/
@font-face {
  font-family: 'cart-icon';
  src: url('font/cart-icon.eot');
  src: url('font/cart-icon.eot?#iefix') format('embedded-opentype'),
  url('font/cart-icon.svg#cart-icon') format('svg'),
  url('font/cart-icon.woff') format('woff'), 
  url('font/cart-icon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}	

demodownload

关于白牙

网络昵称白牙，大三学生，就读于华南师范大学，现居广州。对HTML5、CSS3、javascript、前端UI开发有浓厚兴趣。请关注我：新浪微博

如需转载，烦请注明出处：http://www.w3cplus.com/demo/add-to-cart-button.html

特别声明：此篇文章由Sunnylost根据Desi Reuben-Sealey的英文文章原名《10 easy and useful ways to improve your jQuery coding and performance》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.i3lance.co.uk/2012/07/10-easy-and-useful-ways-to-improve-your-jquery-coding-and-performance以及作者相关信息

——作者：Desi Reuben-Sealey

——译者：Sunnylost

像这样的最佳实践清单你肯定见过不止一次了，而我这里列出的是把曾经别人教会我的内容组合起来。我也通过互联网和自学，来提高自己的技术。但你需要注意，Google能成为你最好的朋友，也能变成最可怕的敌人(时刻记得分辨搜索内容的准确性！)。

下面所列出的技巧非常容易掌握，不需要你有深厚的知识，也没有按照特定的顺序，它们的目的就是为了提高你的技术，让浏览器更快的解析你的代码；

1、永远使用最新版本(如果可能的话)

jQuery在不断的开发与改进，为了避免重复的更新本地版本，可以使用下面的代码片段：

<script src="//ajax.googleapis.com/ajax/libs/jquery/latest/jquery.js" type="text/javascript"></script>	

一个好的建议是，根据你的项目环境，最终选择一个固定的版本。

2、使用For来代替Each

这是Jon Banner(我的好哥们与前同事)教会我的。在帮我写了一些代码之后(大约4年多前)。

var array = new Array ();  
for (var i=0; i<10000; i++) {  
  array[i] = 0;  
}	

有众多来源表明，在线上代码中，使用for循环比Each循环速度要快100%(在毫秒级)。

3、使用return false

你是否遇到过为一个或多个元素绑定click事件函数，一旦点击元素后页面跳回到了顶部？当页面很长的时候，这个问题毫无疑问会变得非常烦人。你可以这样：

$('#element').click(function(){
  // do something...
  return false;
});	

4、划分你的代码

对我来说这条技巧就是大救星。如果你像我一样构建或管理大型网站，你一定不会希望每次页面(或一个特定的页面模板)触发时加载所有的JavaScript文件。

这个方法与JavaScript或ActionScript语言中的switch函数类似，但与之不同的是你对哪些能够调用拥有控制权，而不是像switch方法是预先定义好的。

这样一来，浏览器就不需要把JavaScript文件里的所有函数都加载并运行了。

var mylib =
{
  primary_functions :
  {
    init : function()
    {
       // 这里写方法
    }
  },
  specific_template_functions :
  {
    init : function()
    {
      // 这里写方法
    }
  }
}
$(window).load(function(){
  // 在HTML载入后再去加载通用脚本会更有效率。
  mylib.primary_functions.init();
});	

“specific_template_functions”函数可以在特定模板或页面载入时被调用。对于5-10行代码来说，使用这种方式不会起到任何作用，但是它对于那些想要通过划分大块代码来养成良好习惯的人来说是个不错的尝试。

5、合并压缩你的JavaScript

当你的网站进入测试阶段时，你可能意识到网站引用了不止一个JavaScript文件或插件。把它们合并成一个文件。合并多个文件与让浏览器加载并读取多个文件相比，始终是更快和更好的做法。

6、避免操作DOM

这么做是有原因的，其中一些与网站可访问性有关。例如，当你“绝对需要”一些文字或元素被屏幕阅读软件读取时，如果浏览器禁止了脚本那你就遇到大麻烦了，就像末日来临，世界被黑暗笼罩——你肯定懂我的意思。按照我的经验，当你在做一些动态效果、为页面增加一些装饰时会这么做，但是最终你还是会尽可能的减少这样的操作。

.append()，.prepend()和.after()(我认为)与.html()相比在相同时间内会消耗更多的资源。在插入前将需要插入的内容构建好会更符合逻辑。所以：

var yourlist = '';  
for (var i=0; i<1000; i++) {  
  yourlist += '<li>'+i+'</li>';  
}  
('#list').html(yourlist); 	

7、通过正确的节点标示符来遍历HTML

通过ID查找元素比通过class要快很多。没有必要提供例子了，不过如果你真的需要一个例子，请告诉我。

8、速查表

这是一个能够让你在写程序时不会忘记大多数可用函数的好办法。这里提供一些(有些是我最喜欢的)：

1. Oscar Otero’s API指南
2. Antonio Lupetti的速查表

9、在页面底部加载你的jQuery文件

总之，真的应该在页面底部去加载代码。当然如果你需要在页面中调用经过划分后的代码，可以使用前面介绍过的window的load函数，但也应该放在底部。

$(window).load(function() {
  // It's more efficient to load any generic scripts after the HTML has loaded.'
});	

10、返回页面中元素的个数

这是找出页面中元素个数的既简单又快捷的方法：

$('element').size();	

译者手语：初次翻译前端技术博文，整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

关于Sunnylost

08年开始自学java，09年加入北漂行列，从事Java Web工作，出于对JavaScript的喜爱，在2011年以外包身份进入新浪微博从事JS开发，目前就职于一淘。由于工作关系，逐步接触CSS，开始完善自身的前端技能。欢迎随时关注我：新浪微博

如需转载烦请注明出处：

英文原文：http://www.i3lance.co.uk/2012/07/10-easy-and-useful-ways-to-improve-your-jquery-coding-and-performance/

中文译文：http://www.w3cplus.com/js/10-easy-and-useful-ways-to-improve-your-jquery-coding-and-performance.html

特别声明：此篇文章由杨礼鑫根据Paulund的英文文章原名《Understanding The Viewport Meta Tag》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.paulund.co.uk/understanding-the-viewport-meta-tag以及作者相关信息

——作者：Paulund

——译者：杨礼鑫

在设计网页时，响应式设计是众多考虑之一。有一个问题就是，你做的网站到底需不需要响应式设计？

在我认为所有面向大众的网站都应该把响应式设计纳入考虑范围。当然一些朋友会觉得这没必要，因为在使用 移动设备的时候可以利用缩放来浏览我们感兴趣的内容，但我还是认为开发人员应该让你的网站在任何设备上都方便浏览。

什么是响应式设计？

响应式设计是一种让你的网页在不同尺寸的设备上都能够自适应的设计方式，依据你设置的断点，通过CSS文件的 媒体查询改变网页元素的样式来实现。仅仅在一些元素上添加width:100%样式都能够让他们适应不同的屏幕。

断点会为不同宽度范围下的内容指定各自的CSS样式，特别是比如一些尺寸不一样的手机，7英寸平板，10英寸平板，13英寸笔记本和一般的显示器。

你可以使用像素宽度或者像素比来定义断点。下面一段代码教你如何使用 媒体查询。

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {
  /* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
  /* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
  /* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
  /* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {
  /* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
  /* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
  /* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
  /* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles */
}	

Boilerplate media queries

扩展阅读

1. CSS3 Media Queries
2. CSS3 Media Queries模板
3. 使用em单位创建CSS3的Media Queries 主标签
4. Responsive设计和CSS3 Media Queries的结合
5. iPads和iPones的Media Queries
6. 此像素非彼像素

定义视窗

视窗meta标签能告诉浏览器如何规范的渲染网页，然而你则需要告诉它视窗有多大。

视窗就是我们能看到页面的部分。举个栗子：好比你在手机上浏览网站，当你放大页面去看左上角的内容时，视窗的宽度会被设置为定值；当你已经能够看到整个的网页宽度，继续缩小页面时，视窗的宽度则会跟页面的宽度一致。

下面的例子给出了视窗meta标签的用法。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">	

代码以显示网页的屏幕宽度定义了视窗宽度。网页的比例和最大比例被设置为100%。

不同的浏览器视窗不同。大部分移动端浏览器都是用默认的980px宽度的视窗，这表示绘制网页时宽度是980px，通过缩小才能浏览整个网页。

屏幕尺寸越小的设备，在其显示的网页被显示的越小。如果你对比同一个网站分别在iphone和ipad上浏览，你会发现它在爱疯上会小得多。

改变视窗的赋值能够让你制定设备如何绘制网页。

视窗宽度

指定视窗宽就仿佛告诉了浏览器你的网页在这个宽度下显示是最合适的。你要是做了一个专门在iPhone上浏览的网页，那么你就设置视窗宽为320px.

<meta name="viewport" content="width=320">	

但是这不易于 响应式设计，因为当你在平板上浏览它的时候，它会被缩小到320px的区域中。在响应式设计中最好指定视窗宽和设备的屏宽一致。

<meta name="viewport" content="width=device-width">	

视窗缩放

在移动端，屏幕上开合手指可以控制缩放，但当你设定视窗宽和设备宽度一致时，你就没必要去放大浏览整个网页了。为了确保网页的初始显示不是放大过的，你可以用initial-scale属性来设置初值。

若用户在浏览过程中不需要缩放，你可以设置它为1。

<meta name="viewport" content="initial-scale=1">	

甚至是如果你连用户的滚屏操作都想禁止，你可以设置maximum-scale为1，这样就完全不能放大了。

<meta name="viewport" content="maximum-scale=1">	

几个视窗的例子

下图说明了一张图片在两个不同视窗中的显示。第一张是默认980px宽度视窗下的图片显示，第二章是320px宽度的视窗。

图片来自于：Apple explanation of viewport meta tag

视窗的理解

如果你还想看看更多关于使用不同尺寸视窗的例子，这儿有个Github项目包含了多视窗的设定。这个链接里面是一个移动端浏览器，从那你可以直观的看到效果。

理解视窗

译者手语：初次翻译前端技术博文，整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载烦请注明出处：

英文原文：http://www.paulund.co.uk/understanding-the-viewport-meta-tag

中文译文：http://www.w3cplus.com/css/understanding-the-viewport-meta-tag.html

Tooltip的效果，在Web上的运用对大家来说不在陌生了，然而很多tooltip的效果都是依赖于JavaScript或者jQuery来实现。但是随着IE6的慢慢死去，制作这样的效果是无需任何脚本语言来支持。今天我们一起来看一款使用CSS3制作的下拉工具条，也类似于tooltip的效果。在这个效果中比较难处理的是阴影色配合，另个整个效果最有特色的是CSS3属性选择器的运用。感兴趣的话继续往下看吧。

demodownload

HTML结构

<ul class="dropdownlist">
  <li class="list-1">
    <div class="list-wrapper">
      <a href="#">#</a>
      <ul>
        <li class="item-1"><a href="#1">"</a></li>
        <li class="item-2"><a href="#2">$</a></li>
        <li class="item-3"><a href="#3">!</a></li>  
      </ul>
    </div>
  </li>
</ul>

对于结构来说，大家都熟悉，典型的一个下拉菜单制作的结构，但这里需要注意，使用了一个“div.list-wrapper”容器包裹了链接下下拉项，主要是方便悬浮状态时，显示隐藏的工具体，但其实简单一点的话，这个容器可以完全去掉，只需要在外成的li上做悬浮效果，也能实现相同的功能。（在这里保留了白牙同学的原结构，未做处理。）

CSS代码

CSS代码也并不太复杂，主要的是CSS3属性选择器的灵活运用以及盒子阴影box-shadow与背景以及边框的容入，其次使用了渐变、transition、@font-face等属性辅助一些效果的制作。

/*默认样式*/
body {
  background:url("bg.jpg") center center no-repeat fixed #333;
  background-size: 100% 100%;/*背景图全屏显示，可以参考《CSS3 Background-size》一文*/
}

.demo {
  text-align: center;
  min-height: 200px;
}
.dropdownlist {
  display: inline-block;
  margin: 50px;
}
/*tooltip的实现*/
.dropdownlist li {
  list-style-type:none;
  position:relative;
}
.dropdownlist li a {
  font-size:20px;
  font-family:"signal-icon";
  text-align:center;
  line-height:48px;
  color:#fff;
  display:block;
  width:58px;
  height:48px;
  background-image:-*-linear-gradient(top,rgb(105,96,106),rgb(80,73,80));/*制作工具条背景色*/
  transition:all 500ms linear;/*设置动画过渡*/
  text-decoration:none;
}
/*下拉列表项容器样式*/
.list-wrapper {
  border-radius:4px;
  border:3px solid rgba(243,233,229,0.2);
  box-shadow:0 0 0 1px rgba(243,233,229,0.6);/*盒子阴影*/
  position:relative;
}
/*使用属性选择器控制需要的元素。详细参阅《CSS3 选择器——属性选择器》一文*/
.dropdownlist li[class^="list-"] {
  padding-bottom:20px;
}
.dropdownlist li[class^="list-"] .list-wrapper > a {
  font-size:30px;
  border:1px solid rgb(63,57,66);
  border-radius:3px;
  box-shadow:inset 0 1px 0 rgb(132,127,137),
             inset 0 -1px 0 rgb(73,66,71),
             inset 0 0 0 1px rgb(106,98,111),
             0 1px 0 rgb(137,121,118),
             0 2px 0 rgb(163,144,141),
             0 0 0 1px rgb(175,155,151);/*使用多阴影效果*/
                   
}
.dropdownlist li:nth-child(1)[class^="item-"] a {
  box-shadow: inset 0 1px 0 rgb(132,127,137),
  			  inset 0 -1px 0 rgb(73,66,71),
  			  inset 0 0 0 1px rgb(106,98,111),
              -1px 0 0 rgba(110,93,101,0.2),
              1px 0 0 rgba(110,93,101,0.2),
              0 -1px 0 rgba(110,93,101,0.2);
}
.dropdownlist li:nth-child(2)[class^="item-"] a {
  box-shadow: inset 0 1px 0 rgb(132,127,137),
  			  inset 0 -1px 0 rgb(73,66,71),
  			  inset 0 0 0 1px rgb(106,98,111),
              -1px 0 0 rgba(110,93,101,0.4),
              1px 0 0 rgba(110,93,101,0.4);
}
.dropdownlist li:nth-child(3)[class^="item-"] a {
  box-shadow: inset 0 1px 0 rgb(132,127,137),
  			  inset 0 -1px 0 rgb(73,66,71),
  			  inset 0 0 0 1px rgb(106,98,111),
              -1px 0 0 rgba(110,93,101,0.6),
              1px 0 0 rgba(110,93,101,0.6),
              0 1px 0 rgba(89,75,84,0.8),
              0 2px 0 rgba(89,75,84,0.6),
              0 3px 0 rgba(89,75,84,0.4);
}

.dropdownlist li[class^="item-"] > a {
  border:1px solid rgb(64,57,66);
  border-bottom:none;
}
.dropdownlist li:last-child[class^="item-"] > a {
  border:1px solid rgb(64,57,66);
}
.dropdownlist li:first-child[class^="item-"] > a{
  border-radius:3px 3px 0 0;
}
.dropdownlist li:last-child[class^="item-"] > a {
  border-radius:0 0 3px 3px;
}
.dropdownlist li[class^="item-"] > a:visited {
  color:#033e6b;
}

.dropdownlist li a:hover {
   background-image:-*-linear-gradient(top,rgb(90,80,80),rgb(65,68,65));
   cursor:pointer;
}

/*下拉列表默认隐藏*/
.dropdownlist li[class^="list-"] ul {
  position:absolute;
  left:-3px;
  top:130%;
  border-radius:4px;
  padding:0;
  border:none;
  transition: all 500ms ease-in;
  border:3px solid rgba(243,233,229,0.2);
  box-shadow:0 0 0 1px rgba(243,233,229,0.6);
  display: none;/*隐藏工具体*/
}
/*工具条icon的实现方法*/
.dropdownlist li[class^="list-"] ul:before {
  content:'';
  position:absolute;
  width:1px;
  height:1px;
  border:5px solid transparent;
  border-bottom-color:rgba(243,233,229,0.4);
  left:50%;
  top:-15px;
  margin-left:-5px;
}
/*悬浮时显示下拉工具条，实现tooltip效果*/
.dropdownlist li[class^="list-"]:hover ul {
  display:block;
}
/*调用服务器字体，详细参阅读《CSS3 @font-face》一文*/
@font-face {
  font-family: 'signal-icon';
  src:url('fonts/signal-icon.eot');
  src:url('fonts/signal-icon.eot?#iefix') format('embedded-opentype'),
    url('fonts/signal-icon.svg#signal-icon') format('svg'),
    url('fonts/signal-icon.woff') format('woff'),
    url('fonts/signal-icon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

demodownload

关于白牙

网络昵称白牙，大三学生，就读于华南师范大学，现居广州。对HTML5、CSS3、javascript、前端UI开发有浓厚兴趣。请关注我：新浪微博

如需转载，烦请注明出处：http://www.w3cplus.com/demo/css3-create-dropdown-tool.html

根据Responsive Resources一文思路整理的Responsive Design设计资源，在W3cplus已推出了两个部分：《Responsive Design资源之一：学习线路》和《Responsive Design资源之二：设计工具》，今天主要为大家推荐第三个部分——Responsive Design布局。

在布局篇中，主要分三个部分的内容，第一个部分的有关于流体网格布局的一些优秀教程，第二个部分是主要介绍具有响应式设计的网格系统，第三个部分是响应式设计中调整布局的相关教程。希望对大家学习Responsive设计的布局有所帮助。

一、流体网格教程

在这部分里，主要搜集了一些介绍流体网格系统的教程，这些教程清楚的指导我们如何在Web设计或者Web应用中使用流体网格系统来进行布局。如果你没有尝试过这些布局方法，强烈建议您抽点时间将下面的文章仔细阅读完，你会受益良多。

1、Fluid Grids

2、Five simple steps to designing grid systems - Part 5

3、Proportional Grids

4、Bearded's Responsive Grid

5、Responsive Design's Dirty Little Secret

6、Building fluid grid layouts in Adobe Dreamweaver CS6

7、Adaptive CSS-Layouts: New Era In Fluid Layouts?

二、网格工具

说起网格工具，那太多了，本站早前就针对网格工具做了一些资源的归类，比如说《30+ CSS Grid System》一文中搜集了近37款不同的网格系统；在《8个实用的响应式设计框架》一文中整理了二十多个适合Responsive设计的网格系统（框架）;另外在《16个优秀的Responsive CSS框架》一文中还整理了16款优秀的Responsive网格系统。说实话要是你有时间把这里面的网格系统，搞懂一两套，你就够用了。今天在这一块内容中，为大家挑出的是讨论比较多的一些Responsiv设计的网格工具，这里面具有网格系统，也有生成网格系统的工具。你可能会发现，这里面的一些网格系统，在前面三篇文章中都有推荐过，如果你以前没有看到，或者错过了，那么你现在可以了解或者学习一下。

1、GridSet

2、Gridless Boilerplate

3、Golden Grid System

4、Gridpak

5、Responsive Grid System

6、Fluid Baseline Grid

7、Responsify

8、Columnal

9、Semantic Grid System

10、Susy, Responsive grids for Compass

11、Gumby

13、1140 CSS Grid

14、Amazium

15、BluCSS

16、Inuit CSS

17、Singularity

18、Unit Grid System

19、Bourbon Neat

20、Bedrock Responsive Grid

三、调整布局

第三部分也是教程类部分，这里面的教程主要指导我们如何在Responsive Design中改变布局。

1、Multi-Device Layout Patterns

2、Content Choreography

上面总共整理了28个有关于Responsive Design布局方面的相关资源，其中有关于流体网格的教程有七篇，有关于Responsive Desgin网格工具方面有20篇，其中大部分都是一些优秀的网格系统，这系统网格系统都带有详细的API文档和相关的DEMO，使用也是相当的简单，可以拿来即用。另外还有两篇文章介绍了改变布局的一些方法和细节。希望这些资源能更好的帮助大学习Responsive Desgin的布局方面知识与细节。如果您有更好的分享可以在下面的评论中给我们留言。

特别声明：以上资源都是外文，如果您碰到打不开的链接，不用着急，开启您的VPN您就可以正常的阅读。此文所列资源都来自于：Responsive Resources（需要VPN才能正常打开）一文。

如需转载，烦请注明出处：http://www.w3cplus.com/source/responsive-resources-design-layout.html

社交媒体网站，这里主要指的是国外的几大网站，比如说：Facebook、Twitter、Google+、LinkedIN、Pinterest、Instagram和Youtube七个。今天不说别的，主要将其设计图尺寸发于大家参考，希望这这几张图对设计人员有所帮助。

社交媒体设计尺寸参考

1、Facebook参考尺寸：

Facebook Cover图： 851 x 315

Facebook Profile图： 180 x 180

2、Twitter参考尺寸：

Twitter Header图： 520 x 260

Twitter Profile图： 81 x 81

3、Google+参考尺寸：

Google+ cover图： 890 x 180

Google+ Profile图： 250 x 250

4、LinkedIN参考尺寸：

LinkedIN cover图： 646 x 220

LinkedIN Profile图： 100 x 60

5、Pinterest参考尺寸：

Pinterest Profile图： 160 x 165

6、Instagram参考尺寸：

Instagram Profile图： 110 x 110

7、YouTube参考尺寸：

YouTube Header图： 970 x 150

YouTube Avatar图： 55 x 55

详细的设计尺寸可以参考Tent Social制作的几张图：

特别声明，以上图片由Tent Social提供。

下载PDF文件

如需转载，烦请注明出处：http://www.w3cplus.com/source/social-media-design-blueprint-infographic.html

图片来源：http://tentsocial.com/bid/267887/The-Ridiculously-Exhaustive-Social-Media-Dimensions-Blueprint-INFOGRAPHIC

特别声明：此篇文章由David根据Louis Lazaris的英文文章原名《!important CSS Declarations: How and When to Use Them》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it以及作者相关信息

——作者：Louis Lazaris

——译者：David

早在90年代中期到后期起草的 CSS1规范中就介绍过!important，它能够帮助开发者和用户在修改样式表的时候轻松覆盖原本的权重。一直以来!important的用法几乎没变，只在CSS2.1中有一点变化，并且在CSS3规范中没有对它做任何添加和修改。

让我们来看一下!important是什么，以及在什么时候使用，如果你遇到类似情况，你就应该使用它。

层叠的概述

在我们对!important的正确用法进行探讨之前，让我们为本节的内容做个铺垫。之前，Smashing Magazine已经对CSS权重进行过深入的阐释。所以，如果你想详细了解CSS的层叠和权重关系就请读读这篇文章。

CSS权重早期在W3cplus中已进行翻译，如果您阅读英文有点吃力，可以阅读译文《你应该知道的一些事情——CSS权重》

——大漠

下面这个提纲描述了CSS文档是如何确定给不同的样式分配不同的权重的。在CSS规范中提及的关于层叠的一个大体概括：

• 找到所有作用于元素和属性的声明
• 一个样式是否作用于元素依赖于这个样式的权重和如下所示样式来源的顺序，下面这个列表中越靠前的权重越小:
  1. 用户代理声明（译注：如浏览器默认样式）
  2. 用户声明（译注：如用户浏览器选项设置或通过开发人员调试工具修改）
  3. 开发者声明（译注：如页面中引用的CSS）
  4. 带有!important的开发者声明
  5. 带有!important的用户声明
• 样式的应用依赖具体的情况，一个更加具体的选择器往往会比一个笼统选择器获得更大的权重。
• 样式的应用依赖样式出现的顺序（即，后面的会覆盖前面的）

从这个提纲中，你可能已经明白!important会如何改变权重以及它在层叠中扮演一个什么样的角色。接下来让我们看一下!important更多的细节。

语法和描述

!important为开发者提供了一个增加样式权重的方法。应当注意的是!important是对整条样式的声明，包括这个样式的属性和属性值（感谢Brad Czerniak指出其中的差别）。这里有个简单的代码示例可以清晰地说明!important是如何应用于原本的样式中的：

#example {
  font-size: 14px !important;	
}

#container #example {
  font-size: 10px;
}	

在上面的代码示例中，由于使用了!important，id为“example”的元素字号将被设置为14px。

如果不使用!important，第二个样式声明的代码块很自然地比第一个的权重要大，原因有二：在样式表中第二个代码块要比第一个出现的晚（即，它位列第二）；第二个代码块有更大的权重（是由两个id，#container #example组合而成，而不是只有一个id，#example。但是因为第一个代码块里面包含了!important，所以对于字号设置来说它有更大的权重。

见CSS权重与继承中关于权重的计算方法，如下图:

——译者：David

关于!important应该注意的一些地方：

1. 当!important第一次在CSS1中被介绍时是这样规定的，即一个由开发者声明的!important样式要比一个由用户声明的!important样式获得更大的权重。为了提高访问性，在CSS2 中它被颠倒了过来。
2. 如果!important被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被作用上!important。
3. 关键字!important必须放在一行样式的末尾并且要放在该行分号前，否则就没有效果。 （不过分号前的空格不会影响它）
4. 如果因为一些特殊原因，你不得不在一个代码块中声明两个同样的属性，那么请把!important加在第一个属性后面，因为这样做会让所有浏览器中第一个属性的权重更大，而IE6除外（这是一个只有IE6才有的hack，但是不会影响你的CSS）
5. 在IE6和IE7中如果你使用不同的单词替代!important（像!hotdog），这条CSS样式依然会获得更大的权重，但是其他浏览器却会忽略它。

针对第二点，译者作出如下标注：

.e{margin: 0 !important;}

那么就等价于

.e{
  margin-top: 0 !important; 
  margin-right: 0 !important; 
  margin-bottom: 0 !important; 
  margin-left: 0 !important;
}

——译者：David

何时该使用!important

使用任何技术的利弊都视情况而定。下面是我个人对如何有效使用!important的一些观点。

永不使用

非到万不得已不要用!important。如果你是出于懒惰使用!important，为了避免例行的调试而滥用它，那么你（或者是那些后继开发你项目的人）将会深受其害。

如果你并非滥用只是有偶尔用一下!important，同样，你很快就会发现你的样式会难以维护。正如上面我们讨论过的，本来，CSS会根据层叠和权重产生正常的作用顺序。但当你使用了!important就扰乱了原本的顺序，让更多的权重给了正常情况下本不应该获得这么多权重的样式。

如果你从不使用!important，那么这标志着你真正理解了CSS并且证明你在编写代码前经过深思熟虑。

正如古老的格言所说“永远不要说‘永不’”，所以接下来我们还是要来讨论!important的一些合理的用法。

帮助测试可访问性

正如前面提到过的，用户样式中可以包含!important声明，允许用户根据自己的特殊需求来给具体的CSS样式增加权重以帮助他们阅读和访问内容。

有特殊需求的用户可以把!important加到像font-size这样的打印属性上来加大字体，或者为了提高网页的对比度而把它加到与颜色相关的样式上。

下面这张Smashing Magazine首页的截图，展示的正是借助FireFox的开发人员工具把正常大小的文本用用户自定义样式覆盖后的效果：

在这个案例中，文本大小是随浏览器窗口大小可调节的，样式中并没有使用!important，所以用户定义的样式会忽略权重而覆盖开发者的样式。然而，如果body正文的文本大小是开发者使用!important来设置的，就算用户用更加具体的选择器定义了样式也不能覆盖这个文本大小的设置。因此，即使在用户样式的作用下，甚至是开发者自己滥用!important的情况下，这条包含!important的样式不仅解决了问题，还保持了文本大小的可调节性。

暂时解决紧急问题

总会有这样的情况发生——某个客户的线上网站出现了CSS的bug，你必须快速修复。在大多数情况下你应该会用Firebug或者其他的开发者工具来调试你的CSS代码并且最终修复它。但是，如果这个bug发生在IE6或者是其他没有提供调试工具的浏览器上的时候，你可能需要使用!important来完成快速修复。

当你用这个临时修复的办法让网站继续上线以后（这样可以先摆平客户），你再花些时间用不破坏层叠且可维护性高的方法来修复这个bug也为时未晚。当你找到更好的解决方案你就可以替换掉线上的!important部分，而且客户对此毫不知情。

用Firebug或者其他开发者工具覆写样式

我们可以使用Firebug或者Chrome开发者工具（译注：两者均可用F12唤出）查看页面元素，在不影响真正的CSS样式的情况下可以自由地编辑样式，测试效果，调试bug等等。下面这张截图展示的就是在Chrome开发者工具中看到的Smashing Magazine的一些样式：

图中红框内带有删除线的样式表明它已经被后面的样式覆盖掉了。为了让这条样式再次作用，你得禁用后面的样式。你也可以把选择器写得更加具体以增加权重，但是这样会让整个代码块的权重都增加，这并不是我们想要的。

!important可以被加在单行样式的后面从而让已经被覆盖的样式重新作用。这样的话，你不用大量修改你真正的样式就可以调试你的CSS，直到你找到问题所在。

下图所示是在上图那条相同的样式后面加了!important。你可能已经注意到之前的删除线不见了，因为现在这条样式要比之前覆盖它的那条有更大的权重：

覆写用户生成内容中的行内样式

CSS开发中一个让人头疼的问题，就是当我们遇到用户生成内容中有行内样式的情况，这种情况多发生在一些使用了所见即所得网页编辑器的CMS系统中。在CSS层叠中，行内样式会覆盖常规样式。然而，我们并不想看到那些本该被我们定义好的CSS样式作用的元素却被用户生成内容中的行内样式改变。此时你就可以用!important来避免这种问题，因为，一条被开发者加了!important的样式会覆盖行内样式。

你可以给只在打印时生效的样式加上!important,虽然不是所有情况下都需要这样做，而且正如我们之前提到的那些原因一样也不建议这么做。但是，这样可以让你在不用重复编写选择器的情况下就能覆盖具体的样式。

打印样式即打印机在打印网页时所使用的样式，关于打印样式的细节可以阅读这篇文章

——译者：David

关于单独设计的博客页面

如果你曾经接触过设计个人博客页面的技术（许多设计师反对将 “艺术指导”用于这种技术，确实如此），像Heart Directed中展示的那样，你会发现有一种需求要求每个单独的文章都要有它自己独立的样式，抑或你需要使用行内样式。你可以用这篇文章中给出的代码为一个个人页面编写它自己的样式。

!important在这个时候可以派上用场，为了在你的站点里创建一个独一无二的页面，你可以轻松覆盖默认的样式而不必担心原本的CSS权重。

总结

如果你遇到了特殊的需求，或者你想覆盖用户代理（译注：即浏览器）和开发者的默认样式，提高页面可访问性，你最好慎重使用!important。你要对你的CSS在考虑周全的同时尽可能地避免使用!important。甚至在上面提到的许多能用到!important的地方它也不总是必要的。

尽管如此，!important在CSS中还是有用的。如果你接手一个项目，而这个项目之前的开发人员正好使用了!important，那么你在修复一些问题的时候我们今天所讨论的将会派上用场。

扩展阅读

1. !important rules in the CSS2.1 spec ¹⁰
2. !important Declarations on SitePoint’s CSS Reference
3. CSS Specificity And Inheritance on Smashing Magazine
4. Everything You Need to Know About !important CSS Declarations
5. What are the implications of using “!important” in CSS?
6. When Using !important is The Right Choice

译者手语：初次翻译前端技术博文，整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

关于David

2009年开始接触前端开发，2011年组建创业团队——[五维互动]，2012年团队被“收编”并更名[创影互动]，遂只身来上海发展，现在就职于FlipScript。欢迎交流共勉：腾讯微博

如需转载烦请注明出处：

英文原文：http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it

中文译文：http://www.w3cplus.com/css/the-important-css-declaration-how-and-when-to-use-it.html

Facebook和Twitter是当今两大流行的社交媒体网站，他们也对网站界面进行过修改。作为这么大的社交网站，修改界面，可能一部分用户不愿意接受，但大部分用户还是会接受修改的界面效果。

Fred Nerby为Facebook提供了一个概念上的用户界面设计，使用了网格，四四方方的有点类似于微软的Metro风格。

来自布达佩斯的Web和UI设计师“Hutvagner Zsolt”为Twitter设计了一个非常详细的用户界面设计。Zsolt使用著名pinterest 瀑布流布局，略带了微软的Metro风格。

今天我将这两份概念设计图发转至到W3cplus上，以供喜欢Web和UI设计的朋友参考，希望大家会喜欢。

Facebook UI概念设计

特别注明：Facebook UI概念设计图是由：Fred Nerby设计，图片来源于：Favbulous

Twitter UI概念设计

特别注明：Facebook UI概念设计图是由：Zsolt Hutvagner设计，图片来源于：Favbulous

感兴趣的同学可以看看Fred Nerby和Zsolt Hutvagner两位设计师分别对Facebook和Twitter的用户界面提出的概念设计。希望大家看后对自己将来的设计能带来些许的帮助。

如需转载，烦请注明出处：http://www.w3cplus.com/source/facebook-and-twitter-ui-conceptual-design.html

本文由陈陆扬根据Carrie Cousins的《USING TRANSPARENCY IN WEB DESIGN: DOS AND DON’TS》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://tympanus.net/codrops/2012/11/26/using-transparency-in-web-design-dos-and-donts，以及作者相关信息

作者：Carrie Cousins

译者：陈陆扬

为了扩展你的设计风格，尝试如何利用透明这一特性是一个不错的选择。如同其他特效一样，你需要合理有效的利用这种技术并在多种环境下检验其设计，以确保能正常运作并像你所希望的那样呈现。

透明可以使网页变得美丽而且狡黠。透明可以使一个颜色块，一段文字或者一张图片看起来“变薄”或变淡，稀释颜色使在后面的内容可以显现出来。

若处理得当，能为文字创建合适的区域，或将人们的注意力集中到图片的特定部分，效果将相当令人惊讶。

设计者在使用透明的时候必须小心翼翼，因为要处理好这种效果很不容易，其中可读性是一个经常被考虑的重点。透明盒子和文字如果运用不当将吸引不了用户的注意力，并从整体设计中脱离开来。

以下是一些有关透明的要与不要，并附上处理效果优美的例子。

要用透明凸显对比

最大的好处是使用透明度作为一种设计手法，凸显了对比。设计者可以用这种效果来创建颜色块焦点，也可以将大段文字置于图片之上，或者作为不同颜色的屏幕尺寸。

透明度也可以用来帮助文本从背景中跳到你眼前，而原本这个背景可能达不到展示的效果。

使用透明前需要慎重考虑一下对比效果，只有当图片（或者背景）和文字是可读的情况下，透明才是产生作用的。当你打算采用透明效果时，问一下自己：这样做能让用户更容易去理解这段文字或图片吗？

不要遮挡图片的重要部分

透明层不应当遮盖下层图片或背景重要的信息部分。在决定使用透明层的时候需要清楚得知道哪一部分会“消失”。

要用不同的透明度

没有完美的透明度。对于一些项目来说，80%的透明度是理想值；而对于其他的来说，可能15%是最好的。对于不同项目，运用不同的透明度数。

不要认为透明就可以使文字变的可读

不能因为在文字底下用了透明盒子，你就认为文字自动变成可读了。从透明盒子到文字，和从背景图片到透明边框，都需要考虑到对比。

当修改图片、颜色盒子和文字的透明度时，最重要的是考虑文字的可读性。记住，如果设计效果使文字变得模糊、不可认，那你的信息将无法表现出来。

要在小范围中使用透明度

透明效果不只是为网站的主体服务的，在一些小范围内使用也能达到很好的效果。

想想这种设计效果：利用透明层来突出导航工具，或者用作按钮或可点击元素的悬停效果。去试试，不过也不要用的太疯狂。选好一个元素和透明效果，并在整站的设计中坚持下去。

不要在具有强烈对比的图像上使用透明

考虑到可读性的原因，我们在设计的时候最好避免将透明层覆盖到本身具有强烈对比的元素中， 比如黑和白或者其他在色环上相互对立的颜色。

除非饱和色对你的设计有负面影响，才在这些元素上使用透明度，因为这很难在背景的所有部门创建正确的效果。试试用颜色框来代替。

要把透明的使用当做艺术

透明不是一种二等效果。你可以考虑在网站的主要图片上使用透明效果。

一个巨大的透明层可以以一种令人吃惊的方式创造出对比，强调和突出视觉。

不要将透明当作装饰

透明不是因为你厌倦了这次设计而去事后添加的一种效果。如果仅仅把它当作一种装饰的话势必会陷入设计上的困境。

你应该提前考虑并计划如果使用透明，这不是像变粗那样简单的效果，如果运用不当会显得随意且不专业。

要在背景层使用透明

透明效果不仅仅使用在设计第一线的元素上，在背景图片中也可以运用。一些最好的透明元素往往是不容易被察觉的。

其他的透明设计或许会在图像层之间显得支离破碎。但Tony Chester的网站则巧妙的运用透明布局技巧，创建了一种多维的设计。

不要同时使用多种透明效果

每一个项目中不能无限的使用不同的透明效果。透明应该呈现出区别，对比和抓住人眼球。过度的使用反而会分散用户的注意力。

要在静止和（或）旋转图像上使用透明

透明的使用不局限于单页和静止的设计，也可以在变化的图像和背景上，两者皆可。

在旋转图像上使用透明效果是最棘手的处理方式之一，但也是最令人印象深刻的。在设计多层背景图片的时候需要格外当心。背景图在不停的移动，需要找到一个适合的透明对比色。

注意给每个图像设置合适的透明度，这样才能维持图像的整体性，创建出可读的图片、背景、文字，并且保持视觉的持续性。

总结

为了扩展你的设计风格，试验如何利用透明这一特性是一个不错的选择。如同其他特效一样，你需要合理有效的利用这种技术并在多种环境下检验其设计，以确保能正常运作并像你所希望的那样呈现。

使用透明最大的挑战在于当图片交替变化的时候，文字得依然可读，并且确保透明元素不会错误得遮挡下层内容。

尝试不同的透明度和用法，比如作用在图像，背景上，或者当作悬停效果，以此来决定哪种最适合这个项目。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

关于陈陆扬

毕业于东北大学，从事前端开发，目前主要关注无线方面。对前端技术有强烈的兴趣，希望有机会和大家交流。新浪微博

如需转载烦请注明出处：

英文原文：http://tympanus.net/codrops/2012/11/26/using-transparency-in-web-design-dos-and-donts

中文译文：http://www.w3cplus.com/css/using-transparency-in-web-design-dos-and-donts.html