从Mozilla Aurora 11起，火狐浏览器里实现了一些新功能，其中一个就是对电池状态接口的基本实现。这个很简单的接口能提供你关于电池当前电量，是否在充电等信息，以及一些电池状态变化事件。让我们来看看效果！

当你在人群中谈论到“HTML5”，你也许会感觉到，自己像一位异域舞者或独角兽，来到屋子中间，带有明显的“我很酷，我知道它”的意味。这不能说我们虚荣，多少年来，基本的HTML API一直没有任何发展。尽管新式的浏览器中实现了很多HTML5特征，但大部分程序员仍对一些小的、非常有用的API不了解或从未听说。本文中我将介绍一些这样的API，并欢迎大家发掘出更多不为人知的HTML5 API！

估计很少人知道HTML5 APIS里有一个window.postMessage API。window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作的

JavaScript弹出窗口很讨厌，所有人都不喜欢弹出窗口，但很多网站认为弹出框口很有用，需要弹出窗口。对于开发这样的网站的程序员，他们有个棘手的问题，他们不知道这些弹出窗口是否被浏览器或各种浏览器插件给屏蔽了，没有弹出来。当然，浏览器会通知用户，但这些很少会引起用户的注意。下面是一个简单的方法来测试你的弹出窗口是否被阻拦了。

喜欢使用jQuery的朋友应该知道jQuery里也有相应的$.data()方法，没错，HTML5里的这个原生的dataset就是来替代它的，如果你的页面只需要简单的操作data-*自定义属性，就不需要引入这些体积越来越多的jQuery工具库了，不是吗？

在JavaScript和JavaScript工具库里征战多年，我经常有这样的遐想：什么时候现代浏览器里能提供一些辅助方法和类库，替代那些JavaScript工具库，比如jQuery，让我们用浏览器原生的方法替代它们。我知道浏览器必定会向这个方向改进，但这个进化过程不会很迅速，而且各种浏览器需要共同做这样的革新，火狐浏览器、谷歌浏览器、特别是IE，

HTML5规范里有一个被大家忽略里的好东西，那就是右键菜单。HTML5里的右键菜单规范显示，程序员可以通过创建简单的HTML5menu和menuitem标记来生成右键菜单。菜单只在指定区域的右键菜单内显示。所以，你不需要再通过创建浏览器插件来实现这种效果。

我相信很少人知道JavaScript里还有这样一个很有用的东西：DocumentFragment。程序员可以使用DocumentFragment将一批子元素添加到任何类似node的父节点上，对这批子元素的操作不需要一个真正的根节点。程序员可以不依赖可见的DOM来构造一个DOM结构，而效率高是它真正的优势，试验表明，它比直接操作DOM快70%。

CSS就像迷一样让人想不透；我们喜欢CSS，是因为它很简单，但我们又不停的要求它提供更多的功能。CSS里已经新增的特征有placeholders, 动画技术和click events等。但有一个问题是，CSS是静态的；完全没有逻辑操作。可CSS里的calc函数却打破了这种趋势，它提供了程序员使用CSS编程计算的能力。

