IE7、IE8、IE9、IE10后各版本的更新内容和各版本的差别

在程序员的眼里,万恶的IE6的结束对他们而言是一种解脱,IE7首次开始完整支持W3C标准,从此之后IE的标准化之路就开始越走越顺,以下总结了IE7以后各版本的更新内容,和各版本的差别,作为Web开发人员解决浏览器兼容性问题的参考。

IE7更新

微软官方更新说明http://www.microsoft.com/china/msdn/library/webservices/WebApp/IE7_RevGd.mspx?mfr=true

IE8更新

  • 解决了所有浮动bug(可能是所有CSS Bug都解决了),完全支持CSS2.1规则和选择器(这个是亮点,至少在CSS上完全符合W3C标准了) 具体见http://msdn.microsoft.com/library/cc304082.aspx
  • 去掉了CSS 表达式 使用 -ms-厂商前缀表示IE专有属性,这一点向webkit和firefox学习了,值得表杨
  • 修正了一系列DOM错误,更符合标准,但并没有新增支持 如getElementById的时候ID区分大小写,不会错把Name当ID,详细列表见 http://msdn.microsoft.com/library/dd433047.aspx
  • 支持link标签的charset属性 AJAX支持增强
  • 支持HTML5中的本地存储(挺先进的
  • 本地JSON对象支持(这个也挺先进)
  • 增加UA兼容模式
  • 增加了almost Stardards渲染模式
  • 然而IE8仍然没有实现DOM L2,DOM L3和DOM L2 和 L3 事件处理(包括冒泡模型)的完整支持

微软官方更新说明
http://msdn.microsoft.com/library/cc288472%28VS.85%29.aspx#html

IE9更新

微软更新说明
http://msdn.microsoft.com/zh-cn/ie/ff468705

IE10更新

  • ECMAScript 5 Strict 模式支持 HTML5和CSS3增强 CSS3 3-D transforms(需要-ms-前缀,因为W3C还未定稿)
  • Websocket,webwork,file api等等
  • SVG改进和增强 SVG滤境
  • DOM增强 大多是带ms前缀的增强(也是就IE专有的)
  • 如触屏操作,手势事件,等等
  • 不再支持IE10的UA兼容设置(因为从IE9开始已经完全符合W3C标准),但仍支持IE9和之前的UA兼容设置

微软更新说明
http://msdn.microsoft.com/en-us/ie/gg192966

概括的说IE7只是对IE6的小小增强,IE8完全支持CSS2.1和选择器,DOM操作更符合W3C标准,但DOM支持仍不完整IE9 完全支持DOM L1,DOM L2,Jscript更符合标准,ECMAScript5支持,HTML5,CSS3支持,SVG支持。

用javascript替换URL中的参数

  //分析url
  function parseURL(url) {
      var a = document.createElement('a');
      a.href = url;
      return {
          source: url,
          protocol: a.protocol.replace(':', ''),
          host: a.hostname,
          port: a.port,
          query: a.search,
          params: (function () {
              var ret = {},
              seg = a.search.replace(/^\?/, '').split('&'),
              len = seg.length, i = 0, s;
              for (; i < len; i++) {
                  if (!seg[i]) { continue; }
                  s = seg[i].split('=');
                  ret[s[0]] = s[1];
              }
              return ret;

          })(),
          file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],
          hash: a.hash.replace('#', ''),
          path: a.pathname.replace(/^([^\/])/, '/$1'),
          relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],
          segments: a.pathname.replace(/^\//, '').split('/')
      };
  }

  //替换myUrl中的同名参数值
  function replaceUrlParams(myUrl, newParams) {
      /*
      for (var x in myUrl.params) {
          for (var y in newParams) {
              if (x.toLowerCase() == y.toLowerCase()) {
                  myUrl.params[x] = newParams[y];
              }
          }
      }
      */

      for (var x in newParams) {
          var hasInMyUrlParams = false;
    for (var y in myUrl.params) {
        if (x.toLowerCase() == y.toLowerCase()) {
            myUrl.params[y] = newParams[x];
            hasInMyUrlParams = true;
            break;
        }
    }
          //原来没有的参数则追加
    if (!hasInMyUrlParams) {
        myUrl.params[x] = newParams[x];
          }
}
      var _result = myUrl.protocol + "://" + myUrl.host + ":" + myUrl.port + myUrl.path + "?";

      for (var p in myUrl.params) {
          _result += (p + "=" + myUrl.params[p] + "&");
      }

      if (_result.substr(_result.length - 1) == "&") {
          _result = _result.substr(0, _result.length - 1);
      }

      if (myUrl.hash != "") {
          _result += "#" + myUrl.hash;
      }
      return _result;
  }

  //辅助输出
  function w(str) {
      document.write(str + "<br>");
  }

  var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');
  w("myUrl.file = " + myURL.file)     // = 'index.html'
  w("myUrl.hash = " + myURL.hash)     // = 'top'
  w("myUrl.host = " + myURL.host)     // = 'abc.com'
  w("myUrl.query = " + myURL.query)    // = '?id=255&m=hello'
  w("myUrl.params = " + myURL.params)   // = Object = { id: 255, m: hello }
  w("myUrl.path = " + myURL.path)     // = '/dir/index.html'
  w("myUrl.segments = " + myURL.segments) // = Array = ['dir', 'index.html']
  w("myUrl.port = " + myURL.port)     // = '8080'
  w("myUrl.protocol = " + myURL.protocol) // = 'http'
  w("myUrl.source = " + myURL.source)   // = 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'

  var _newUrl = replaceUrlParams(myURL, { id: 101, m: "World", page: 1,"page":2 });

  w("<br>新url为:")
  w(_newUrl); //http://abc.com:8080/dir/index.html?id=101&m=World&page=2#top   

