前端观察 » Tips

响应式网页设计

神飞 — Tue, 01 Nov 2011 16:36:11 +0000

这个话题最近很火爆，我也一直在关注，响应式网页设计和移动互联网密切相关，并因移动终端的丰富和普及而兴盛，并且是一个颇具争议的话题，我今天将和大家探讨下。

上周写了个简单的ppt在组内大概介绍了下，感兴趣的话可以先看下这个PPT。

移动互联网的现状和未来

在说到这个话题前，我们先看下网页设计和前端开发的现状：

全球有超过53亿手机用户（包括传统手机）
国内3G用户超过1亿
iPhone4手机在2010年出货量超过3000万部；
iPhone 4S上市前3天卖掉400万部；
Android手机每天激活超过50万部；
iPad出货量已经超过2.5亿部；
预计到2015年，移动互联网的数据流量将超越桌面端的流量。
。。。

嗯，大家也许已经开始注意到，自己和身边的朋友也都越来越多的用上了iPhone或者android手机或平板——一两年前我们预料的移动互联网时代即将来临，现在已然实现了——我们正处在移动互联网快速发展的时代——已经不再是起步阶段了。

那么，什么是响应式网页设计？

响应式网页设计是Ethan Marcotte在去年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的！

或许大家之前会注意到，有很多知名网站都推出了iPhone或针对智能手机的专门网站，比如3g.qq.com、m.taobao.com、ipad.xxx.com等等。。。甚至前端观察之前也尝试过用wordpress插件实现m.qianduan.net的移动网站。

那么问题就来了——我们要为每一个设备做一个单独的网站吗？来让网站在每个设备中得到相应的视觉风格和操作体验？

这样势必就要增加很多的工作量，而且很多还是重复的。

我们在做页面的时候，一般很强调模块化的概念，我们要求一个合格的模块要能够“可扩展、无侵染”，它要能够用在任何地方都能够正常的显示。响应式网页设计与此类似——网站在任何设备中都能够正常适配，而不用为每个设备单独做个子网站！

但是，产品经理和设计师可能还是会要求网站在各个浏览器里面表现要一模一样，甚至要像素还原——WTF！不同的浏览器本身的功能、行为和处理方式都不一样，为什么要表现完全一样？！

let the browser flow…

怎么做？

其实响应式网页的实现很简单，都是大家熟悉的技术。

media query(媒体查询)

因为现在主流的智能终端都是基于iOS和Android的，而它们自带的浏览器都是基于webkit内核，所以我们可以完全使用viewport属性和media query技术实现网站的响应性：

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

后面的initial-scale表示初始缩放，maximum-scale表示最大缩放比例，1意味着不能进行缩放。

/* for 240 px width screen */
@media only screen and (max-device-width:240px){
    selector{
    }
}
 
/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
    selector{
    }
}
 
/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
    selector{
    }
}

当然依靠屏幕宽度来进行适配是最简单的方法，media query有很多参数可以使用比如orientation、aspect-ratio等，不太了解的可以查看这篇详细的介绍。

其实，media query是响应式网页设计中被用到最多的技术。

fluid grid(流体网格)

很多项目都在使用网格技术(或者叫栅格)，前几年960.gs很流行，但是随着屏幕分辨率的普遍提升，它已经不太适合当前需求了，于是最近几年fluid grid开始逐渐多了起来，这种技术其实也很简单，只是将格栅的单位由px变成%，用百分比来控制页面每列的宽度，从而实现宽度的自适应。

使用流体网格的网站能够根据屏幕宽度自动调整页面中每列的宽度，从而保证页面的完整展现和基本功能。这也是一种不错的方法。

flex box

flex box是css3中的新技术，它很强大，可以实现很多我们之前无法想象的自适应布局。

有时我们希望网站能够以webapp的外观呈现给手机用户，flexbox是个不二的选择。

比如，要实现这样的简单结构：

它很像一个app的结构，头部和底部固定，中间高度自适应，用flexbox可以简单实现：

.flex_wrap{
	height:100%;
	display: box;  
	display: -moz-box;  
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	box-orient: vertical;
}
.flex_bd{
	box-flex: 1;
	-moz-box-flex: 1; 
	-webkit-box-flex:1;
	background:#E7E7E7;
	overflow-y:auto;
}
.flex_hd{
	background:#16364C;
	height:30px;
	line-height:30px;
	text-align:center;
	color:#FFF;
	font-weight:700;
	font-family:14px;
}
.flex_ft{
	background:green;
	height:30px;
	line-height:30px;
	text-align:right;
}

