如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了。使用事件委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。基本概念非常简单，但仍有很多人不理解事件委托的工作原理。

我喜欢到一些大型网站上去翻阅它们的原代码，期望能找到一些可以应用到自己的代码中的模式，或发现一些之前从未听说过的工具和技巧。可是，在我查看这些大型网站的源代码时，经常会发现一个问题，那就是重复的代码执行，重复的功能应用。

记得年轻时我在IE6上开发，绝望的希望IE6能支持display: inline-block功能。当需要在”inline”元素上控制margin和padding时，inline-block属性值变得非常有用，有了它，你不在需要让这些元素去“block”和“float”。但有一个问题，当使用inline-block时，HTML元素之间的空白会显示在页面上。很讨厌。有几种方法可以除去这些空白；其中一个非常巧妙。

@supports是CSS和JavaScript规范中非常有用的补充。对浏览器新功能的检查已经是我们编程中非常常见的必要工作。@supports给我们提供了更底层的支持，而之前多少年我们都是用自定义方法实现。我估计，接下来的几年里，随着flexbox布局的普遍流行，我们将会看到对@support标记更加广泛的使用。

几个星期前，我发了一条微博说我喜欢返回函数的函数。很快就出现了几个回复，基本是都是….什么东东？！对于一个程序员来说，理解返回函数的函数是一个非常重要的技能，使用它你能节省很多代码，让JavaScript更高效，让你进一步理解JavaScript的强大之处。下面是我写的几个简单的例子，我希望通过它你能理解我所表达的意思。

不管我们对浏览器类型前缀有多么的讨厌，我们都不得不每天面对它，否者有些东西不能正常工作。这些前缀的用法有两种：在CSS里(例如“-moz-”)和在JS里。有一个神奇的X-Tag项目里有一段很聪明的JavaScript脚本，可以用来判断当前使用的是什么前缀——让我来展示它是如何工作的！

CSS伪元素(pseudo-elements)非常的有用——你可以用它制作出CSS三角形，用在提示框上面，还可以用它完成很多简单的任务，而不需要多余的HTML元素。以前，伪元素的CSS属性是无法用JavaScript获取的，但现在，有了一个新的JavaScript方法可以访问它们！ 假设你的CSS代码是这样的：

我是一个性情乖戾的web用户，但我想这也帮助促使我成为了一名优秀的Web开发人员。当我看到一个网站上有让人不爽的设计时就会非常的恼怒，一些很简单的东西为什么做不好？下面是5种常见的可用性方面的错误，以及如何纠正这些问题的方法。给自己方便，也与人方便，确保自己不要犯这样的错误。

CSS背景动画很长时间以来都是一个热门话题，很多时候都是因为效果特别绚丽，而且不需要额外的技术。最近有人问我是否可以给页面上一个指定的元素安排多重背景动画，答案是yes….虽然有些限制因素。让我们来看看如何实现这个效果！

CSS类名的结构性和统一性非常的重要，有些程序员喜欢使用首字母大写，有些喜欢用连接线，有些喜欢用下划线。最近我发现的一个非常有意思的东西是，在HTML和CSS里，你可以用Unicode(包括中文)来命名类名。不信咱们就试一下！

有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏，普通屏，平板，手机？知道这些特征，我们web应用的CSS和JavaScript才能同步做相应的操作。在给Mozilla Developer Networks改版设计的过程中，我发现使用CSS媒体查询(media queries)虽然非常的有效，但有时

这些全屏API都超级的简单，而且超级的有用。我第一次是在MDN’s BananaBread demo中看到这个API的，那是一个枪击游戏，正好需要全屏化，它使用了事件监听来检测全屏状态。记住这些好用的API，需要的时候可以顺手拈来。

动态加载Javascript是一项非常强大且有用的技术。这方面的主题在本站已经讨论了不少，我也经常会在一些个人项目上使用RequireJS和Dojo加载js。它们很强大，但有时候也会得不偿失。如果你使用的是jQuery，它里面有一个内置的方法可以用来加载单个js文件。当你需要延迟加载一些js插件或其它类型的js时，你可以使用这个方法。下面就介绍一下如何使用它！

