blog.moocss.com

坚持，改变，像树一样成长！2012…

Rainbow — Sat, 31 Dec 2011 18:28:47 +0800

2011是成长的一年！失落，迷茫，一直伴随着我! 收尾一点也不华丽！

来个总结：

Web前端规范年前就开始整理总结了，整个体系算是建立起来了，已经完成90%了，是一个不小的成果，为我后来的工作带来了不小的改变！不过随着时间的流逝，也有了更多的想法，没有整理成文档！希望元旦来了，都加上，再出一个新的版本，下一步，就是在团队里分享，更重要的是想让程序员也了解前端规范和WEB标准的重要性！这样一来就可以减轻联调时前端人员的负担！同时也能够提高公司产品的质量和维护的成本!

HTML5 ,CSS3 ,nodejs, 前端MVC，等很火，移动开发也很火。但我最想提高的还是JavaScript的水平，一拖再拖没有完成学习目标！有点失落！

一直想触摸，但没有触摸的dojo在ArcGIS的开发项目中小试了一把，感觉非常好，的确强大，感觉国内使用的人还是很少，当时解问题的时候，找到的中文资料很少，不过英文资料非常多，所有的问题都在英文资料中得到了解决，同时也开发出了不错产品，得到了大家的奖励！

最后，来年的想法是加强Java和Scala的学习，因为我想再次改行回去，本来就是搞JavaWeb开发的，不想丢掉它，主要原因是前端这块儿在西安的重视程度不高，完全是靠自己自学，能交流的人也很少，搞到最后就遇到瓶颈了，无法突破自己，整日惶恐不安！

最后我想说的是“我爱Web前端，但我更爱Java！”

如何定义IE的文档兼容模式

Rainbow — Sun, 11 Dec 2011 18:31:18 +0800

由于现在IE浏览器的多个版本共存，同时浏览器的升级也给我们的老项目带来了不可预测的风险。浏览器的兼容性问题开始困扰我们的在线项目了。

还好，微软的给我们的解决方案是设置X-UA-Compatible。

X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。

很多网站为了方便让页面在IE8/9下降级成显示为IE7就使用了X-UA-Compatible 。

IE8刚开始推出的时候跟IE7有不少不同，所以为了避免制作出的页面在IE8下面出现错误，建议直接将IE8使用IE7进行渲染。这一做法过于方便，以至于现在太多网站声明了使用IE7引擎来解析页面。

语法：

<meta http-equiv="X-UA-Compatible" content="IE=7" />

以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=8" />

以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。

<meta http-equiv="X-UA-Compatible" content="edge" />

以上代码告诉IE浏览器，Windows以最高版本的IE显示内容。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

以上代码告诉IE浏览器，根据 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以Windows Internet Explorer 7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同，EmulateIE7 模式遵循 <!DOCTYPE> 指令。对于多数网站来说，它是首选的兼容性模式。

注意X-UA-Compatible放置的位置，MSDN《定义文档兼容性》中是这样说的：

The X-UA-compatible header is not case sensitive; however, it must appear in the Web page’s header (the HEAD section) before all other elements, except for the title element and other metaelements.

X-UA-compatible 标头不区分大小写；不过，它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前的标头（HEAD 节（可能为英文网页））中。

<p>例如下面正确的例子：</p>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=IE7,IE9">
    <title></title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="...">
    <script type="text/javascript" src="..."></script>
</head>
<body>
	<!--网页主体-->
</body>
</html>

被杯具的用法：

    <meta charset="utf-8">
    <title></title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="...">
    <meta http-equiv="X-UA-Compatible" content="IE=IE7,IE9">
    <script type="text/javascript" src="..."></script>

对于用上IE9/IE10的人，想跳过IE8，指定在IE7和IE9中渲染，得使用了MSDN文档推荐的语法：

<meta http-equiv="X-UA-Compatible" content="IE=7;IE=9" />

但是，以上兼容IE7/IE9的语法方式，会在IE8里会导致BUG，发现在IE8下并没有以IE7的文档模式来渲染页面。

正确的语法规则：

1.定义多种文档模式时，使用逗号（,），而非文档中提到的分号（;）。

1
2
3

<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
/*或者是*/
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7,IE=EmulateIE9" />

2.或者以逗号升序连写的方式

<meta http-equiv="X-UA-Compatible" content="IE=7,9" />

最后我们看一下书写方式测试

LESS的多种运行方式

Rainbow — Sun, 04 Dec 2011 17:08:25 +0800

LESS是一种动态样式语言。

LESS 将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js).

中文官网:http://www.lesscss.net/

虽然我们已经有了自己的公共样式类库，每一个样式类都具有单一性的作用，但是远远不够的，我们的代码看上去还是那么臃肿的，大量的样式属性，还是在多个地方重复出现，样式文件由于重复而过于庞大。

这个时候，我们就可以使用LESS管理你的CSS，高效、可维护的代码就指日可待了。

今天要说的是LESS的多种运行方式。

一. 客户端上编译。

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

注意你写好的.less文件必须在less.js之前，不然无法解析。

二. linux node下编译。

/* linux下开发，当你保存的时候，lesstocss将你的less文件自动编译成css文件
* 用法： node lesstocss [filename1,filename2,...]
* version: v0.1
* by 飞长(veryued.org)
**/
//设置lessc路径
var lessc ='~/git/less.js/bin/lessc';
 
var util = require('util'),
    fs = require('fs'),
    exec  = require('child_process').exec;
 
//获取屏幕输入参数数组
var filenames = process.argv.slice(2);
 
filenames.forEach(function (val, index, array) {
    (function(filename){
        var tempTime;
        fs.watchFile(''+filename+'.less',function(curr,prev){
            var child = exec('stat '+filename+'.less | grep Modify',
                function (error, stdout, stderr) {
                    if(tempTime != stdout){
                        console.log(''+filename+'.less changed');
                        var lesschild = exec(''+lessc+' '+filename+'.less > '+filename+'.css'
                            ,function(erro,stdout,stderr){
                            console.log(stdout);
                            if (erro !== null) {
                                console.log('exec erro: ' + erro+stderr);
                            }
                        });
                        tempTime = stdout;
                    }
                if (error !== null) {
                    console.log('exec error: ' + error);
                }
            });
        });
    })(val);
});

此解决方案来自“飞长’s Blog”的《linux下less开发实时编译工具 by node》文章

三. 使用lessphp 编译LESS 。

lessphp 是使用php写的类来编译LESS 。

官网地址：http://leafo.net/lessphp/

项目托管：https://github.com/leafo/lessphp

四. 使用LESS for Java

官网地址: http://www.asual.com/lesscss/

无障碍实战之视觉隐藏内容

Rainbow — Thu, 03 Nov 2011 22:03:09 +0800

原文来自：http://www.topcss.org/?p=418

作者：进步博客

腾讯ISUX组内做的一个分享，主题是”视觉隐藏内容”，主要关注隐藏的方式、方法及每种方法对可访问性的影响，并着重分析了a & label元素的可访问性，介绍了使用clip来做视觉隐藏。内容有点散，但主题明确，其他组的几个同事来要PPT，现在传至slideshare，错误之处，请指正。

视觉隐藏内容

View more presentations from Lee Jace

一. 概述

Web内容无障碍指南（WCAG）2.0定义了如何使web内容更便于残障人士访问。它定义了web内容无障碍的四项基本原则，即可感知、可操作、可理解和健壮性，为了达到这些基本目标，每条原则之下设置了应遵循的准则，对每一个准则，提供了可测试的成功标准。

分类	作用	示例
完全隐藏	用户交互	display:none;
对屏幕阅读器隐藏	减少干扰	tabindex=“-1”
视觉隐藏（对屏幕阅读器可见）	提供语境信息	text-indent:999em; line-height:99; …

将重复信息和为明眼用户提供的信息从屏幕阅读器访问序列中移除。

头像链接的作用：

明眼用户快速辨识好友，这对视障用户没有意义；
链接至好友主页，与人名链接的作用一致，作用重复；

为了减少干扰，我们可以使用tabindex=“-1”,将头像链接从屏幕阅读器访问序列中移除。

视觉隐藏文本思路

1.为屏幕阅读器提供补充文本
2.通过CSS隐藏这些文本