HTML代码：

<div class="flex_wrap">
	<div class="flex_hd">前端观察</div>
	<div class="flex_bd">
		<p>这里是主内容区</p>
		<p>这里是主内容区</p>
	</div>
	<div class="flex_ft">
		<a href="http://www.qianduan.net/about" title="关于我们">关于我们</a>
		<a href="http://www.qianduan.net/copyright" title="版权声明">版权声明</a>
		<a href="http://www.qianduan.net/sitemap" title="网站地图">网站地图</a>
	</div>
</div>

虽然这里还会有点儿问题，比如主内容区域内容太多会被隐藏掉，因为android webkit和iOS 5之前的mobile safari均不支持overflow:scroll属性，但是这个问题还是很好解决的，比如在里面嵌套一个子容器，用js来给定个高度并使用定位来实现滚动条从而完整展示内容，或者直接使用iscroll等js库来实现。好消息是，iOS5中safari开始支持overflow:scroll了。

不足之处

如果你关注网站性能之类的话，可能已经发现了一些问题：

加载很多不需要的资源，比如多余的图片和样式内容
带宽限制
移动终端的内存和CPU限制
图片大小和屏幕大小不匹配

嗯，任何一个方案都不是完美的，但也不会很糟糕。下面我们会提到一些可行的优化方案：

HTML5本地存储

对于支持HTML5 appcache /manifest特性的浏览器，我们可以将一些不常改动的静态资源存储到本地，比如css文件，css中用到的图片，以及一些js文件等：

CACHE MANIFEST
NETWORK:
/*
 
CACHE:
img/bg.jpg
img/days.otf
slideshow.js
slideshow.css
classList.js

然后将文件保存为manifest格式，并在HTML标签中引入即可：

<html manifest="responsive.manifest">

这样，用户在第一次访问的时候会慢一点儿，但是后续访问会很快，3G网络中也能为用户节省带宽。

移动设备优先

一种新的设计流程是，先为移动设备设计界面，然后将PC端作为一个扩展。

这样做的好处是显而易见的，移动终端不会加载多余的资源，也不会因为PC端的样式而重绘页面，同时也不会影响PC端的表现。

流体图片(fluid image)

页面中的图片有时会比手机/平板的屏幕（viewport）宽，这样会将页面容器撑开，但是移动浏览器又不能scroll，结果图片被切掉一部分，然后还会有一部分内容被隐藏掉，用户看不到。

解决这个问题的方法很简单，将img的最大宽度设置成100%就可以了：

img{max-width:100%}

嗯，这里的前提是，没有给img标签设置宽度和高度，否则显示会有问题。另外不建议直接设置width=”100%”，因为会把小图拉大，模糊显示。

同理，video标签和iframe标签的宽度也可以这样做，而且最好不要使用iframe，宽度是个问题，性能也是一个方面吧。

CSS3 image

这个方法有些惊艳

我们都知道可以用::before和::after伪元素+content属性来动态显示一些内容或者做其它很酷的事情，而且在CSS 2.1中即被支持。不过content属性在CSS 2.1中只能用于这两个伪元素中，而在CSS3中，任何元素都可以使用content属性了，这个方法就是结合css3 的attr属性和HTML自定义属性的功能：

<img src="image.jpg" 
	data-src-600px="image-600px.jpg" 
	data-src-800px="image-800px.jpg" alt="">

然后用media query来动态赋值：

@media (min-device-width:600px) { 
	img[data-src-600px] {
		content: attr(data-src-600px, url); 
	}
}
@media (min-device-width:800px) {
	img[data-src-800px] {
		content: attr(data-src-800px, url);
	}
}

当然，这种方法也有不足之处，比如PC端宽屏幕需要加载两个图片文件，然后我们也要为此准备多张图片文件等。

pre标签

有的网站，比如，像前端观察这样的技术博客，会用pre来显示源代码，而浏览器对pre标签默认设置white-space:pre，这样，代码就不会换行，从而撑开子容器，造成内容被隐藏的问题：

右边的文字被隐藏掉了。

解决方法很简单：

pre{
	white-space:pre-wrap
	word-wrap: break-word;
	word-break: break-all;/*如果要兼容IE，可以加上这句，连续字母断行的问题伤不起啊。。。。*/
}

当然，不只是pre标签，关键是white-space和word-break属性的值。

嗯，主要的技术和技巧其实就这些，大家不会陌生。下面是一些比较有用的工具什么的：

