Google今日涂鸦是为了纪念现代舞先驱玛莎·葛兰姆（Martha Graham，1894年5月11日－1991年4月1日）117周年诞辰，他是美国舞蹈家和编舞家，也是现代舞蹈史的创始人之一。其作品多以美国人文或 是希腊古典神话为主题，代表作有《原始的神秘》（Primitive Mysteries，1936年）、《给世界的信》（Letter to the World，1940年）、《阿帕拉契山脈之春》 （Appalachian Spring，1944年）、《夜旅》（Night Journey，1947年）。
我们知道，各大主要浏览器都支持一些可用于绘图的矢量标记语言，比如 IE Only 的 VML 以及被 Firefox 等支持的 SVG，可惜的是这些矢量标记语言一直没有一个跨浏览器的统一的标准，因而一直没有得到广泛的应用，所以长期以来，Flash 技术一直是这个领域唯一的老大。不过，除此之外，也有一些程序员做了一些虽然可能没有很大实用价值但很有趣的探索，比如，如果直接用 JavaScript + DOM + CSS 在网页上画图会怎么样？
一、DOM 画图技术
2005年有一段时间，我对如何使只用 JavaScript 以及各大浏览器都支持的原生的标准技术（如 HTML / CSS）在网页上画图的问题产生了兴趣，当时我找到了一个叫 WZ_JSGraphics （今天发现这个页面已经打不开了，或许作者已经停止了维护？）的 JS 脚本，它实现了我上面提到的想法，通过 JavaScript 在网页上生成很多绝对定位的 div 来实现了网页绘画。
虽然计算机图形学已经非常成熟，但使用 div 在网页上画图（下面称之为“DOM 画图”）与传统的计算机图形学还是有所不同，传统的计算机图形学中可以利用的最小单位是一个 1px 的点，但 DOM 画图上可以利用的最小单位是一个 div ，或者说是一个矩形，这样一来，对于 DOM 画图技术来说，画一个小点的成本和画一个很大的矩形的成本几乎是一样的（横线或竖线也可以看成矩形）。这就为 DOM 画图提出了一个优化要求：如何使用尽可能少的矩形来拼成所需图形？如下图所示。
上图显示了 DOM 画图中一段弧线的三种优化程度。最左边的那种用了最多的 div ，同时该约简的地方没有约简，具体表现为图像看起来会有锯齿或者拖泥带水；中间那种解决了约简的问题，但用的 div 还是太多了，该合并的地方没有合并；右边那种在前两者的基础上，把同一行、同一列相邻的 div 合并了起来，用了最少的 div 完成了图像的绘制。我们认为，对于 DOM 绘画来说，右边这种方案最佳。
同样地，对于填充图形（实心图形）来说，也要遵循这样的规则，尽可能少用 div 。比如下图所示的椭圆。
可以看到，上面的椭圆由许多色条组成，每一个色条即是一个 div ，这种化圆为方的灵感是从微积分中借鉴来的。
二、DrJs
2007年，有一段时间我需要在一个页面上动态地显示很多统计图表，比如柱状图、折线图、饼图等。最好的解决方案是 Flash，不过这个需求也让我再次思考如何使用 DOM 在网页上画图的问题，于是有了 DrJs 的第一个版本。
可以看到，这个机器猫的形象很简单，有点象素画的风格，而且没有阴影，除了鼻子外也没有高光，看起来没有立体感。虽然我可以继续添加细节，为它 加上阴影、高光，让它看起来更加生动，但即使是现在这么一个简单的形象，也使用了 2010 个 div 才堆出来，要继续细化下去需要更多的 div（当然，如果仅仅只是想画出这样一幅机器猫的图像，而不考虑制作一个较为通用的 DOM 画图工具，一定是可以用更少的 div 实现的），所以，就到这儿为止吧。
使用 DOM 方法当然也是能实现网页绘画的，但这是一种典型的滥用，DOM 并非为画图而设计的，使用它来画图虽然技术上可行，但成本太高。不过，强大的 HTML5/CSS3 已经到来了，对于前端开发来说，在网页上绘画也有了更多更优雅更高效的方法。对 DOM 绘画的复古回忆就进行到这儿了，接下来让我们一起探索 HTML5/CSS3 的时代吧！
#nav {
/* The nav element width and height will double in size */
-webkit-transform: scale(2);
-moz-transform: scale(2);
}
#nav {
/* The nav element width will double in size, but the height will remain unchanged*/
-webkit-transform: scale(2, 1);
-moz-transform: scale(2, 1);
}
#nav {
/* The nav element width will double in size and flip horizontally,
but the height will remain unchanged */
-webkit-transform: scale(-2, 1);
-moz-transform: scale(-2, 1);
}
浏览器支持
scale属性目前只有Firefox, Safari/Chrome以及 opera 10.50支持，到目前为止没有一个IE版本支持。缩放一个对象是相当有意义的设计选择。它可以通过渐进增强来使用:hover，这可以在你的导航上添加一个小小的趣味。
没错，Matrix就是矩阵，矩阵是高等数学中非常基础的一个东东，而在CSS 3中确实一个相当高级的功能，CSS 3引入matrix函数，可以非常灵活的实现上述的各种效果。它有6个参数(a,b,c,d,e,f)，它事实上是一个3*3矩阵，经过该矩阵将旧的参数 转换成新值：
| a b e |
| c d f |
| 0 0 1 |
这个梦幻的CSS动画代码和在线演示可以在webkit网站看到。该演示可以在任何网站看到，但是动画效果却只能在Mac os(雪豹)的WebKit的nightly build版本可见。它看起来就像上面的视频中的一样，如果你是在用mac os (雪豹版本)，我认为安装一个webkit以亲眼看看这个效果是很值得的(它真的很酷)。Windows系统用户暂时无法欣赏这个效果。
移动时代，是任何 Web 设计与开发者都不能忽视的一个时代，总有一天，你设计的东西将被显示在两种屏幕上，桌面大屏幕和移动小屏幕，如何让同一个网站同时适应完全不同的两种尺寸 的屏幕，这是一个很久以来都没有完美解决方案的问题，直到有了 CSS3。
CSS3 的 Media Queries
在 CSS2 时代，如果你曾经为你的网站设计过打印版 CSS，就会明白 CSS3 Media Queries 的作用，不过，CSS3 的 Media Queries 比 CSS2 的 Media Type 更实用，事实上，CSS2 的 Media Type 并不曾被多少设备所支持过。CSS3 的 Media Queries 可以帮你获取以下数据：
浏览器窗口的宽和高
设备的宽和高
设备的手持方向，横向还是竖向
分辨率
如果用户有一个支持 Media Queries 的设备，我们就可以为该设备编写专门的 CSS，让网站适应这个设备的小屏幕，英国的 Web 技术大会 dConstruct 便基于该技术推出他们的 2010 年大会网站，手机也可以轻松访问，以下是该网站的桌面版和手机版截图：
上面的例子为了说明问题起见都很简单，现实中的站点不可能这样，下面的例子，作者将使用他自己的公司网站，说明如何使用 Media Queries 对现有网站进行移动化整改。
桌面布局
作者自己的网站是几年前设计的，那是还没有考虑 Media Queries 问题，这是一个三栏式布局。
edgeofmyseat在桌面浏览器中预览
增加新的式样表
为了适应移动设备，将使用 Media Queries 加载独立的式样表：
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />
初始图片