SEO and Accessibility
High Accessibility Is Effective Search Engine Optimization

二. 隐藏方式对可访问性的影响

视觉隐藏
	–纯文本
	–label文本
	–链接
	–链接文本

视觉隐藏的关注点:

1. 它应使元素消失（仿佛文档中不存在该元素）: –应该没有多余的空白、没有滚动条、不能出现与层叠相关的问题（不可点击）等。
2. 当隐藏容器中的元素获得焦点时，应防止出现意外的滚动。: –即当用户使用tab导航到隐藏容器内的可聚焦的元素时，网页不应该跳跃。
3. 双向（bidi-directional ）字符集语言友好。: –即应该同时支持从右到左，从左到右的界面，如阿拉伯文和希伯来文。

如何检测屏幕阅读器能否访问你隐藏的内容?

使用键盘来访问隐藏容器内的可聚焦元素（可以在容器中添加一条链接）。
如果键盘导航能够跳至隐藏容器内的元素，那么内容是可以访问的。

text-indent: -999em;

作用元素：文本 | inline元素

a.hide-indent {
	display: inline-block;
	width: 120px;
	height: 30px;
	text-indent: -10px;
	overflow: hidden;
}

IE6/IE7下，使用负缩进的方法隐藏inline-block元素内的文本，该元素也会缩进相同的值。

存疑:

text-indent方法不适用于right-to-left 方向的语言（阿拉伯语、希伯来语属于双向（bidi）字符集语言）。

height: 0;

.hide-h0{
    width: 0;
    height: 0;
    overflow: hidden;
    display: inline-block;
}

apple的voice Over无法读出高度为0元素内的内容。

Positioning content off-screen

.hide-offscreen-top{
	position: absolute; 	/*文档流中抽出*/
	top:-9999px; 			/*内容垂直往上移动9999px*/
	left: auto;				/*水平位置与内容原位置相同*/
	width:1px;
	height:1px;
	overflow: hidden;
}

.hide-offscreen-left{
	position: absolute;    /*文档流中抽出*/
	top: auto;			   /*垂直位置与内容原位置相同*/
	left: -9999px;         /*内容水平向左移动10000px*/
	width:1px;
	height:1px;
	overflow: hidden;
}

对于明眼键盘用户的，以上两种方式，正是”视觉隐藏的关注点中第二条”所说的。如果隐藏的内容是垂直偏移（即position:absolute; top:-999em;），那么Tab键跳到隐藏容器内的可聚焦元素时，页面会出现滚动。在任何情况下，即使没有偏移（即position:absolute; left:-999em;，其行为也是混乱的，因为没有视觉线索告诉这些用户他们在页面的哪个位置。

a元素

Techniques for WCAG 2.0

H30: Providing link text that describes the purpose of a link for anchor elements.

一个链接在脱离语境时仍然有意义；
链接文本在它出现的页面上应该是唯一的；（即不同资源不要使用相同的链接文本）
链接文本千万不要使用“点击此处”或“更多”；
不要使用一个长URL作为链接文本；（屏幕阅读器会全部读出来，用户会很烦躁的）。

Using the alt attribute for the img element to describe the purpose of a graphical link.

<a href="routes.html"><img src="topo.gif" alt="查看丽江美景"/></a>
<!--错误的-->
 
<a href="routes.html"><img src="topo.gif" alt="" title="查看丽江美景"/></a>
<!--错误的-->
 
<a href="routes.html" title="查看丽江美景"><img src="topo.gif" alt=""/></a>
<!-- IE 、chrome读title值，Firefox读"空白"-->
 
<a href="routes.html"> <img src="topo.gif" alt="查看成都美景" title="查看丽江美景"/></a>
<!--正确的-->
 
<a href="routes.html" title="查看丽江美景"> <img src="topo.gif" alt="查看成都美景"/></a>
<!--正确的-->
 
<a href="http://www.topcss.org"></a> 
<!--AT在IE下读"www.topcss.org"  Firefox 、chrome下忽略-->
 
<a href="http://www.topcss.org" title="进步博客"></a>
<!--AT在IE下读"进步博客"  Firefox、chrome下忽略-->

Using an empty alt attribute when the anchor (a) \
element contains text that describes the purpose of
the link in addition to the img element. Note that the
link text will appear on the page next to the image.

1
2
3

<a href="routes.html">
	<img src="topo.gif" alt="" />小马哥
</a>

H67: Using null alt text and no title attribute on img elements for images that AT should ignore.

“null” alt ≠ have no alt

<img src="p.jpg" alt="" />
<!--AT 忽略图片-->
 
<img src="p.jpg"/>
<!--AT忽略图片，但不符合规范-->
 
<img src="p.jpg" alt="" title="钟楼" />
<!--IE、chrome 忽略图片 Firefox 读title值-->

H33: Supplementing link text with the title attribute

谨慎使用：

tool tip形式出现，大约5秒后消失
无法控制title属性的内容，如对比度、字体大小、位置，放大器用户可能不能理解
Title旨在提供辅助信息，mouse over元素时出现； alt是在元素无法正常渲染时出现。IE6/IE7会在无title时以tooltip的形式显式alt的值。
屏幕阅读器需要用户手动设置才能读出title值，有的根本就不能。

label元素

<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname"/>
<!--正确的-->
 
<label>First name: <input type="text" name="firstname"/></label>
<!--IE6不支持-->
 
<label for="firstname">First name:
	<input type="text" name="firstname" id="firstname"/>
</label>
<!--nvda会重复读label文本内容-->
 
 
<h3 id="search-header">Search your contact list</h3>
<input type="input" aria-labelledby="search-header">
<!--IE7 | IE8 | IE9 | Firefox 支持-->
 
<input type="input" aria-label="search-header">
<!--IE9不支持 | Firefox 支持-->
 
<!--优先级：aria-labelledby > aria-label -->
 
<input type="input" title="找图片" />
<!-- IE7 | IE8 | IE9 | Firefox 支持-->
 
<input type="input" placeholder="输入名字" />
<!--IE9不支持 | Firefox 支持-->

三. 使用CLIP属性隐藏元素

Clip属性

定义一个绝对定位元素的可见区域。clip: rect(top, right, bottom, left);

top/bottom：定义与盒子顶部边框边缘的距离；

left/right：定义与盒子左边框边缘的距离；

.element-invisible {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	padding:0 !important;
	border:0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden;
}

常用的视觉隐藏方法测试

HTML5的Web标准实战

Rainbow — Fri, 07 Oct 2011 17:30:17 +0800

我记得2009年下半年的时候，我就开始尝试使用HTML5的新元素，具体的说应该是HTML5的结构性元素的使用。

我使用HTML5的结构性元素重构我的博客，刚开始，查看了大量老外博客，也归纳总结了一下使用场景，在什么情况下使用HTML5的新元素代替原有的没有语义性div，还有如何组织文档内容结构也是比较头疼的事情。

虽然看了一下HTML5新元素的名词解释，还是比较迷茫，毕竟是概念性的东西，没有应用于生产的案例来的真实。

当时遇到的问题:

如何让IE也支持HTML5的新元素？
如何正确的使用HTML5的新元素代替HTML4中没有明确语义的标签？
section>等于div吗？
section、article、div 的区别？
如何构建正确的HTML5 Web页面？
等等……

但随着Firefox、Chrome、Opera、Safari和IE9+对HTML5的支持越来越好，也有一些比较知名站点已经开始大量的尝试HTML5新技术了，例如：淘宝，支付宝，去哪儿等站点，但是它们在HTML5结构性元素上的使用，我持有疑问，不敢苟同，我认为对于初学者最好不要模仿它们，会把大家引向误区，最好多看一些老外的网站和(W3C:HTML, WhatWG)，多分析人家是如何重构的，然后再慎重的应用于生产。

对于这些HTML5结构性元素，不单单是使用了语义化类名的div的替代品,更应该是它们使我们的网页更富于语义性、组织性、结构性、模块化…，如果你还是喜欢那些如此缠绕的标签汤和冗余嵌套，我无话可说。如果我们不加思考盲目的使用HTML5结构性元素的话，会陷入结构不明了，主次不分，语义不确定的状态，那和狭义的使用div+css有啥区别。

我们的目标是使用HTML5的语义性标记，尽可能接近地定义内容的含义，并且不会描述表现。

