在@font-face网络字体技术之前，浏览器显示网页上文字使用的字体只能限制在电脑里已经安装的几款字体里。而且每个人的电脑里安装的字体是因人而异的。@font-face的作用是从网上下载并使用自定义字体，使页面显示字体不依赖用户的操作系统字体环境。

如果你使用谷歌浏览器或火狐浏览器，你会发现页面上的textarea元素的右下角有个小三角，用鼠标箭头拖拽它，你的textarea就能随着放大或缩小。这是现代浏览器为方便用户而添加的一个辅助功能(很遗憾，不包括IE，如果你使用IE，是看不到的。)。Web程序员在设计网页时，一般给了textarea一个固定的长宽，通常是配合布局而设定。但挑剔的用户往往会认为太小或太大。有了这个可以调整大小的工具后，用户就可以自己选择合适的大小了。

也许是因为我们的文字都是从左到右写的，所以才导致HTML规范中所有跟布局相关的设计都是倾向于左右布局。所以才导致左右居中非常容易，而上下竖向居中经常会出错。在《如何竖向居中》这篇文章里曾介绍过两种竖向居中的方法，但每种方法都有自己的局限。于是技术是第一生产力的真理又一次发挥作用

你知道有什么工具能找到页面中样式文件里无用的CSS吗？之前我介绍过一个用JavaScript找到无用CSS的方法，但事实上，我们并不想知道哪些CSS规则是无用的，我们想要的是一个没有多余CSS的干净的样式文件。所以，这个叫做uncss的NodeJS工具就是我们要找的了。下面我们来看看uncss是如何使用的！

在各种技术论坛里经常会有这样的问题提出，“我如何能将这个东西竖向居中？”这个问题通常会跟随着这样一句话，“我使用了 vertical-align:middle，但是不管用！ ”这个问题其实有三个层面的原因

Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。本文中，我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。

最近网上热炒的一个话题是如何用CSS美化半个字符。就是把一个字符劈成两半，一半是A样式，一半是B样式。当然，大家都知道，不论是中文字符还是西文字符，单个字符否是无法拆分的，它们是文字的最新单元，如果是美化半个词或半个句子，这估计大家都知道如何做，也很常见。但半个字符如何美化呢？当然有办法，

我曾经向大家分享了一个非常巧妙的用纯CSS画三角形的技巧。在过去的一年里，我发现这种用CSS画三角形的技术非常的有用和高效，尤其是创建提示框/提示符等类似的网页效果上。另外一种也可以用CSS简单的实现的形状是圆形。使用border-radius,你可以画出各种漂亮的圆形图案。

之前我写过一篇用JavaScript和CSS3制作出光芒四射的肖像的文章，这篇文章受到了大家火热的追捧，因为只使用了很少的js代码和简单的CSS语句就创造出来神奇的效果。本文里我是想改进一下之前的技术，我想让它变的更容易，我想去掉js代码，只用CSS3来实现整个效果。

CSS渐变色(Gradients)也是一个类似的技术。现在火狐，谷歌浏览器，Safari，IE8+都支持这种技术，我们可以安全的在网站上使用它。下面我们来看看CSS渐变色(Gradients)技术基本的语法，浏览器支持情况和缺陷。

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

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

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

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

随着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加载器来动态加载我们需要的资源，等等。

翻滚的海面，摇摇欲坠的灯塔，密布的乌云，暴风雨中的海燕。在加上CSS三维视差效果，虽是童话的世界，但亦真亦幻，令人神往。本作品是使用轻量级的js视差效果引擎parallax.js实现。在智能移动设备上效果更佳。

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

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

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

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

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

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

自从大概两年前用CSS给SIGT设计了logo后，我心里一直有个想法，我认为使用Verdana字体和CSS里的绝对定位技术能画出更复杂的图案，也就是说，直接用HTML代码生成嵌入式的矢量图。