响应式网页设计工具与资源

国外在响应式网页设计上已经走的很远了，已经有很多工具和资源供我们参考和使用：

CSS 框架

实用工具

Respond.js，让IE6-8支持meidia query
Responsive Design Testing 简单而方便的测试网站的响应性的工具，输入网址即可看到网站在不同分辨率下的表现
Resize My Browser 缩放浏览器工具，不过不支持chrome和opera浏览器
Media Query Bookmarklet 顾名思义，这是一个关于media query的书签工具
ProtoFluid 在线查看和调试网站对移动终端兼容性的工具，很赞
ScreenFly 和ProtoFluid类似
responsivepx 更直观的测试网站对不同分辨率的适配性

争论和总结

响应式网页设计被提出以来，争论就不断，其实核心问题只有两个个：太多的资源请求和有限的终端支持之间的矛盾、响应式的网页设计和移动终端在用户体验和视觉风格上的差异。前者不能容忍在弱小的手机/平板上通过龟速的3G/2G网络来加载一个笨重的PC端页面，而后者纠结响应式网站不像手机网站。

我的想法是，具体问题具体分析，比如，强内容的网站，完全可以尝试响应式网站，而重视觉和功能的网站，则可以尝试建立一个独立的移动网站。

另外，显然，响应式网页设计的大部分技术，是可以用在WebApp开发中的。

最后，欢迎各种吐槽、各种批评、各种建议、各种发散、以及各种新观点新技术～～欢迎发表评论～～

PS：如果你手上有android/iPhone，可以直接访问下前端观察。 :)

参考文章：

LESS介绍及其与Sass的差异

神飞 — Sun, 11 Sep 2011 19:05:58 +0000

原文：LESS介绍及其与Sass的差异
译自：An Introduction To LESS, And Comparison To Sass
原作者：Jeremy Hixon
请尊重版权，转载请注明来源，多谢！

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

事实证明，LESS——以及Sass——功能比这个要多太多。LESS和Sass在语法上有些共性，比如下面这些：

混入(Mixins)——class中的class；
参数混入——可以传递参数的class，就像函数一样；
嵌套规则——Class中嵌套class，从而减少重复的代码；
运算——CSS中用上数学；
颜色功能——可以编辑颜色；
名字空间(namespace)——分组样式，从而可以被调用；
作用域——局部修改样式；
JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

LESS和Sass的主要不同就是他们的实现方式，LESSS是基于JavaScript，所以，是在客户端处理的。

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

LESS Is More

介绍

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

下载less.js;
创建一个文件来放你的样式，比如style.less;
添加以下代码到你的HTML的中:

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

请注意link的rel属性。你需要在属性值的最后面使用/less以使LESS起作用。然后在link后面引入scirpt也是必须的。如果你在用HTML5语法——为什么不用呢？——你可以省去type=”text/css”和type=”text/javascript”。

其实也有一个服务器端的LESS版本。在服务器上安装LESS的最简单的办法就是使用Node Package Manager (NPM，一看就知道是基于Node.js的)。

变量

如果你是个开发者，变量应该是你最好的朋友。如果你要重复的使用一个信息(本例中就是color)，将它设置为一个变量就可以。这样，你就可以保证自己的一致性并可能减少滚动代码来查找颜色值、复制、粘贴等繁琐的工作了。你甚至可以加或者减一些你需要渲染的HEX值到这些颜色上面。看下例子：

1
2
3

@blue: #00c;	
@light_blue: @blue + #333;
@dark_blue: @blue - #333;

如果我们将这些样式应用到3个div上面，我们就可以看到由加上和减掉的HEX值形成的渐变的效果：

从@light_blue到@blue到@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 class同样的效果——而且仅仅在样式表中就完成了。而且它工作的很好：

文字和无序列表都被用上了边框样式

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

@mixin border {
	border-top: 1px dotted #333;
}
article.post {
	background: #eee;
	@include border;
}
ul.menu {
	background: #ccc;
	@include border;
}

参数混入

就像在CSS中有函数功能一样，这些对于那些在现在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我们正在经历的从CSS2到CSS3过渡过程中的很多浏览器私有前缀。Nettuts+有一篇Jeffrey 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;
}

嵌套规则

在css中嵌套class和ID是避免你的样式干扰或者被别的样式干扰的唯一方法了。但是这可能会很凌乱。使用一个类似于#site-body .post .post-header h2 的选择器毫无吸引力而且会占用大量不必要的空格。使用LESS，你可以嵌套id、class以及标签。对于前面提到的例子，你可以这样写：

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

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