HTML5的Web标准实战,就是我今天要说的“如何使用HTML5的新元素构建一个结构良好，语义丰富的Web页面”。

接下来，我就说一说我们在HTML5实战时的常见误区。

慎用section

不要把section当作div的替代品,人们在使用section的过程中，很容易把section等价于div，会直接用section代替div 。我想说的是“不要把<section>当<div>那样用。”

W3C官方文档中是这样说的：

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.

<section>看起来像是有语义版的<div>，但实际的使用是用在一个专题性的版块，且通常带有一个标题。适合用于章节、标签切换效果的每一个tab容器或论文中有编号的地方，也可以用于网站主页中划分简介、新闻、联系信息等板块(多为一些公司主页的版块化区域，“新闻”版块可能只有简单文章列表而没有正文，此类版块多在主要区域展示.)。

官方还给了一个提示：

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>。

我想W3C的介绍说的已经足够明确，只要谨记一点就不容易用错：<section>不是一个通用的纯容器标签。对这个问题我困惑了很久，因为有些HTML5教程让我迷惑，而很多大网站也是在疯狂的使用<section>作为容器标签。

使用<section>

<section>可以相互嵌套，在页面中定义了一个特殊的顶级区块，于是可以从<h1>开始列提纲而不用担心会破坏网页的纲要。尽管没找到明确说明，但我个人认为在每一层<section>里还是仅使用一个<h1>为佳。

以Wordpress主题为例，我认为与#sidebar相对的#content部分，使用<section>包裹一堆<article>作为页面的主要内容并不太合适。而使用<section>用在整体布局是明显的错误。

在XHTML或者HTML4中，我们常看到这样的代码：

<!-- HTML 4-style code -->
<div id="wrapper">
  <div id="header">  
    <h1>My super duper page</h1>
    <!-- Header content -->
  </div>
  <div id="main">
    <!-- Page content -->
  </div>
  <div id="secondary">
    <!-- Secondary content -->
  </div>
  <div id="footer">
    <!-- Footer content -->
  </div>
</div>

而现在在HTML5中，会是这样：

<!-- Don’t copy this code! It’s wrong! -->
<section id="wrapper">
  <header>  
    <h1>My super duper page</h1>
    <!-- Header content -->
  </header>
  <section id="main">
    <!-- Page content -->
  </section>
  <section id="secondary">
    <!-- Secondary content -->
  </section>
  <footer>
    <!-- Footer content -->
  </footer>
</section>

这样使用并不正确：<section>并不是样式容器。section元素表示的是内容中用来帮助构建文档概要的语义部分。它应该包含一个头部。如果你想找一个用作页面容器的元素(就像HTML或者XHTML的风格)，那么考虑如Kroc Camen所说，直接把样式写到body元素上吧。如果你仍然需要额外的样式容器，还是继续使用div吧。

基于上述思想，下面才是正确的使用HTML5和一些ARIA roles特性的例子（注意，根据你自己的设计，你也可能需要加入div）

<body>
  <header>
    <h1>My super duper page</h1>
    <!-- Header content -->
  </header>
  <div role="main">
    <!-- Page content -->
  </div>
  <aside role="complementary">
    <!-- Secondary content -->
  </aside>
  <footer>
    <!-- Footer content -->
  </footer>
</body>

适合使用<section>标签的地方有：

文章的评论列表，有着整齐的结构；
文章内容的目录，有着文章内部结构纲要；
侧栏widget，在WebDesignWall中我看到了这样的设计，因为widget内容大都是评论列表、文章列表，有着清晰的结构且是独立完整的一部分；
将页面分节为不同主题区域。
把文章划分为各个章节，但要在编辑器完成，目前来看并不易用。
随着标签越来越多样化，把标签用对本来就不是一件容易事，用得完全合理就更难了。好在目前这些东西用户是看不到的，产品经理也不会留意。如果没有强迫症，大可不必纠结与此。

article 与 section 的纠缠

上面我们说了要慎用section,不要把section当作div使用。

div section article ，语义是从无到有，逐渐增强的。div 无任何语义，仅仅用作样式化或者脚本化的钩子(hook)，对于一段主题性（一类事物）的内容，比如博客的侧栏，由许多的模块组成，每一个模块是独立完整的一部分，就非常适合使用 section。article 是一个特殊的 section 标签，它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说， article 会有标题部分(通常包含在 header 内)，有时也会包含 footer 。虽然 section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，article 本身就是独立的、完整的。假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。虽然说section包含的内容也能算是独立的一块，但是它只能算是组成整体的一部分，article 才是一个完整的整体，例如：一篇篇幅很大的文章，就会有分出很多章节，也可以独立成块儿，并配有章节标题，这个时候使用 section 来包裹文章章节是最合适不过了。nav 和 aside 的使用也是如此，这两个标签也是特殊的 section，在使用 nav 和 aside 更合适的情况下，也不要使用 section 了。

当作有语义的模块使用时

例如，我博客的侧栏就是下面的组织方式：

  <aside class="sidebar" role="complementary">
       <section role="region">
           <h3>About Me</h3>
           <p>text,text,text,text</p>
       </section>
       <section role="region">
       		<h3>Recent Posts</h3>
            <ul>
            	<li>text,text,text,text</li>
                <li>text,text,text,text</li>
                <li>......</li>
            </ul>
       </section>
       <section role="region">
       		<h3>Recent Comments</h3>
            <ul>
            	<li>text,text,text,text</li>
                <li>text,text,text,text</li>
                <li>......</li>
            </ul>
       </section>
  </aside>

article 嵌套中section

html4中常见的文档

<h1>Rules for Munchkins</h1>
<h2>Yellow Brick Road</h2>
<p>It is vital that Dorothy follows it—so no selling bricks
as “souvenirs”</p>
<h2>Fan Club uniforms</h2>
<p>All Munchkins are obliged to wear their “I’m a friend of
Dorothy!” t-shirt when representing the club</p>
<p>
<strong>Vital caveat about the information above:
does not apply on the first Thursday of the month.
</strong>
</p>

html5中的做法：

<article>
    <h1>Rules for Munchkins</h1>
    <section>
        <h2>Yellow Brick Road</h2>
        <p>It is vital that Dorothy follows it—so no selling bricks
        as “souvenirs”</p>
    </section>
    <section>
        <h2>Fan Club uniforms</h2>
        <p>All Munchkins are obliged to wear their “I’m a friend of
        Dorothy!” t-shirt when representing the club</p>
        <p>
        <strong>Vital caveat about the information above:
        does not apply on the first Thursday of the month.
        </strong>
        </p>
    </section>
</article>

如上，html4中的文档结构，<h1>和<h2>就比较纠结，这篇文章到底是介绍<h1>以下的所有内容；还是说它只是指<h2>以下的信息。

如果每个段落归那个<h2>管，html4从语义上就无从下手;在HTML5中,<section>元素就可以就可以使其语义明确。

到这儿，也许有人会问，为什么这个内容块儿不使用<article>如果使用了<article>就无法像<section>这样正确地划分这篇文章了，因为这些内容块儿，不是独立的，离散的实体。

section 中嵌套 article

例如有这样的一篇文章，有多个完整独立的主题，一个是关于骆驼的，一个是关于植物的，都主题鲜明，都可以作为独立的专题，这个时候我们希望它们位于不同的栏目中或者是标签界面中不同的选项面板中。

那又如何实现那？HTML4就不多说了，HTML5中是这样的：

<section>
	<h1>Articles about llamas</h1>
    <article>
        <h2>The daily llama: buddhism and South American camelids</h2>
        <p>blah blah</p>
    </article>
    <article>
        <h2>Shh! Do not alarm a llama</h2>
        <p>blah blah</p>
    </article>
</section>
<section>
	<h1>Articles about root vegetables</h1>
    <article>
        <h2>Carrots: the orange miracle</h2>
        <p>blah blah</p>
    </article>
    <article>
        <h2>Eat more Swedes (the vegetables, not the people)</h2>
        <p>blah blah</p>
    </article>
</section>

为什么不把两个<section>写成<article>呢？因为在上面的例子中，每个<section>都是独立的实体的一个集合，其中每个实体都可以聚会，但你通常不会想把集合聚会成一个单独的实体。