随着浏览器不断的升级改进，CSS和JavaScript之间的界限越来越模糊。本来它们是负责着完全不同的功能，但最终，它们都属于网页前端技术，它们需要相互密切的合作。我们的网页中都有.js文件和.css文件，但这并不意味着CSS和js是独立不能交互的。下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道！

CSS动画非常的有趣；这种技术的美就在于，通过使用很多简单的属性，你能创建出就连皮克斯动画制作公司也会赞叹的漂亮的消隐效果。其中代表性的一种就是CSS图片翻转效果，能让你看到一张卡片的正反两面上的内容。本文就是要用最简单的方法向大家介绍如何创建这种效果。

在一些像维基百科这样的信息类网站上，把外部链接用某种形式标明出来是一种常见的做法。对于浏览者，这能方便的告诉他将访问一个外部资源。很多网站会在服务端检查外部链接，并在链接上加入`rel=external`属性或`external`类来区别这些链接。

起初，IE其实也是一款非常有进取心的浏览器。但经过一段时间的蛰伏后，它已经成为了我们生活中的一道障碍。微软现在又重新开始向其它浏览器发起挑战，但事实情况是，新版的现代IE浏览器一直滞后于谷歌浏览器和火狐浏览器。

进入2014年后，我们这些Web开发者开始慢慢发现需要面对一种困难，就是传统的JavaScript技术开始失效。很多年来我们一直依赖的那些JavaScript技巧技术，在如今CSS3兴起的情况下，很多的特效被浏览器内置的CSS功能替代。以前我们一直需要的一个功能——JS动画中结束时会触发回调函数——现在改用CSS动画后，如何触发这些回调动作？

CSS动画是当前一种非常火爆的技术，我说的并不是一些简单的颜色变换或长短属性变换，我说的是3D变换技术；纯CSS实现的翻滚旋转立方体就是最典型的例子。网上能找到很多关于CSS动画的代码，但对于一个程序员来说，真正理解其为什么会动起来的原理是非常重要的。

使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧，通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法，然后进一步了解::before和::after伪元素的用法。

我一直使用printf调试程序，一般来说都是比较顺利，但有时候，你会发现需要更好的方法。下面几个JavaScript技巧相信你一定会觉得十分有用，比如，有时候你会发现DOM不受你的控制，自己会发生一些奇怪的变化，让你很难找出问题的根源。谷歌浏览器的开发工具里有一个超级好用的功能，专门可以对付这种情况，叫做”Break on…”，

相信大家都见到过这样神奇的技术：一副线条构成的画能自动画出自己。非常的酷。Jake Archibald是这种SVG技术的首创者，并且写了一篇非常好的文章来描述它是如何实现的。其实我没有什么好增补的，只是想把这种技术说的更明白些，所以，在这里我要用我的方式把这种技术再讲解一遍。

SVG里属性d里的每一部分都是告诉浏览器生成一个动作——移动到某一个点，开始画一条线，画一个贝齐尔弧线，等等。关于这些数据是如何变成动画，变成一条慢慢画出的线，这是个非常复杂的问题，幸运的是，我们不用考虑这些。我可以使用颜色和设置点的宽度，让SVG路径变成一段一段的点线，并控制点的偏移量：

在一个移动信息化和本地化同时存在是世界里，HTML5就成了这两种平台之间的桥梁。HTML5是开发多功能网站和Web应用的未来技术选择。你的编程技术是跟未来软件开发趋势同向而行吗？测一测你的HTML5和CSS3知识有多少，看看你能得多少分。

我在reddit上发现了一张圣诞树动画图片，好奇心驱使我使用JavaScript制作了一个相同效果的树：新年快乐！。祝愿大家在新的一年里心想事成，马到成功！