运算

这可能是你所期望的：使用数字或者变量在你的样式表中实现数学运算！

@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;

声明下，我也意识到我可以除以4来获得@quarter_page变量，但是这里我只是想要演示下圆括号组成“运算顺序”在这里也是可以用的。在使用简写的规则中，小括号也是必须的，比如 border: (@width / 2) solid #000。

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

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

Color函数

在文章开头，我提到了LESS如何帮我在编码过程中处理围绕着一个调色板。对此贡献最大的一部分就是颜色函数。加入你用一个标准的蓝色贯穿到你的样式中，然后你想要在表单中用这个蓝色来做一个渐变的按钮。你可以打开Photoshop或者其它的编辑器来获取一个比蓝色较浅的或者较暗的HEX色值来作为渐变色。或者，你可以只是使用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，以及 <、 >、 <=、 >= 和 == 等操作符。

/* Sample Sass "if" statement */
@if lightness($color) > 30% {
	background-color: #000;
} @else {
	background-color: #fff;
}
 
/* Sample Sass "for" loop */
@for $i from 1px to 10px {
	.border-#{i} {
	border: $i solid blue;
	}
}

名字空间(Namespaces)

名字空间可以用于组织我们的CSS到另一个档次，我们可以将一些公用的样式分组，然后在用的时候直接使用。例如，如果我们创建了一个名为default的样式分组，我们就可以在用到的时候直接从该组中调用。

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

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

1
2
3

nav ul {
	#defaults >; .nav_list;
}

作用域

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

@color: #00c; /* 蓝色 */
#header {
	@color: #c00; /* red */
	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}来调用。

1 2	@base_url : 'http://www.qianduan.net'; 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 变成 'HOWDY' */
 
/* 你也可以使用前面提到的插值： */
@string: 'howdy';
@var: ~`'@{string}'.topUpperCase()`; /* 变为 'HOWDY' */
 
/* 获取文档的信息 */
@height = `document.body.clientHeight`;

输出格式

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

结语

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

译注：翻译的有些仓促，如果有错误或者不妥的地方，欢迎指出。mixin这个单词，这里直译为“混入”了，不过感觉也不太合适，查了好久也没有见到非常合适的翻译，这里求达人指点。另外，不知道什么原因，lesscss.org貌似在贵国无法访问，大家可以直接访问LESS在git上的仓库，http://github.com/cloudhead/less.js，该项目的wiki也有和官方网站一样的文档，需要的话可以详细阅读下。——神飞

:nth-child 和 :nth-type-of 的区别

糖伴西红柿 — Wed, 06 Jul 2011 05:14:35 +0000

原文：The Difference Between :nth-child and :nth-of-type

译文：:nth-child 和 :nth-type-of 的区别

假设有以下 HTML 代码：


     <p>Little</p>
     <p>Piggy</p>  
</section>

以下代码得到的效果一样：

p:nth-child(2){color:red;} 
p:nth-of-type(2){color:red;}

结果虽然相同，但是两者本身还是有所区别的。

:nth-child 选择符从词义上来说，表示，

选择满足以下条件的元素：

1. 是一个段落元素 p
2. 是父元素的第二个子元素

:nth-of-type 选择符从词义上来看，表示：

1. 选择父元素的第二个段落元素 p

:nth-of-type 是… 怎么说好呢，哈~ … 较少条件要约的。

假设结构变化如下：


     <h1>World</h1>
     <p>Little</p>
     <p>Piggy</p>  
</section>

那么，这种方式就“破”了：

p:nth-child(2){color:red;}

但是，这个还是”能用”的：

p:nth-of-type(2){color:red;}

所谓的“破”，意思是上面的 :nth-child 选择符现在选到的是 “Little”，而不是 “Piggy”，因为这个元素满足以下所有条件：

1) 它是第二个字元素
2）它是一个段落元素 p

所说的“能用”，意思是 “Piggy” 仍然被选中，因为它是它父元素下的第二个段落元素 p 。

如果在 h1 之后增加一个 h2，那么 :nth-child 选择符就什么也选中不了了，因为那时第二个子元素就不再是段落元素 p 了。但是 :nth-of-type 仍然还是有效的。