article 与 section 是互相纠缠的，但各自的职责是明确的，我们可以有父<section>,它可以嵌套<article>，而<article>反过来可以拥有一个或多个<section>。并非所有的页面都需要这样，但是以这种方式嵌套完全是可以接受的并且是正确的。

正如这样一个例子“想想一份报纸。报纸分成版块。有体育版块，房地产版块，娱乐版块，军事版块，等等。每一个版块都包含文章，而这些文章又划分成小节。”

只在需要的时候使用header和hgroup

写不需要写的标签当然是毫无意义的。不幸的是，我经常看到header和hgroup被无意义的滥用。

header元素表示的是一组介绍性内容或者导航性质的辅助文字。它通常包含了节（section）的标题（一个h1到h6的元素，或者一个hgroup元素），但不是必须的。

header的滥用

由于header可以在一个文档中使用多次，可能使得这样代码风格受到欢迎：

<!-- 不要复制此代码!这里不需要header-->
<article>
  <header>  
    <h1>My best blog post</h1>
  </header>
  <!-- Article content -->
</article>

如果你的header元素只包含一个头部元素，那么丢弃header元素吧。既然article元素已经保证了头部会出现在文档概要中，而header又不能包含多个元素（如上文所定义的），那么为什么要写多余的代码。简单点写成这样就行了：

<article>  
  <h1>My best blog post</h1>
  <!-- Article content -->
</article>

<hgroup>不合理使用

hgroup 是HTML5中新定义的元素，用来将标题和副标题群组。在我们已经有header标签的情况下，为什么我们还要一个<hgroup>标签？

下面是文档关于的描述 <hgroup>的描述：

hgroup一般被用作将一个或者更多的h1到h6的元素群组，比如，一个区块内的标题和它的副标题。

The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.W3C Specification

从定义中我们得知<hgroup>扮演着一个可以包含一个或者更多标题相关的容器的角色,这些标题可能在<header>元素中。它只能包含从h1-h6的标题元素，这些标题可能是副标题、二选一的标题或者标记标题。

在<header>的使用过程中,我们经常会误使用<hgroup>.在下面这种情况下你不能将<header>标签和<hgroup>标签一起使用:

这里只有一个标题,
或者<hgroup>本身就够了(比如:不需要<hgroup>)

第一种情形看上去是下面的样子:

<!-- Don’t copy this code! No need for hgroup here -->
<header>
  <hgroup>
    <h1>My best blog post</h1>
  </hgroup>
  <p>by Rich Clark</p>
</header>

这种情况下,将<hgroup>移除,只保留标题就好.

<header>
  <h1>My best blog post</h1>
  <p>by Rich Clark</p>
</header>

第二种情况也是包含了他们并不需要的标签.

 <!-- Don’t copy this code! No need for header here -->
<header>
  <hgroup>
    <h1>Article title</h1>
    <h2>Article subtitle</h2>
  </hgroup>
</header>

当<header>标签的子元素只有<hgroup>的时候,为什么我们还需要一个额外的<header>? 如果没有额外的元素放到<header>中(比如<hgroup>的兄弟元素),我们直接将<header>元素去掉就好.

<hgroup>
  <h1>Article title</h1>
  <h2>Article subtitle</h2>
</hgroup>

当你的有一个标题有副标题或者其它的和section或者article有关系的元数据时，将<hgroup>和元数据放到一个单独的<header>元素容器中。

<!-- A heading which uses header and hgroup -->
<article>
     <header>
         <hgroup>
             <h1>Article title</h1>
             <h2>Article subtitle</h2>
         </hgroup>
         <p>(<time datetime="2009-07-13">13th July, 2009</time>)</p>
     </header>
     <p>Content…</p>
</article>

我们为什么要使用<hgroup>

我们用<hgroup>一切源起文档大纲(document outline).

当群组的标题在<hgroup>元素的时候，大纲的算法将会覆盖掉群组中低等级的标题，而将最高等级的标题作为大纲。下面的就是一个例子：

<header>
    <hgroup>
        <h1><a href="/">Mini Apps</a></h1>
        <h2>Web applications for iPhone, Android & other mobile platforms</h2>
    </hgroup>
</header>

<hgroup>包含h1-h2的标题元素，但是在大纲中只包含<h1>.就像下图展示的那样子。

我们可以从这个链接查看文档大纲：http://gsnedders.html5.org/outliner/

不要将所有的链接列表都放到<nav>标签

在HTML5新增的30个元素中(在我们写这篇文章的时候),我们在构建更具语义\结构化的标签的时候,我们的选择变得太丰富.也就是说我们对现在给我们提供的这些超级有语义的标签,我们可能会滥用.<nav>就是一个很悲剧的例子.在规范中的描述是这样的:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Note: Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

WHATWG HTML spec

nav元素表示页面中链接到其他页面或者本页面其他部分的区块；包含导航连接的区块。

注意：不是所有页面上的链接都需要放在nav元素中——这个元素本意是用作主要的导航区块。举个具体的例子，在footer中经常会有众多的链接，比如服务条款，主页，版权声明页等等。footer元素自身已经足以应付这些情况，虽然nav元素也可以用在这里，但通常我们认为是不必要的。

WHATWG HTML spec

这里面的关键词是”重要”导航.我们可能会对”重要”有不同的定义,但是我的理解是:

主要导航
网站搜索
二级导航(这个能是有争议的)
页面内链接(比如一篇很长的文章，目录区域)

虽然并没有对错之分,但根据我的理解和一个民意投票让我觉得在下面这些情形下,我不会使用<nav>标签:

翻页
社交类的链接（虽然有些社交类的链接也是主要的链接，比如关于我About me和品味Flavours ）
博客文章的标签
博客文章的分类列表
第三级导航
大页脚

如果你不能确定是否使用<nav>，那就先对你问一下下面的几个问题：“者是否是一个主要链接？”，你可以根据下面的几个因素来回答你刚才的问题：

如果用<section>和标题标签能够解决你的问题，那就不要去使用<nav>–Hixie on IRC
你是不是为了增加可访问性而增加的一个快捷跳转链接呢？

如果上面的回答都是“不”，那可能就不适合使用<nav>.

<figure>元素的错误

<figure>和经常与它合伙作案的<figcaption>，是很难掌握的标签，下面是经常看到的一些小错误。

并不是所有的图片都是figure（注：比较难理解阿，image=图片，figure=图形）

之前，我曾经说过不要写那些不需要的标签。这个错误也是相同的。我经常看到一个网站上的每张图片都有<figure>标签。这些额外增加的标签并不会给你带来任何的益处，并且还增加了你自己的工作强度和让自己的内容变得更难理解。

在规范中关于<figure>的解释如下：“一些文本流，可能包含标题——它们通常是作为文档的主要内容流中的一个自我包含的独立单元。”在那里有完美的表述，就是它可以被从主内容中移除–比如放到边拦，而对文档流没有影响。

如果仅仅是一张表现类的图片而且和文档中其他的内容没有关系的话，那就不需要使用<figure>.”这张图片需要对上下文的内容作出解释吗？”，如果答案是”否”，那就可能不是<figure>(可能是<aside>),”我能把它移到附录里面吗？”，如果这两个问题的答案都是”是”，那就可能是<figure>.

你的标志不是一个<figure>

将上面的延伸开来，对你的logo也是这样。下面是两组我找到的有规律的代码片断：

 <!-- Don’t copy this code! It’s wrong! -->
<header>
  <h1>
    <figure>
      <img src="/img/mylogo.png" alt="My company" class="hide" />
    </figure>
    My company name
  </h1>
</header>
 
<!-- Don’t copy this code! It’s wrong! -->
<header>
  <figure>
    <img src="/img/mylogo.png" alt="My company" />
  </figure>
</header>

这里就不需要说啥了，这是很明显的错误，可能你认为我们说的是不是将logo放在H1标签里面，但是我们在这里并不讨论这个问题。让我们迷惑的是<figure>元素。<figure>标签只用在当有上下文需要说明或者被<section>包围的时候。我这里要说的是你的logo可能很少会被这种情况下使用。很简单，那就不要去这样做，你需要的仅仅是下面的样子。

<header>
  <h1>My company name</h1>
  <!-- More stuff in here -->
</header>

figure只能用在标签上的误解