via 用javascript替换URL中的参数值

Google奉上首个CSS动画涂鸦

Google今天的涂鸦十分特别,这个动画图片并非传统的GIF图像,而是使用CSS Sprites技术,利用一个初始图片和一张画满各个动作的拼接图片,从而实现了动画效果。

Google奉上首个CSS动画涂鸦初始图片

Google Doogle: Martha Graham

Google Doogle CSS Sprites

Google今日涂鸦是为了纪念现代舞先驱玛莎·葛兰姆(Martha Graham,1894年5月11日-1991年4月1日)117周年诞辰,他是美国舞蹈家和编舞家,也是现代舞蹈史的创始人之一。其作品多以美国人文或 是希腊古典神话为主题,代表作有《原始的神秘》(Primitive Mysteries,1936年)、《给世界的信》(Letter to the World,1940年)、《阿帕拉契山脈之春》 (Appalachian Spring,1944年)、《夜旅》(Night Journey,1947年)。

Google奉上首个CSS动画涂鸦

推荐19个有用的轻量级 JavaScript 库

流行的 JavaScript 库有jQuery,MooTools,Prototype,Dojo和YUI等,这些 JavaScript 库功能丰富,加上它们众多的插件,几乎能实现任何你需要的功能,然而需要实现一些特定的功能,则可以选择功能更专一的轻量库,本文与大家分享19个有用的专业 JavaScript 库。

Blackbird: Open Source JavaScript Logging Utility

Blackbird 是一款非常酷的 JavaScript 调试工具,带有一个漂亮的界面显示和过滤调试信息。

Javascript-199 in Useful JavaScript and jQuery Tools, Libraries, Plugins

Treesaver

Treesaver 是一个用于创建杂志布局的 JavaScript 框架。

Js-001 in Useful JavaScript and jQuery Tools, Libraries, Plugins

Bibliotype

Bibliotype 是一个简单的基于 HTML、CSS 和 JS ,用于快速原型制作的的框架。

Useful-tool-127 in Useful JavaScript and jQuery Tools, Libraries, Plugins

Highcharts – Interactive JavaScript charts

Highcharts 是一个纯 JavaScript 编写,用于生产交互式图表的 JavaScript 库。