我感觉 :nth-of-type 相对不那么脆弱，而且总的来说更加有用，尽管 :nth-child 更加常见（作者个人意见）。你有多少时候在想“我想选择父元素的第二个子元素，如果它恰巧是个段落元素 p” 这事呢？可能有那么几次，但是更多的可能是你想“选中第二个段落”或者“每隔两行选择一行 (select every third table row)”，也就是说 :nth-of-type 是更加好的一个选择（再次声明，作者个人意见）。

我发现当我抱怨“为什么 :nth-child 选择符不行？”时，绝对多数的情况是因为在选择符前限定了标签，而那个位置的子元素不是那个标签。因此在使用 :nth-child 时，我觉得最好还是只指定父元素并且不要用标签来限制 :nth-child 。

dl :nth-child(2) {} /* 推荐 */ 
dd:nth-child(2) {} /* 不是很好 */

当然，具体情况还得具体分析。（我咋这么不喜欢这句话呢 – 糖伴西红柿）

浏览器对于 :nth-of-type 的支持是相当不错的…Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+。如果需要更多的支持，jQuery 应该会挺你的（使用选择符，添加一个类名，使用类名来添加样式 $(“selector:nth-child(xxxxx)”).addClass(“someClass”)），但是实际上 jQuery 却放弃了对 :nth-of-type 的支持，这很奇怪啊，据说是因为 :nth-of-type 的使用率很低。有个插件可以使得 jQuery 支持它。

相关：不要忘了它这些了不起姊妹们 :first-of-type :last-of-type :nth-last-of-type 和 :only-of-type 。更多请看这里。

这里有一个 Lea Verou 做的可视化示例。

原文：The Difference Between :nth-child and :nth-of-type

译文：:nth-child 和 :nth-type-of 的区别

巧用:empty解决webkit核心浏览器text-indent的bug

神飞 — Wed, 20 Apr 2011 08:20:51 +0000

昨天在项目中遇到要在一个输入框中使用缩进的情况，要用text-indent首行缩进2个文字。然后发现在webkit下，在输入框内容为空的时候，光标位置没有缩进，还是在行首，输入任意字符后，缩进才被激活。

HTML代码如下：

1	<input type="text" style="text-indent:2em" />

查看demo

这里无论是input元素还是textarea，或是其它设置了contentEditable=”true”的元素，都能必现这个bug。

IE各版本，Firefox均正常，只有chrome和safari等webkit内核的浏览器才有这个问题。

这里百思不得其解，也尝试了很多方法，均无效。

后来和小李刀刀、poor聊到这个问题，突然想到:empty伪类，立刻测试，果然可以解决——虽然只是曲线模拟解决…

1	input[type="text"]:empty{padding-left:2em;}

然后在chromium社区提交了个bug单，不知道会不会被无视。

PS：Opera在这里也有些小问题，input元素缩进表现正常，textarea元素不支持缩进，contentEditable=”true”元素和webkit表现一样。

firebug net面板详解

神飞 — Wed, 13 Apr 2011 07:59:56 +0000

今天志刚问到Firebug的net面板的 onload是神马意思，我一时语塞，用Firebug这么多年了都木有仔细研究过。正好这两天和大猫舜子等童鞋一起研究@import css的问题，顺便把这个详细了解下吧。

Net面板

Net面板就是Firebug中的net tab，中文应该叫“网络”？它可以监控页面中的HTTP请求，然后将收集到的信息展现出来。当然，要使用这个功能，你要先点击Net字符右边的小三角将它启用。

PS：我这里的环境是Firefox 4+Firebug 1.7，旧版本的界面可能会稍有不同。

它会将页面中所有的请求/相应的完整过程整理好列出来。

上面的截图显示，前端观察首页的页面请求概况：共9个请求，每一个条目都包含相关资源一些信息：

请求类型(GET|POST)
请求地址(鼠标悬浮在URL列上时会完整显示)
状态及其描述(200 ok)
所属域名
资源大小
图形化的时间线

最底部一行会显示一个简单的统计信息。

请求/响应详情

点击url前面的+按钮后，该条目就会展开，显示该请求的详细信息：

可以看到这里有几个tab：

headers：请求/响应的HTTP头
response：从服务器返回的数据
HTML：HTML响应的预览(只有HTML格式的请求才会显示)

headers

从上图中可以看到，headers部分会展示两个信息：响应头和请求头，分别包含着一些信息，需要注意的是，请求头中包含了User-Agent信息和Cookie值。记得之前有个Firebug的扩展叫Firecookie，现在的Firebug展示了这些信息，这个扩展基本上就没有用了。

PS：貌似之前有个Firefox的插件叫Live Http Header的，嗯，功能基本上也被Firebug集成了。