另一个对<figure>的误解就是我们通常认为它只能用在图片上面。事实上并不是这样子的，它可以被用在 <video><audio>, 一个图标 (比如<SVG>, ), 一个引用, 一个表格, 一段代码, 一段散文, 或者任何和这些相关的组合. 不要把你的<figure>标签仅仅局限在图片上。我们网页制作师的任务就是用标签更准确的描述内容。

这里有一篇更深入讲解 <figure>的文章I wrote about <figure>，很值得阅读的。

不相关信息，<aside>

<aside>,通常用作页面的侧边栏。它表示与aside元素周围的内容无关的内容所组成的一个页面的节，也可以认为该内容与aside周围的内容是分开独立的。

该元素可以用于摘录引用或者是边栏这样的排版效果，用于广告，用于一组导航元素，以及你认为是与页面主内容区分开来的其他内容体。

例如,一个<article>中使用<aside>，是表示该文章的不相关信息或摘录引用的好办法，但是这不是放全页导航的好地方。

<aside>有一个隐式的ARIA角色“note”，但是可以使用 role=”complementary” 或role=”search”（如果它包围着一个搜索表单）。

mark 与 em 和 strong

mark的妙用

<mark> 用来高亮显式文字片断对于用户或页面内容的相关性。

<mark> 元素允许我们标记所做的事情，相当于使用一支荧光笔在打印的纸张上标出一些文字。它与强调不同，对于强调，我们使用<em>。

但是如果有一些已有的文本，并且想要让文本没有强调的内容处于显眼的位置，可以使用<mark> 并将其样式化为斜体，或者使用黄色的荧光笔背景色。

<mark>用于搜索时，标记结果页中搜索关键词的信息是非常合适的。比较用strong 和 em 更合适，至少<mark>没有改变页面的内容的含义。

<em>、<i>、<strong>、<b>的区别

<em>表示内容的着重点（stress emphasis），<strong>表示内容的重要性（strong importance）<strong>不会改变所在句子的语意，em 则会改变所在句子的语义。

<em>是句意强调，加与不加会引起语义变化。<strong>是重要性强调，和局部还是全局无关，局部强调用<strong>也可以，<strong>强调的是重要性，不会改变句意。

<b>和<i> 仅用来使文本呈现粗体和斜体，区别其它文本，不会产生任何语义的变化。

不要去使用那些不必要的type属性

这可能是我们最常见的一些问题，它们并不是真正的错误，但我觉得我们的最好实践还是尽量避免这种模式。
在HTML5中，我们并不需要给<script>和<script>增加 type 属性，如果这些从CMS默认添加的内容中移出是很痛苦的事情，那当你手工编码的时候还写入它们或者你能完全的控制你的模板时候你完全可以删掉它们。因为所有的浏览器都会将<script>解析成Javascript和<script>标签是CSS，你不再需要那个type属性了：

1
2
3

<!-- Don’t copy this code! It’s attribute overload! -->
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/scripts.js"></script>

现在我们可以写成下面的样子：

1 2	<link rel="stylesheet" href="css/styles.css" /> <script src="js/scripts.js"></script>

你也能够对编码的设置作出省略。Mark Pilgrim在Dive into HTML5的语义化一章中作出了解释。

不要包含错误的标单属性

你可能发现<html5>引入了很多新的表单属性。现在我就给大家讲讲一些不合适的使用。

布尔值属性

新引入的标签属性有几个是布尔类型的，它们的标签行为基本接近。这些属性包括：

autofocus
autocomplete
required

坦白的说，下面的这种情况对我来说并不常见，但我们从 required 作为例子，如下：

<!-- Don’t copy this code! It’s wrong! -->
<input type="email" name="email" required />
<!-- Another bad example -->
<input type="email" name="email" required />

基本上看，这段代码并不会带来危害。客户端对 HTML的解析遇到 required 标签属性时，他的功能就会生效。但是当我们将代码修改，录入 required=”false” 的情况呢？

1 2	<!-- Don’t copy this code! It’s wrong! --> <input type="email" name="email" required />

解析的时候依然会遇到 required 属性，虽然你希望加入的行为是假，它依然会被解析成真。
这里有三种合理的方法让布尔值生效。（第二种和第三种方案只有你在写 XHTML 解析的时候需要）

我们上面的例子可以写成下面的样子：

1	<input type="email" name="email" required />

参考资料：

HTML5设计原理

Avoiding common HTML5 mistakes

HTML5 中 div section article 的区别

你须知道的30个CSS选择器

Rainbow — Tue, 27 Sep 2011 22:10:23 +0800

你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器，包括我们最头痛的浏览器兼容性问题。掌握了它们，才能真正领略css的巨大灵活性。

1. *

1	* {margin: 0; padding: 0;}

星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元素的margin和padding设置为0。

*选择符也可以在子选择器中使用。

1	#container * { border: 1px solid black;}

上面的代码中会应用于id为container元素的所有子元素中。

除非必要，我不建议在页面中过的的使用星状选择符，因为他的作用域太大，相当耗浏览器资源。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

2. #X

1	#container {width: 960px;margin: auto; }

井号作用域有相应id的元素。id是我们最常用的css选择器之一。id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10），作为javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以在使用id选择器前，我们最好问下自己，真的到了非用id选择器的地步？

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

3. .X

1	.error {color: red;}

这是一个class(类)选择器。class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

4. X Y

1	li a { text-decoration: none;}

这也是我们最常用的一种选择器——后代选择器。用于选取X元素下子元素Y，要留意的点是，这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有的情况是不宜使用的，比如上述的代码去掉li下的所有a的下划线，但li里面还有个ul，我不希望ul下的li的a去掉下划线。使用此后代选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。这种后代选择器还有个作用，就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

5. X

1 2	a { color: red; } ul { margin-left: 0; }

标签选择器。使用标签选择器作用于作用域范围内的所有对应标签。优先级仅仅比*高。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

6. X:visited和X:link

1 2	a:link { color: red; } a:visted { color: purple; }

使用:link伪类作用于未点击过的链接标签。:hover伪类作用于点击过的链接。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

7. X+Y

1	ul + p {color: red;}

相邻选择器，上述代码中就会匹配在ul后面的第一个p，将段落内的文字颜色设置为红色。(只匹配第一个元素)

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

8. X>Y

1	div#container > ul { border: 1px solid black;}

<div id=”container”>
	<ul>
		<li> List Item
			<ul>
				<li> Child </li>
			</ul>
		</li>
		<li> List Item </li>
		<li> List Item </li>
		<li> List Item </li>
	</ul> 
  </div>

子选择器。与后代选择器X Y不同的是，子选择器只对X下的直接子级Y起作用。在上面的css和html例子中，div#container>ul仅对container中最近一级的ul起作用。从理论上来讲X > Y是值得提倡选择器，可惜IE6不支持。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

9. X ~ Y

1	ul ~ p { color: red;}

相邻选择器，与前面提到的X+Y不同的是，X~Y匹配与X相同级别的所有Y元素，而X+Y只匹配第一个。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

10. X[title]

1	a[title] { color: green;}

属性选择器。比如上述代码匹配的是带有title属性的链接元素。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

11. X[title="foo"]