Javascript-264 in Useful JavaScript and jQuery Tools, Libraries, Plugins

jStat: a JavaScript statistical library

Stat是一个采用JavaScript开发的统计工具包,可以让你执行高级统计操作,而不需要专门的统计语言。

Js-007 in Useful JavaScript and jQuery Tools, Libraries, Plugins

highlight

Highlight.js 是一个用于高亮显示程序代码的 JavaScript 库,简单易用。

Javascript-268 in Useful JavaScript and jQuery Tools, Libraries, Plugins

Respond.js: Fast CSS3 Media Queries for Internet Explorer 6-8 and More

这个快速、轻量的库用于让IE6-8支持 CSS3 Media Queries,是一种让网页支持小屏幕设备显示的特性。

Javascript-154 in Useful JavaScript and jQuery Tools, Libraries, Plugins

Underscore

Underscore 是一个实用的JavaScript工具库,提供了类似 Prototype 功能的编程支持,但没有对 JavaScript 内置的对象进行扩展。

Javascript-279 in Useful JavaScript and jQuery Tools, Libraries, Plugins

Popcorn

Popcorn.js 是一个HTML5 Video框架,它提供了易于使用的API来同步交互式内容。

Javascript-315 in Useful JavaScript and jQuery Tools, Libraries, Plugins

SlickGrid!

SlickGrid 是一个用于构建简单的、快速、灵活的表格的库。

Js-004 in Useful JavaScript and jQuery Tools, Libraries, Plugins

JavaScript InfoVis Toolkit

The JavaScript InfoVis Toolkit 用于创建交互的可视化数据。

Javascript-237 in Useful JavaScript and jQuery Tools, Libraries, Plugins

Handlebars.js: Minimal Templating on Steroids

Handlebars 是一个 JavaScript 页面模板库,帮助你轻松的构建语义化模板。可参考ThinkVitamin的文章

Getting Started with Handlebars

Javascript-280 in Useful JavaScript and jQuery Tools, Libraries, Plugins

Backbone

Backbone.js 是一个 JavaScript MVC 应用框架,通过Models进行key-value绑定及自定义事件处理。

Javascript-313 in Useful JavaScript and jQuery Tools, Libraries, Plugins

OpenFaces

OpenFaces 是一个包含AJAX-powered JSF组件库,一个Ajax框架和一个客户端校验框架的开源框架,它源于QuipuKit并增加了一些新的组件和特性。

Js-009 in Useful JavaScript and jQuery Tools, Libraries, Plugins

D3

D3 可以让你绑定任何数据到文档对象模型(DOM),然后再应用数据驱动传递给文档。

Javascript-238 in Useful JavaScript and jQuery Tools, Libraries, Plugins

Visual Event JS Library

Javascript 是事件驱动的语言,这个可视化事件库用于帮助你追踪事件。

Js-005 in Useful JavaScript and jQuery Tools, Libraries, Plugins

Tempo: JSON rendering engine

Tempo 节奏是一个小的JSON渲染引擎,让你使用纯HTML就可以构建数据模板。

Js-002 in Useful JavaScript and jQuery Tools, Libraries, Plugins

Art Deco – Selectable Text

实现字母分离效果的库,保留了文本能被选择的特性。

Javascript-153 in Useful JavaScript and jQuery Tools, Libraries, Plugins

Using Less.js to Simplify Your CSS3

LESS 是一个扩展CSS,让其拥有动态语言特性的库。

Javascript-175 in Useful JavaScript and jQuery Tools, Libraries, Plugins

来源:推荐19个很有用的 JavaScript 库

不用HTML5/CSS3如何在网页上画机器猫

作者: oldj

前段时间有人用 CSS3 技术在网页上画了一个机器猫, 可以用来测试各大浏览器对 CSS3 的支持程度,不用说,HTML5 /CSS3 的时代已经逐渐来临了。HTML5/CSS3 带来了很多新的东西,比如激动人心的绘图标签 canvas 。不过,在拥抱 HTML5/CSS3 之前,也让我来复古一番,看一看在 HTML5/CSS3 之前的时代里,如果想在网页上画机器猫该怎么做。