Response

响应tab显示请求后从服务器返回的数据，嗯，和响应头是不一样的，这里回事一些纯数据，如果是text/*类型(content-type)就会显示原始代码文本，如果是image/*类型，会直接显示相关图片。

浏览器缓存

如果请求的资源使用了缓存，那么这里就会多出一个cache的tab：

post|put请求

如果请求会发送一些数据，这里将会出现另一个tab：

URL参数

如果页面请求中包含一些参数（查询字段），则会有一个Params的tab在前面：

json

如果请求是Json，那么这里会有json的tab，采用弹性分层的结果展示详细的数据：

时间线

firebug的时间线以瀑布图的形式展现，很直观，而当你把鼠标悬浮在时间线上的时候，就会弹出该条时间线的详情的tips，这个tips包含5个阶段和2个事件：

DNS Lookup：DNS查询时间
Connection：创建一个TCP链接花掉的时间
sending：向服务器发送请求需要的时间
Waiting ：等待服务器响应
Receiving：从服务器获取文件消耗的时间
DOMContentLoaded：事件，DOMContentLoaded事件完成的时间（从请求发起时开始，如果这个时候事件已经完成，这里就可能是负值）
Load：事件，页面load事件完成的时间（从请求发起时开始，如果这个时候事件已经完成，这里就可能是负值）

最上面一行，+859ms started表示前面的请求花掉的时间。

该案例的解读：

黄色的tips中，每一行都包含两个数字，前面的表示该阶段发起时在该请求中的时间点，第二个是该阶段花掉的时间，比如，图中，前三行花掉的时间都是0，所以，waiting阶段，左边的数字就是0，而右边是自己花掉的时间409ms，那么在下一个阶段，左边的时间就是前面的时间的和——409ms。
在这个请求开始后6.87s时，DOMContentLoaded事件完成。
在这个请求开始后8.43s，load事件完成。

深入了解：

从这个截图，我们可以看到以下信息：

第一个请求在2.65s时完成，第二个在1.52s…等
从第一个请求到最有一个请求，花掉了共6.96秒时间
从第一个请求到load事件完成，花掉了6.97秒钟的时间

插图版解释：

因为DOMContentLoaded和load事件花掉的时间可能是负值，也就是在事件在请求完成之前就完成了，两者都可能是负值，而通常最后一个请求完成于load事件结束之后，所以，通常右下角onload的时间会比总时间少。

然后或许从最后这里能找到一些页面优化的点，希望高人能给予指点。

参考资料：

IEMobile条件注释

神飞 — Tue, 22 Mar 2011 06:52:17 +0000

微软在IE5开始就引入了条件注释的功能，可以通过注释型的语法，来对不同版本的IE浏览器指定不同的样式和内容。而在Windows Phone7中，微软又引入了 IEMobile这个关键字，将条件注释功能带入了WP7手机浏览器中。

语法和普通的条件注释类似：

以为WP7有很多很酷的功能，顺便多玩了下，然后发现各种杯具：

不再支持media=”handheld”。我们知道，对于普通的移动终端，我们可以用media type来为其指定特殊的样式文件，在之前的Windows Mobile版本的系统中，media=”handheld”是被支持的，但是到了wp7，可能微软觉得自己的Mobile IE7可以和iOS的Safari以及Android的webkit lite媲美了？总之，它不再支持handheld类型了！
wp7中的IEMobile不支持媒体查询(media query)！既然，IEMobile条件注释后面可以加版本号，那么，以微软的作风，估计以后大家可以不用在Windows Phone上纠结媒体查询的功能了！

PS，关于条件注释，需要更多了解的请访问：条件注释使用指南

doubanclaim9261b07b87a120ff

HTML5 中 div section article 的区别

糖伴西红柿 — Fri, 25 Feb 2011 07:18:53 +0000

刚刚开始接触 HTML5 时，对它的标签很不适应，甚至一度有点反感。尤其是对 div、section、article 这几个标签，实在弄不清楚应该使用在什么场合下。

div

HTML Spec: “The div element has no special meaning at all.”

这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义，用作布局以及样式化或脚本的钩子(hook)。

section

HTML Spec: “The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.”

与 div 的无语义相对，简单地说 section 就是带有语义的 div 了，但是千万不要觉得真得这么简单。section 表示一段专题性的内容，一般会带有标题。看到这里，我们也许会想到，那么一篇博客文章，或者一条单独的评论岂不是正好可以用 section 吗？接着看：

“Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”

当元素内容聚合起来更加言之有物时，应该使用 article 来替换 section 。

那么，section 应该什么时候用呢？再接着看：

“Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.”

section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。其实我对这里传达信息很感兴趣，因为感觉 section 和下面要介绍的 artilce 更加适用于模块化应用，这个话题以后会出篇专门的文章来讨论，这里暂时略过。

要注意，W3C 还警告说：

“The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.”

section 不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时，应该使用 div 。一般来说，当元素内容明确地出现在文档大纲中时，section 就是适用的。


 
  Apples
  Tasty, delicious fruit!
 
 The apple is the pomaceous fruit of the apple tree.
 
  Red Delicious
  These bright red apples are the most common found in many
  supermarkets.
 
 
  Granny Smith
  These juicy, green apples make a great filling for
  apple pies.

article

HTML Spec: “The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.”

article 是一个特殊的 section 标签，它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说， article 会有标题部分(通常包含在 header 内)，有时也会包含 footer 。虽然 section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，article 本身就是独立的、完整的。

HTML Spec 中接着又列举了一些 article 适用的场景。 “This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.”

当 article 内嵌 article 时，原则上来说，内部的 article 的内容是和外层的 article 内容是相关的。例如，一篇博客文章中，包含用户提交的评论的 article 就应该潜逃在包含博客文章 article 之中。

问题是怎么才算“完整的独立内容”？有个最简单的判断方法是看这段内容在 RSS feed 中是不是完整的。看这段内容脱离了所在的语境，是否还是完整的、独立的。

例子：


 
  The Very First Rule of Life
  
 
 If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.
 ...
 
  Show comments...


 
  The Very First Rule of Life
  
 
 If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.
 ...
 
  Comments
  
   
    Posted by: George Washington
    
   
   Yeah! Especially when talking about your lobbyist friends!
  
  
   
    Posted by: George Hammond
    
   
   Hey, you have the same first name as me.

总结

div section article ，语义是从无到有，逐渐增强的。div 无任何语义，仅仅用作样式化或者脚本化的钩子(hook)，对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。nav 和 aside 的使用也是如此，这两个标签也是特殊的 section，在使用 nav 和 aside 更合适的情况下，也不要使用 section 了。

对于 div 和 section、 article 以及其他标签的区分比较简单。对于 section 和 article 的区分乍看比较难，其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在，这里面的重点又在完整身上。因为其实说起来 section 包含的内容也能算作独立的一块，但是它只能算是组成整体的一部分，article 才是一个完整的整体。

因为其实有些时候每个人都有自己的看法，所以难免有难于决断的时候，怎么办？

在 HTML5 设计原理中，有一条是专门用来解决类似情况的：

最终用户优先(Priority of Constituencies)

“In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.” 一旦遇到冲突，最终用户优先，其次是作者，其次是实现者，其次标准制定者，最后才是理论上的完满。

推荐各位多读几遍 HTML5 设计原理，这才是纷繁世界背后的最终奥义。

HTML5书籍推荐

神飞 — Thu, 17 Feb 2011 08:42:17 +0000

HTML5技术越来越火了，浏览器的支持加上移动互联网的兴起，使得很多HTML5技术可以派上用场并为用户提供更好的用户体验。而HTML5相关的资料目前却很少，只有少数像前端观察一样关注新技术的博客在介绍一些(:羞)，或者就是去查W3C或者浏览器厂商的说明文档。不过，现在已经有不少的HTML5书籍出版了，大家可以视情况买几本来读。

HTML5 用户指南

在卓越购买 |在当当购买

国外小册子《Introducing HTML 5》的中文版，浅显易懂，快速上手。

HTML5 揭秘

在卓越购买 | 在当当购买

《HTML5 揭秘》是知名的《HTML5:up and running》的中文译本，很详细的介绍了HTML5的最新技术，如果你经常看Dive into HTML 5这个网站，肯定很了解这本书了。这本书是淘宝UED团队的牛人翻译的，非常推荐。

HTML5 高级程序设计

在卓越购买 | 在当当购买

《HTML5 高级程序设计》是《Pro HTML5 Programming》的中文译本，写的相对比较深入，如果你对HTML5有较多了解，可以选择这本书。

我个人买了后面的两本，最近在看，嗯，技术类的好书，还是买一本来读比较好，电脑上看或者看英文版，感觉都不太舒服的。

另外比较期待纯国产的介绍HTML5的书籍面世，如果有CSS3的更好，最近Eric Meyer写了本Smashing CSS，有介绍CSS3，很期待这本书的中文版。

当然，如果你有见到更好的关于HTML5和CSS3的书籍，欢迎推荐，本文将保持更新。

IE9 beta对HTML5/CSS3的支持

神飞 — Sat, 25 Sep 2010 14:05:49 +0000

IE9beta版本已经发布几天了，我也在第一时间体验了下，但是由于时间的问题，这篇日志一直没有发，嗯，最近比较忙，其实主要是没有大块大块的时间了，然后碎片时间利用的也不是很高效～～以至于最近博客的更新都比较慢…

有人说IE9是微软的二次革命，我觉得这种说法一点都不过，从IE6开始，IE的更新就没有这么彻底过，完全支持DOM level 2，完全支持CSS2.1，界面更精简……当然，我们最关心的是，IE9对HTML5和CSS3的支持到底怎么样～～

在微软自家的ietestcenter网站中，我们看到了这个图表：

看到这个图我感到鸭梨很大啊，心里在想，IE9有这么牛x吗？认真看了说明之后才清楚，原来这里的测试项目只是微软提交给W3C的条目，并不是完整的内容，比如CSS3中，这里只包含了5项技术，而不是所有的CSS3内容——强烈的BS一下微软，差点上他的当了……

其实，想要了解一个浏览器对HTML5/CSS3的支持很简单，上篇文章中介绍的Modernizr就是一个非常好的工具，我这里偷个懒，直接用访问findmebyip，即可看到IE9beta对它们的支持：

IE9对CSS3新特性的支持：

可见，目前IE9beta对CSS3新特性的支持还是很弱的。

IE9对CSS3选择器的支持：

IE9终于比较完整的支持CSS选择器了！

IE9对HTML5新特性的支持：

IE9beta对HTML5新特性的支持也是不完整的，音视频的支持非常弱，尽管IE团队表示将支持WebM，目前来看，还没有实现啊（PS:在HTML5test.com网站的测试中显示，IE9beta支持H.264格式视频）。另外，对SVG的支持是微软对外宣传IE9的标杆之一，但是，IE9对SVG的支持到底有多好呢？大家去看一下王道吧！PS:IE6-IE8是不支持SVG的，以至于相关技术应用在IE下要采用微软自家的VML替代。

IE9对HTML5表单的支持：

IE9对HTML5表单的支持一直是我最关注的，如果最终IE正式版依然不支持HTML5表单，那么这绝对是个失败的浏览器。

其实，我们知道IE9进步很大，但是它的一些表现让我们不敢对它抱有太多的希望，比如硬件加速是个很棒的功能，它能让浏览器渲染的更快，但是即便没有采用硬件加速，chrome就已经这么快了。而我实在想不通为什么硬件加速非要DirectX 9+，而且必须是windows 7系统，相对于webkit的webGL加速，这样的策略没太多优势哦，除非微软能够将xp用户全部升级到Windows 7！

嗯，简单的做了点review，我希望IE能以一种更好的方式发布和更新，IE6-IE9四个版本共存的情况会让人疯掉的吧…

PPT:HTML5 表单——为体验而生

神飞 — Sun, 08 Aug 2010 03:56:32 +0000

这是之前组内分享的一个PPT，关于HTML5的表单，本来想整理成文字的，由于精力有限，终于决定放弃，偷个懒，直接把PPT放上来～～

个人认为表单是HTML5的最大改进之一，它也被业界称为web form 2.0，这种称呼是名副其实的，从HTML3.2(1997年1月)到HTML4(1997年12月)，旧的表单陪伴了我们十几年，始终没有太大的改进。HTML5表单不仅仅大大的改进了表单的功能，改进了表单的语义化，同时也是对用户体验的一次增强，而对前端开发者来说，HTML5表单也可以大大增加工作效率。

不多说了，看PPT：

Html5 表单

关于HTML 5表单的几个要点：

浏览器遇到不支持的input type的时候，会将其解析为默认的text，所以在项目中可以大胆的使用相应的type；
mobile webkit对range type的支持不完善，可能是因为它对css appearance的支持不足；
W3C只规范了HTML 5表单的内容，并没有定义其实现方式，各浏览器实现的UI出现差异成为一种必然；

如果你对HTML5表单有疑问或更好的认识和经验，欢迎通过评论提出～～

PS:发现现在Chrome dev版本也开始支持HTML5表单中的日期类型了，这和PPT中有点儿出入 @2010/8/8