1	a[href="http://blog.moocss.com"] { color: #1f6053; }

属性选择器。上面的代码匹配所有拥有href属性，且href为http://blog.moocss.com的所有链接。

这个功能很好，但是多少又有些局限。如果我们希望匹配href包含css9.net的所有链接该怎么做呢？看下一个选择器。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

12. X[href*="moocss"]

1	a[href*="moocss"] {color: #1f6053;}

属性选择器。正如我们想要的，上面代码匹配的是href中包含”http://blog.moocss.com“的所有链接。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

13. X[href^="http"]

1	a[href^="http"] {background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

属性选择器。上面代码匹配的是href中所有以http开头的链接。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

14. X[href$=".jpg"]

1	a[href^="http"] { background: url(path/to/external/icon.png) no-repeat;padding-left: 10px;}

属性选择器。在属性选择器中使用$，用于匹配结尾为特定字符串的元素。在上面代码中匹配的是所有链接到扩展名为.jpg图片的链接。（注意，这里仅仅是.jpg图片，如果要作用于所有图片链接该怎么做呢，看下一个选择器。）

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

15. X[data-*="foo"]

在上一个选择器中提到如何匹配所有图片链接。如果使用X[href$=".jpg"]实现，需要这样做：

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
	color: red;
}

看上去比较麻烦。另一个解决办法是为所有的图片链接加一个特定的属性，例如‘data-file’

html代码

图片链接

css代码如下：

1
2
3

a[data-filetype="image"] {
	color: red;
}

这样所有链接到图片的链接字体颜色为红色。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

16. X[foo~="bar"]

属性选择器。属性选择器中的波浪线符号可以让我们匹配属性值中用空格分隔的多个值中的一个。看下面例子：

html代码

1	<a href=”path/to/image.jpg” data-info=”external image”> Click Me, Fool </a>

css代码

a[data-info~="external"] {
	color: red;
}
a[data-info~="image"] {
	border: 1px solid black;
}

在上面例子中，匹配data-info属性中包含“external”链接的字体颜色为红色。匹配data-info属性中包含“image”的链接设置黑色边框。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

17. X:checked

checked伪类用来匹配处于选定状态的界面元素，如radio、checkbox。

1
2
3

input[type=radio]:checked {
	border: 1px solid black;
}

上面代码中匹配的是所有处于选定状态的单选radio，设置1px的黑色边框。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

18. X:after和X:before

这两个伪类与content结合用于在元素的前面或者后面追加内容，看一个简单的例子：

1	h1:after {content:url(/i/logo.gif)}

上面的代码实现了在h1标题的后面显示一张图片。

我们也经常用它来实现清除浮动，写法如下：

.clearfix:after {
	content: “”;
	display: block;
	clear: both;
	visibility: hidden;
	font-size: 0;
	height: 0;
}      
.clearfix {
	*zoom:1
}

19. X:hover

1
2
3

div:hover {
	background: #e3e3e3;
}

:hover伪类设定当鼠标划过时元素的样式。上面代码中设定了div划过时的背景色。

需要注意的是，在ie 6中，:hover只能用于链接元素。

这里分享一个经验，在设定链接划过时出现下滑线时，使用border-bottom会比text-decoration显得更漂亮些。代码如下：

1
2
3

a:hover {
    border-bottom: 1px solid black;
}

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

20. X:not(selector)

1
2
3

div:not(#container) {
	color: blue;
}

否定伪类选择器用来在匹配元素时排除某些元素。在上面的例子中，设定除了id为container的div元素字体颜色为blue。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

21. X::pseudoElement

::伪对象用于给元素片段添加样式。比如一个段落的第一个字母或者第一行。需要注意的是，这个::伪对象只能用于块状元素。

下面的代码设定了段落中第一个字母的样式：

p::first-letter {
	float: left;
	font-size: 2em;
	font-weight: bold;
	font-family: cursive;
	padding-right: 2px;
}

下面的代码中设定了段落中第一行的样式：

p::first-line {
	font-weight: bold;
	font-size: 1.2em;
}

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

（IE6竟然支持，有些意外啊。）

22. X:nth-child(n)

1
2
3

li:nth-child(3) {
	color: red;
}

这个伪类用于设定一个序列元素（比如li、tr）中的第n个元素（从1开始算起）的样式。在上面例子中，设定第三个列表元素li的字体颜色为红色。

看一个更灵活的用法，在下面例子中设定第偶数个元素的样式，可以用它来实现隔行换色：

1
2
3

tr:nth-child(2n) {
	background-color: gray;
}

兼容浏览器：IE9+、Firefox、Chrome、Safari

23. X:nth-last-child(n)

1
2
3

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

与X:nth-child(n)功能类似，不同的是它从一个序列的最后一个元素开始算起。上面例子中设定倒数第二个列表元素的字体颜色。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

24. X:nth-of-type(n)

1
2
3

ul:nth-of-type(3) {
	border: 1px solid black;
}

与X:nth-child(n)功能类似，不同的是它匹配的不是某个序列元素，而是元素类型。例如上面的代码设置页面中出现的第三个无序列表ul的边框。

兼容浏览器：IE9+、Firefox、Chrome、Safari

25. X:nth-last-of-type(n)

1
2
3

ul:nth-last-of-type(3) {
	border: 1px solid black;
}

与X:nth-of-type(n)功能类似，不同的是它从元素最后一次出现开始算起。上面例子中设定倒数第三个无序列表的边框。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

26. X:first-child

:first-child伪类用于匹配一个序列的第一个元素。我们经常用它来实现一个序列的第一个元素或最后一个元素的上（下）边框，如：

1
2
3

ul li:first-child {  
   border-top: none;  
}

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

27. X:last-child

1
2
3

ul > li:last-child {
	border-bottom:none;
}

与:first-child类似，它匹配的是序列中的最后一个元素。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

28. X:only-child

1
2
3

div p:only-child {
	color: red;
}

这个伪类用的比较少。在上面例子中匹配的是div下有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。

<div><p> My paragraph here. </p></div>
<div>
	<p> Two paragraphs total. </p>
	<p> Two paragraphs total. </p>
</div>

在上面代码中第一个div中的段落p将会被匹配，而第二个div中的p则不会。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

29. X:only-of-type

1
2
3

li:only-of-type {
	font-weight: bold;
}

这个伪类匹配的是，在它上级容器下只有它一个子元素，它没有邻居元素。例如上面代码匹配仅有一个列表项的列表元素。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

30. X:first-of-type

:first-of-type伪类与:nth-of-type(1)效果相同，匹配出现的第一个元素。我们来看个例子：

<div>
	<p> My paragraph here. </p>
	<ul>
		<li> List Item 1 </li>
		<li> List Item 2 </li>
	</ul>
	<ul>
		<li> List Item 3 </li>
		<li> List Item 4 </li>
	</ul>
</div>

在上面的html代码中，如果我们希望仅匹配List Item 2列表项该如何做呢：

方案一：

1
2
3

ul:first-of-type > li:nth-child(2) {
	font-weight: bold;
}

方案二：

1
2
3

p + ul li:last-child {
	font-weight: bold;
}

方案三：

1
2
3

ul:first-of-type li:nth-last-child(1) {
	font-weight: bold;
}

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera。

总结：

如果你正在使用老版本的浏览器，如IE 6，在使用上面css选择器时一定要注意它是否兼容。不过，这不应成为阻止我们学习使用它的理由。在设计时，你可以参考浏览器兼容性列表，也可以通过脚本手段让老版本的浏览器也支持它们。

原文来自：The 30 CSS Selectors you Must Memorize

label标签的可访问性问题分析

Rainbow — Tue, 16 Aug 2011 22:31:56 +0800

最近对可访问性的研究比较多一些，有许多可访问性的实施细节，都是我们力所能及的，同时也是一些好的习惯和Web标准的最佳实战。

我在上一篇文章《Accessibility,只需我们改变一点点儿》中说了许多关于可访问性的一些最佳实战，说道 “表单控件元素要使用lable标签关联提示文本”,这样可以有效的扩大表单控件元素的可点击区域，同时也很方便的获得表单控件元素的焦点。

例如:单选框和复选框的操作就非常不方便，可点击的区域就非常小，如果用lable标签把提示文本与表单控件元素关联起来，可点击区域就扩大好几倍,操作起来当然就方便了。因此，label标签的使用对于提高页面的可访问性是很有帮助的。

接下来，我就分析一下label标签的可访问性问题。

label的使用方式

HTML5草案中是这样说的：

The label represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using for attribute, or by putting the form control inside the label element itself.

label标签代表了用户界面上的一个标题，该标题可以与制定的表单控件相关联，即所谓的label元素标记控件。可以使用for属性，或是把表单控件放在label元素的里面实现该关联。

我们最常用的方式有两种，其一是使用label标签的for属性与控件元素的id相关联，其二就是使用label标签包裹控件元素，并且label标签的for属性与控件元素的id相关联。

The HTML Code:

1	<label for="fullname">姓名:</label><input type="text" name="fullname" id="fullname" />

The HTML Code:

1	<label for="fullname">姓名:<input type="text" name="fullname" id="fullname"/></label>

我并不喜欢第二种写法，它在样式控制上非常不方便，例如全部标签等宽并且文本左对齐或右对齐,还有对读屏软件也不是很友好，有复读文本的副作用。

差点忘了还有一种写法，就是label标签直接包裹控件元素,没有属性关联：

The HTML Code:

1	<label>姓名:<input type="text" name="fullname" id="fullname"/></label>

Jace老兄,给我们做了一下分类：显式label 和隐式label。

显式label

也就是说为label元素添加for属性，其属性值与表单控件的id属性值一致。
重置和提交按钮(<input type=”reset”/> 、<input type=”submit”/>)，图片按钮(<input type=”img”/>)以及脚本按钮 (<button></button>)不用使用显式label，因为它们已经有了隐式标签，如value 和 alt 属性值，button元素的内容。

1	<label for="fullname">姓名:</label><input type="text" name="fullname" id="fullname" />

隐式label

根据HTML 4.01 规范，通过label 元素包裹表单控件和label包含的文本可创建”隐式label”。
由于一些浏览器(IE6)不支持隐式label，WCAG2.0不建议使用。

1	<label for="fullname">姓名:<input type="text" name="fullname" id="fullname"/></label>

显式label 和隐式label的混合体

1	<label for="fullname">姓名:<input type="text" name="fullname" id="fullname"/></label>

ARIA States and Properties

使用 aria-labelledby 属性。

The HTML Code:

1	<label id="fullname">姓名:</label> <input type="text" aria-labelledby="fullname">

The HTML Code:

1	<label id="fullname">姓名: <input type="text" aria-labelledby="fullname"></label>

看一个完整测试和结果：主流浏览器和屏幕阅读器控件标签化支持测试

得出的结论：

显式label是最健壮的方式,也是最佳实战。
隐式label, 在屏幕阅读器NVDA 中会重复内容，会带来没必要的干扰。
aria-labelledby属性，在主流浏览器中可以获得更好的可访问性。
显式label 和隐式label的混合体，固然强大，隐式label的恶习留下了。

参考资料：

Form labels: visible and hidden

HTML5 Accessibility Chops: form control labeling

Accessibility,只需我们改变一点点儿

Rainbow — Wed, 10 Aug 2011 22:27:55 +0800

Accessibility这个词频率这么高，但是一直没有深究过。通过”D2前端技术论坛“这个平台，几个专题下来，我意识到它的重要性，我们在感受互联网带来幸福的同时，却把残障人士也应该得到幸福给无形的隔开了。

中国是全世界盲人最多的国家约500万盲人,占全世界盲人口的18%.每年在中国约有45万人失明,如果允许目前的趋势继续保持不变,到2020年预期中国盲人将增加4倍,如果让500万人口的盲人兄弟组成一个国家的话，他们在200多个国家中排名是110多位左右。

网页可访问性设计,只需我们改变一点点儿,盲人兄弟们也可以向我们一样畅游网络世界。

Accessibility是什么？

关于Accessibility，按照英语的构词法，”可访问性”没有任何问题。且”性”有”能力”的意思，因此”可访问性”即可被理解为”网页可被访问的能力”。而”无障碍性”则没有了”访问”的意思，如果要使用的话，也应该是”无访问障碍性”。综上，”可访问性”虽称不上完美，但仍差强人意。

可访问性(Accessibility)是互联网产品用户体验的指标之一，即网站的服务与内容能被用户访问到。

主演能够解决的问题：

应付极端环境下的正常浏览需求；
结构、表现、行为跨终端跨平台兼容支撑；
保障残障人士无障碍信息获取；
强化搜索引擎友好。

可访问性专题：页面的可访问性设计

ARIA (Accessible Rich Internet Applications)基础

WAI-ARIA( Web Accessibility Initiative – Accessible Rich Internet Application)是W3C 的无障碍网页倡议（WAI）工作小组一直在倡导大家使用的无障碍网页应用技术。它是一套独立的规范，它弥补了HTML中的不足，帮助Web应用程序和Web页面变得更具可访问性。主要是用来解决应用了大量Ajax, HTML, Javascript和SVG等丰富前端技术的网页更具备可访问性的问题。所以说ARIA是web app 与AT(可访问性工具) 的桥梁。例如，我们经常见到的Dialog 、弹出层，模拟select 的下拉菜单等Web widget 小组件等都没有提供所需的语义作支持，辅助性技术很难做出分析和解读，当然残障人士也无法获取有效的信息流,可见它的重要性。

屏幕读取器、语音识别软件和屏幕键盘均通过特定的语义标识（title、button~）读取网页组件本质信息，而WAI-ARIA 角色标准在语义化标识约定方面起至关重要的作用。

ARIA的目标是，通过引入浏览器和辅助性技术能够识别的一系列的新属性，来弥补这种情况。

ARIA对于开发者来说并不是万能药和救命稻草，我们应该正确的使用语义性的标签，来建立良好的文档结构，只有这样，我们再使用ARIA辅助语义，才能使我们的网页更具有可访问性。

ARIA规范说:“我们期望，随着时间的流逝，主语言将会通过改进，能够为之前只能使用WAI-ARIA声明的那些对象提供语义。当给定功能的本地语义变得可用时，开发者应该开始使用本地功能，并且停止使用WAI-ARIA来实现该功能”。

WAI-ARIA技术主要包括三个方面：

一. Role (描述区域作用或组件类型。侧重语义信息。)

WAI-ARIA定义了几种角色，告诉辅助性技术一个文档的重要部分和结构。常见的一些如下：

role=”application” (Web App一些小控件)
role=”article”
role=”banner” (company logo和 site slogan)
role=”complementary” (相当于主题内容的补充说明区域，包括，联系信息，Extra区域，博客的相关文章，博客和新闻的侧边栏)
role=”contentinfo” (版权信息区域，包括版权声明，链接隐私声明)
role=”document” (整个页面)
role=”form”
role=”heading” (标题区域)
role=”main” (内容主体区域)
role=”navigation” (导航条或菜单区域，通常情况下，就是您的网站的各种功能的链接。)
role=”search” (搜索区域),搜索框
role=”region” (通用模块区域)

ARIA landmark role example 1 (一个完整的页面是如何使用角色的)

http://www.w3.org/WAI/PF/aria/roles

HTML5结构元素，对应的WAI-ARIA role

HTML5 Element	WAI-ARIA Role
<article>	article
<aside>	note, complementary, search
<footer>	contentinfo
<header>	banner (see note)
<nav>	navigation
<section>	region, contentinfo, main, search

二. State/property (描述状态与属性)

Web App 中 ARIA States and Properties的应用场景：

ARIA States and Properties
State	Examples
activedescendant	Radio 3
atomic	Live Regions
busy
checked	Checkbox Checkboxtristate E-mail grid
controls
datatype
describedby	All Examples
disabled	Checkbox 4 Checkboxtristate 1
expanded	Tree
flowto
hasparent
haspopup
invalid	Tooltip 2
labelledby	All Examples
multiselectable
pressed	Button
readonly
selected	Button Combobox
required
valuenow	Slider
valuemax	Slider
valuemin	Slider
tabindex	All examples
politeness	Live Regions
relevant	Live Regions

参考资料:http://test.cita.illinois.edu/aria/(ARIA(role ,states and properties)各种web app的完整测试例子)

三. keydown + tabIndex (键盘操作的快捷方式)

开发和测试可访问的 Web 应用主要有以下几个步骤：

Webking 进行静态检查，通常由开发人员在单元测试时进行，检查 HTML 页面中不满足 CI162 所对应列表的项。目前由于 WebKing 不支持 ARIA，很多 ARIA 的标签不能被正确的识别，所以 WebKing 检查出的错误需要一一去检查区别是真正的违反 Checklist 还是由于 WebKing 不能识别 ARIA 的标签引起的。
键盘支持，要求所有能通过鼠标完成的操作用键盘都能达到同样的效果。
高对比度的支持：在高对比度模式下，屏幕只有黑白两色，要保证 Web 应用在这种模式下不丢失信息。
读屏软件的支持，通常由测试人员完成。测试人员模拟盲人使用读屏软件，要保证页面上的内容基本都能为读屏软件所识别，并且能完成各种操作。

最佳实战：

一. 正确使用语义化标签,以获得完美文档结构。

1. 表单元素要使用lable关联提示文本。

2. img 标签

img标签在任何时候都必须拥有alt属性，这对读屏软件、搜索引擎、图片地址失效等都有好处的。
嵌入图像中的文字必须包含在alt文本中。
装饰性图片应该由CSS处理。
链接中增强文本的图像，alt可以设置为空（一个alt属性值为空的图像和与图像配套的文本）。或者是用于装饰性的图片，则需设置 alt 为空，使得读屏软件可以忽略此元素。
当链接内只有图像元素时，那么alt文本应描述链接的功能，而不是图像。

3. a标签

一个链接在脱离语境时仍然有意义。
链接文本在它出现的页面上应该是唯一的（即不同资源不要使用相同的链接文本）。
a标签一定要有href属性。

4. 像span等没有tab焦点的元素如果绑定onclick，要增加tabindex属性的控制。

二. Tab键

Tabindex 属性的使用可以使得原本无法取得焦点的元素获取焦点。目的是为了使用户可以用键盘访问任何可以用鼠标访问的元素。我们知道，使用 Tab 键可以按文档顺序 tab 到所有可以获取焦点的元素。Tabindex 可以设置为 -1， 0 或者是任何自然数。

Tabindex = 0 就使原本无法获取焦点的元素(例如span,em,strong,code等等)可以在用户 tab 的时候获取焦点，并且按照文档顺序排列。即，恢复到自然顺序。
Tabindex = -1 使得元素可以获取焦点，但当用户用 tab 键访问的时候并不出现在 tab 的列表里面。可以方便的通过 JavaScript 设置上下左右键的响应事件。非常有利于应用小部件（widget）内部的键盘访问。
Tabindex 设置小于 0 的值，将使得被设置的节点不再能够获得焦点。
Tabindex 设置为大于 0 的数字则可以控制用户 Tab 时候的顺序，但是会打乱文档流中的正常顺序，一般很少用。

当用户使用 Tab 键浏览页面时，元素获取焦点的顺序是按照 HTML 代码里面元素出现的顺序排列的，有时跟实际看到的页面顺序并不一致。如浮动布局。

杜绝非法中断Tab。盲人站长深恶痛绝的onfocus=”this.blur()”。

三. Title

自从w3c标准普及以后，出现了许多极端应用的例子，第一a标签内title不是必须使用的，第二title可以用在除了base, basefont, head, html, meta, param, script和title之外的所有标签上。

描述非文本内容(例如：icon图示的辅助说明)
补充说明文本内容(例如：导航系统的各条中，使用title主要作用是做补充说明)
操作指引 (例如：表单元素上使用title,可以为用户提供更精准、得体的操作指引,一定程度上可以代替文字说明。)

参考资料：使用Title提升可访问性

四. 替换文本(设置图片的Alt属性,Object对象的文本替换)

所有非文本内容呈现给用户时必须提供一个可供选择的替代文本去表达这些内容。

所设置的替代文本必须具有语义，能够使用户清楚它所要传达的意义。

每张图片都需要有替代文本:

纯粹修饰性质的图片设置其为空
与语义文本相邻的图片设置其为空
组合图片只需为第一副图片设置替代文本，其他图片设置为空

五. 减少新开窗口提升可访问性

1. 应该强制target=_blank :

文件下载链接
文件打印链接
非主线任务并打断进程的链接(需要前后对比的帮助，注册表单的隐私条款都有必要target=_blank)

2. 可选择target=_blank

跨域名链接
跨应用平台链接
布局改变链接

3. 不能强制target=_blank

导航链接
面包屑导航
tab条目链接
返回操作链接
翻页链接
表单

参考资料:减少新开窗口提升可访问性

六. 高度对比模式下注意事项:

CSS background 不可用。即,所有在CSS中设定的带有background属性都不可用。

白色的图片在白色系高对比度模式下无法看到，黑色的图片在黑色系高对比度模式下无法看到。

兼容高对比度模式的两种方式：

添加无background支持时将替代文本显示的CSS样式
将部分background替换为image，将css sprite替换为image sprite

参考资料： Foreground <img> Sprites – High Contrast Mode Optimization

辅助工具

无障碍在线测试工具（WAVE）
无障碍软件安装：
http://firefox.cita.uiuc.edu/#install

无障碍网站测试：
http://test.cita.uiuc.edu/aria/nav/nav1.php
http://www.gov.hk/sc/about/accessibility/assistivetools.htm

DIV 高度100%

Rainbow — Tue, 09 Aug 2011 17:18:53 +0800

DIV 高度100%,也是我们比较常用的一个做法，那么如何高度100%自适应和兼容所有的浏览器是我们今天要讨论的小技巧。

一个简单的应用场景是：

    <!DOCTYPE html>
    <html>
        <head></head>
        <body>
             <div id="content">内容</div>
        </body>
    </html>

根据上面的场景，我们要实现，ID为content的DIV高度100%，我们首先想到的做法是

1 2	html,body{height:100%;} #content{height:100%;}

内容满一屏或小于一屏的时候正常以上做法还能用，相反内容超过一屏的时候，ID为content的DIV设置的背景色或背景图片时就不是那么完美了，这个时候它只有一屏背景色或背景图片，超出一屏在第二屏显示的就没有背景色或背景图片了，被截取了。

这个时候，通过测试发现IE6坚挺着，没问题，满足需求。而其它的ie7+ 和 moz & webkit 核心的浏览器都无法满足需求。

接下来，就需要我们补救了。

html,body{height:100%;}
#content{
	height:auto!important; /*for ie6 bug and ie7+,moz,webkit 正确*/
	height:100%; /*修复IE6,all browser*/
	min-height:100%; /*for ie6 bug and ie7+,moz,webkit 正确*/
}

就这样,DIV 高度100% 自适应完美的实现了。

放出另一个案例,”用Div模仿Frame框架（简单的，酷的）",就是“DIV 高度100%”的集中应用。

Scala学习资源

Rainbow — Sun, 17 Jul 2011 21:11:35 +0800

国外经典的Scala教程，Scala与Java的语法对比和异同，还有Scala语法指南。

blog.moocss.com

坚持，改变，像树一样成长！2012…

相关日志 »

如何定义IE的文档兼容模式

语法：

注意X-UA-Compatible放置的位置，MSDN《定义文档兼容性》中是这样说的：

正确的语法规则：

1.定义多种文档模式时，使用逗号（,），而非文档中提到的分号（;） 。

2.或者以逗号升序连写的方式

相关日志 »

LESS的多种运行方式

LESS是一种动态样式语言。

一. 客户端上编译。

二. linux node下编译。

三. 使用lessphp 编译LESS 。

四. 使用LESS for Java

相关日志 »

无障碍实战 之 视觉隐藏内容

一. 概述

头像链接的作用：

视觉隐藏文本思路

二. 隐藏方式对可访问性的影响

视觉隐藏的关注点:

如何检测屏幕阅读器能否访问你隐藏的内容?

text-indent: -999em;

存疑:

height: 0;

Positioning content off-screen

a元素

谨慎使用：

label元素

三. 使用CLIP属性隐藏元素

Clip属性

相关日志 »

HTML5的Web标准实战

当时遇到的问题:

慎用section

使用<section>

适合使用<section>标签的地方有：

article 与 section 的纠缠

当作有语义的模块使用时

article 嵌套中section

section 中嵌套 article

只在需要的时候使用header和hgroup

header的滥用

<hgroup>不合理使用

我们为什么要使用<hgroup>

不要将所有的链接列表都放到<nav>标签

<figure>元素的错误

并不是所有的图片都是figure（注：比较难理解阿，image=图片，figure=图形）

你的标志不是一个<figure>

figure只能用在标签上的误解

不相关信息，<aside>

mark 与 em 和 strong

mark的妙用

<em>、<i>、<strong>、<b>的区别

不要去使用那些不必要的type属性

不要包含错误的标单属性

布尔值属性

参考资料：

相关日志 »

你须知道的30个CSS选择器

1. *

2. #X

3. .X

4. X Y

5. X

6. X:visited和X:link

7. X+Y

8. X>Y

9. X ~ Y

10. X[title]

11. X[title="foo"]

12. X[href*="moocss"]

13. X[href^="http"]

14. X[href$=".jpg"]

15. X[data-*="foo"]

16. X[foo~="bar"]

17. X:checked

18. X:after和X:before

1.定义多种文档模式时，使用逗号（,），而非文档中提到的分号（;）。

无障碍实战之视觉隐藏内容

显式label 和隐式label的混合体