先贴一下最终的效果图:

不用HTML5/CSS3如何在网页上画机器猫

上面这个机器猫完全是用 div 搭出来的(一共用了 2010 个 div,今年是 2010 年嘛),用到的技术为 JavaScript + HTML4 + CSS2 ,在目前几乎所有主流浏览中都能有一致的显示,可以点击这儿查看演示

我们知道,各大主要浏览器都支持一些可用于绘图的矢量标记语言,比如 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 的第一个版本。

DrJs 是 Draw 和 JavaScript 两个单词的组合,名字比较普通。事实上,DrJs 几乎没有实用价值,任何一个真正严肃的或有一定规模的解决方案都不会使用它,不过我仍然花了一些时间在上面,一方面是因为好玩,另一方面也是想看看自己能 不能真的写出这样一个东西出来。这个工作时断时续,直到2008年年中,才完成现在使用的这个版本。

DrJs 参考了 WZ_JSGraphics 的部分思想,但代码完全是自己全新实现的,某些方面比 WZ_JSGraphics 更易用一些。WZ_JSGraphics 在速度方面做了很多工作,貌似还专门针对 IE 做过一些特别的优化,因此速度上比 DrJs 要快,不过它的各种绘图方法是独立的,用户只能使用它提供的那几种绘图方法,没法自行添加新的绘图函数。DrJs 采用了另外一种设计方法,它的核心非常简单,就是根据一个或多个方程(组)以及给定的 x 的取值范围,计算出对应的 y 的值,做连续性及合并相邻矩形处理之后,再把它转化为 div 添加到页面上。

在 DrJs 内部,所有的绘图(无论是直线、折线、椭圆、饼图)的背后都是一个个的方程或方程组,即:y = f(x), x ∈ [a, b] 。用户可以通过添加自定义方程(组)的方法来扩展 DrJs 的功能,因此原则上,DrJs 可以在有限精度下实现任意复杂图形的绘制。当然,我内置的方程组并不多,只有常用的点、直线、折线、多边形、矩形、椭圆、扇形、字符串、图片、方框,其中 扇形的实现最为复杂。另外还预设了直方图、饼图、折线图三种统计图表。

三、Div 版机器猫

有 DrJs 作基础,用 div 在网页上堆图像就简单多了,比如说用它来画一个机器猫。应该说,机器猫是一个非常适合用程序来画的形象,因为它主要由圆(包括椭圆、圆弧)、简单的多边形以及直线组成。具体的绘制过程就不详述了,在演示页面右键查看源代码就能看到,简单来说就是使用 DrJs 在指定的地方做画圆画线等操作,最后组成一个机器猫的形象。

第一次画完之时一共用了 2007 个 div,这时我想,既然今年是 2010 年,就再多凑出 3 个 div 来吧,于是改了一些参数,现在大家看到的机器猫刚好使用了 2010 个 div。

可以看到,这个机器猫的形象很简单,有点象素画的风格,而且没有阴影,除了鼻子外也没有高光,看起来没有立体感。虽然我可以继续添加细节,为它 加上阴影、高光,让它看起来更加生动,但即使是现在这么一个简单的形象,也使用了 2010 个 div 才堆出来,要继续细化下去需要更多的 div(当然,如果仅仅只是想画出这样一幅机器猫的图像,而不考虑制作一个较为通用的 DOM 画图工具,一定是可以用更少的 div 实现的),所以,就到这儿为止吧。

使用 DOM 方法当然也是能实现网页绘画的,但这是一种典型的滥用,DOM 并非为画图而设计的,使用它来画图虽然技术上可行,但成本太高。不过,强大的 HTML5/CSS3 已经到来了,对于前端开发来说,在网页上绘画也有了更多更优雅更高效的方法。对 DOM 绘画的复古回忆就进行到这儿了,接下来让我们一起探索 HTML5/CSS3 的时代吧!

最后,再贴一下演示地址:http://oldj.net/static/drjs/doraemon.html