:target是CSS里一个非常有趣的伪选择器。它在CSS里发生效力的过程是这样的：当浏览器地址里的hash(地址里#号后面的部分)和:target伪选择器指定的ID匹配上时，它的样式就会在这个ID元素上生效。让我们看一看这个:target伪选择器是如何起作用的：

随着浏览器技术的进步，CSS动画技术已经不是只那些简单的淡入淡出效果或幻灯片效果，它们能做很多更强大的事情。我曾经向大家展示过闪光的logo，燃烧的火狐狸，多重嵌套动画等例子，今天，我们将要制作一个简单但非常酷的3D翻转菜单。

现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像JavaScript，它能够：

HTML5的变革给我们带来了大量非常有用的新属性，比如placeholder, download, hidden，等等。每一种新属性都给我们带来了对页面元素新的控制方法和控制效力。特别的，有一个新的属性，它能让我们控制多个元素的属性，就是：scoped。style标记上新出现的这个scoped属性可以让CSS样式只对局部元素生效

HTML5给我们带来了很多非常简单但却非常强大的HTML属性：placeholder, download, and autofocus，等等。另外一个新出现的属性就是hidden属性。当一个网页元素有了hidden属性后，它的表现跟CSS的display: none;作用非常相似，元素将会消失，而且不占用任何页面空间。

HTML5给我们带来了一大堆神奇的东西。以前需要用JavaScript和Flash完成的任务，例如表单校验，INPUT placeholders , 客户端重命名下载文件和音频/视频，这些都可以使用基本的HTML完成。这里要讲的一个简单的HTML5功能是当页面加载完成时让输入焦点自动落到某个元素上；这个动作用autofocus属性完成。

HTML5给我们带来了很多“重型”的特征，例如WebSockets，Web Workers，History, Storage 和一些像 classList 这样的工具类。然而，也有很多小的非常好的特征；其中一个就是新添加的download属性。download属性能让我们指定浏览器下载时采用新的文件名称。而不是链接上原始的文件名称。

HTML5里新引入很多有趣的新特征；有些体现在HTML里，有些是JavaScript API，全部非常的有用。其中我最喜欢的一个特征就是文本框(INPUT)里的placeholder属性。placeholder属性能够让你在文本框里显示提示信息，一旦你在文本框里输入了什么信息，提示信息就会隐藏。

随着CSS技术的不断革新升级，我们获得了更多的控制样式的能力。一个不是那么众所周知的技术就是我们可以在浏览器里美化被选择的文字的样式。Windows自身提供的是一种很难看的墨绿色的颜色，而苹果电脑上提供的是浅绿色。火狐浏览器，IE9，Opera和谷歌浏览器允许我们自定义被选择文字的颜色

最近我学到了一种很酷的技术，使用CSS3的steps()动画属性来生成PNG背景动画。这种技术的主要功能是利用铺贴PNG背景图的方式“重现”GIF图的动画效果。我的朋友都知道，年轻时候我非常痴迷《街头霸王》游戏，而当我看到了这个素材….你知道我的脑子里想到了什么吗？

我曾在Addy Osmani的博客里看到过这种效果。这种当鼠标悬停时光泽一闪而过。十分的简单，但非常的漂亮。在重新设计网站版面时，我很想在我的logo上使用这种效果。只需要两个HTML元素和一个CSS变换，我就能创造出我自己的闪光效果。让我们来实现它！

Mozilla在移动世界大会上宣布它的火狐操作系统(Firefox OS)的同时，也宣布了它的合作伙伴，里面至少有3家中国公司，在无疑让人感到兴奋。Firefox OS很有可能会改变那些发展中国家的生活方式，在发达国家中也将会有相当的影响。在合作伙伴官方网页上，有一个绚丽的火狐的动画，我无法放过要对它写点什么的机会——让我来告诉你它是如何制作出来的！

我最无法忍受的一个事情就是多余的代码。不论是页面中的CSS还是JavaScript，还是浮肿的HTML代码或没有优化的图片，这是我们的懒惰和错误让成千上万的访问用户受连累。有一个非常棒的工具，叫做Helium，它能帮助程序员找出样式表中无用的或有问题的样式规则。让我们来看看是如何使用它!

计数器(counter)，“老一辈”程序员估计对这个东西印象深刻，早期的网站页面上经常会有这个东西，如今这种特征都变成了笑话。CSS里自己实现了一种计数器，很简单，很直接。使用CSS计数器，你可以实现简单的纯CSS的计数功能，并能将其显示到页面上。下面我们简单的看一下CSS计数器是如何使用的！

如今的这个年代，流行在Web页面上使用了大量的JavaScript，我们需要寻找各种方式来优化它们，使它们更快。我们使用事件委托来让事件监听器更有效率，使用降频技术来限定某些方法的使用次数，使用各种JavaScript加载器来动态加载我们需要的资源，等等。

网页中JavaScript最基本的功能是监听或响应用户的动作，这非常的有用。用户的动作有些频率非常高，有的十分罕见。有些监听器函数的执行如闪电般完成，而有些繁重的会把浏览器拖死。拿浏览器窗口的resize事件来说，这种事件会在浏览器窗口大小的每一尺度变化都触发一次，如果监听器体量很大，你的浏览器很快就会被拖垮。