IE开发者中心给到了一份详细的针对前端开发者的文档，列出了IE10支持的HTML5和CSS3新特性。嗯，它终于跟上了：

CSS3

• css region
• css3多列
• Flexbox
• grid
• 定位浮动(positioned float)
• 3D变换(3D transfrom)
• 动画(animation)
• 渐变(gradient)
• text-shadow
• 去掉样式表限制——在IE9之前的版本中，每个页面最多只能加载31个样式表文件，@import也只能最多嵌套4层，IE10中去掉了这些限制。

HTML5

其它

嗯，新东西很多，看起来还是很给力的。

需要注意的是，IE10对CSS3新特性的支持，大部分还是需要-ms-前缀的。

不多介绍，直接去看看吧：Evolution Of Web

值得一提的是，这个项目的代码很不错，值得学习一下。

点击图片查看大图，或者直接查看github上的页面。

PS:UCWEB的支持情况，会让大家顿感苦逼吧。

一、界面改进

正如之前泄漏出来的概念图一样，Firefox最终大刀阔斧的改变了自己的界面：

这个界面确实变的简洁漂亮了，我个人也很喜欢它的某些细节，但是结构和Chrome/Opera的相似性，让我不得不担心，是不是将来主流的浏览器都要采用将tab放到上面并隐藏工具栏的布局了，所以，如果将来IE 9正式版出来的时候也是这样的布局，大家不要意外呀～～～

二、性能提升

Firefox 4改进了很多方面的性能，比如DOM和CSS渲染、JS引擎、以及部分硬件加速，据说可以更快的处理更复杂的DOM和CSS选择器。据Zimbra的性能测试，Firefox 4性能比之前版本提升了两倍。

三、HTML 5

Firefox 4加入了一些HTML 5特性的支持，包括HTML 5表单和一些标签，比如article、section、nav、aside、hgroup、header、footer等，但是根据这个页面显示的状态，Firefox 4对HTML 5表单的支持还很鸡肋。

四、HTML 5 parser

Firefox 4是“第一个完全支持”HTML 5 Parser的浏览器，这使得Firefox 4可以在HTML代码中嵌入SVG和MathML。

五、HTML 5视频

Firefox 4开始支持WebM视频格式

六、CSS

• 这个beta版本的Firefox几乎完全支持CSS transition
• 可以使用-moz-resize定义textarea元素是否可伸缩
• 支持CSS3 calc属性
• 原生支持CSS 3的背景大小属性，-moz-background-size属性直接改名为background-size，私有属性将不再支持
• 支持-moz-image-rect属性来显示背景图片的一部分

七、其它

当然还有一些其它方面的增强，包括JS和DOM Event的增强，感兴趣的同学可以查看http://hacks.mozilla.org/2010/07/firefox-4-beta-1-is-here-whats-in-it-for-web-developers/

另外，由于Firefox 4 更换了插件引擎，所以之前的插件基本都不能用了——不知道Mozilla的那些家伙是怎么想的，3.5还是3.6的时候就更新过一次引擎，导致之前的插件全部要重写，现在又这样做，这让插件开发者和我们这些使用者情何以堪啊，不过，这次貌似可以暂时曲线解决旧插件的问题的。

各大网站已经对Firefox 4 beta 1进行了一系列的测试，结果显示它与Chrome和Opera等还有一些差距，不过我在html5test.com上做了下测试，在Windows xp系统中，Firefox 4 beta 1拿到了189分的高分，这的确是一个很不错的成绩。

从上面列出的新特性以及IE 9 pre版的一些新特性可以看出，浏览器厂商都开始在HTML 5方面发力，但是到目前为止没有一个浏览器完美的支持HTML5，但是我们可以考虑在自己的项目中适度的使用HTML5的特性了。标准的实现需要时间，但是理想化的标准是不存在的，我唯一期望的是各个浏览器对HTML 5和CSS 3的标准支持不要有太大的差距。

另外，Firefox 4 beta 1开始引入硬件加速了，mac版的safari也有一些硬件加速功能，IE 9的硬件加速让其性能大增——这或许会是另一个趋势吧，毕竟浏览器能做越来越多的事情了，而速度和性能也是赢取用户的最重要的因素。

无论如何，虽然我个人对Firefox期待更多，但是这次确实是一个不小的改进，让我们期待Firefox 4的正式版发布吧。

正如我们在《Opera 新版本预览》中说的一样，Opera这次版本更新不仅仅在界面和用户体验上有很大的提升，整体性能可以说是一个很大的飞跃，在对WEB标准的支持和浏览器性能方便都有很大进步，在很多方面已经超越Chrome 最新版本(5.0 dev)了。

立刻体验：国际版 英文版

其实我们天天在想到底哪一天IE6才会真正死去，但是从2001年发布以来，IE6一直统治着国内的浏览器市场，直到现在还占据着国内50%以上的浏览器市场份额。

但是我想，无论你是普通用户还是网站开发人员或者是国内的浏览器开发者，我们都应该采取一些措施，共同促进IE6的灭亡。

如果你是IE6的忠实用户，请尽快升级你的IE6

给你一个升级IE6的理由？好吧：

1. 你和你的公司正在受到安全威胁。这个没有更好的理由来反驳了吧？就连国际知名的大公司如Google、yahoo等都因为使用IE6而受到严重攻击，还有哪家公司的IE6不会受到攻击呢？
2. 世界上各国政府都在建议大家升级浏览器。在IE6的0day漏洞被曝光之后，德国、法国和澳大利亚等国政府纷纷号召国民放弃使用IE6；
3. 就连微软自己都建议你放弃IE6。微软安全研究与预防博客发文称，IE6受0day漏洞影响最为严重，IE8基本不受该漏洞影响。事实上，微软也不止一次号召用户升级浏览器。
4. 这不是IE6的最后一个严重安全漏洞。IE6从发布到现在不知道出现过多少严重的安全漏洞，而这次远不是终结，它还有至少144个漏洞！
5. 微软在2014年之后将不再对IE6提供支持。2014年很久远吗？或者你相信2012年就是世界末日？
6. IE6对web标准的支持缺乏。IE6的技术还是10年前的，互联网技术经过10年的发展已经能够发生了巨大的改变，网站前端技术在不断进步，更先进的CSS、HTML和Javascript等技术已经能给用户带来更好的体验——而IE6用户将无法体验这些先进的内容。比如，前端观察用到的一些CSS3特性将无法在IE6甚至是IE8中体验到。
7. 国内的一部分企业开始要求员工升级浏览器。比如腾讯公司，已经要求所有员工将IE6升级到IE7。
8. IE6太过时了，国外网友大部分都不再使用IE6了。统计显示，目前国外用户已经逐渐淘汰IE6了。IE8和Firefox是主流(via 人民网)。
9. 国外各大网站开始明确表示将不再支持IE6。比如 Google 将停止支持IE 6 用户必须至少升至IE 7。

(部分参考自：http://mashable.com/2010/01/18/5-more-reasons-why-ie6-must-die/)

如果这几个理由都不够，那么请看国外统计的坚持使用IE6的原因，当然这里有些调侃的意味，如果你正好是其中一种情况，请不要生气 :) ：

via

当然在国内，坚持使用IE6的用户可能还是因为另外两个原因：

1. 习惯了IE6的操作方式，不喜欢IE7和其它浏览器的tab式浏览。当然一个人的习惯是最重要的。tab的浏览器方式是谁发明的已经不可考了，不过Opera和Firefox纷纷使用，后来国内的maxthon浏览器也采用了那种方式，然后到06年IE7的时候，也采用了tab的方式。这说明tab是一种很好的浏览方式，高效、方便，不然广大网民早就开始反对这种方式了，而各大浏览器也不会坚持下去了。所以建议你尝试一下新技术，从你的习惯中走出来。
2. IE6比较快，IE7和IE8太慢了。IE7和IE8的确太慢了，不过新版的Firefox 3.6和Chrome一直是很快的哦。

前端开发人员可以争取放弃兼容IE6

如果你是一名光荣的前端开发人员，希望你能尽可能的做更多的事情来让IE6更快的死去：

1. 以身作则，自己放弃IE6。从前端观察和其它技术网站的访问统计上看，IE6的用户比例竟然还有30%以上，这让我很震惊。作为一名前端开发者，用IE6做自己的主浏览器，那么你做的网站应该也不会在IE7/8以及其它更先进的浏览器中做测试的吧？
2. 说服你的BOSS或客户，放弃兼容IE6。有必要为了让网站在IE6中和其它浏览器中表现一直而花掉2倍甚至是3倍的时间和精力吗？我认为对不同的浏览器，可以采取适当的区分——让网站在现代浏览器如Firefox 3.5+、Chrome/Safari和Opera中实现最佳的表现，而在IE中实现相对比较差的界面——当然在不影响布局和功能的情况下。
3. 号召你的朋友弃用IE6。号召你身边的朋友使用IE7/8或者Firefox、Chrome等浏览器。另外，很多人都有个人博客，可以在自己的博客上号召IE6用户升级他们的浏览器。你也可以参与到众多的促进IE6升级的在线项目中来，比如 webrebuild.org的IE６升级活动以及效果很不错的IE6 Update中。

浏览器厂商应该负更多的责任

想起的一句话：此地钱多人傻，速来！这当然只是笑话。

不过据说现在中国网民数量已经高达3.6亿！而且这个数字还在不断增长。这显然是一个巨大的市场。

所以最近各大公司纷纷涉足浏览器市场，各自都推出自有品牌的浏览器，在Maxthon、世界之窗、腾讯TT、绿色浏览器等混战多年的情况下又出现搜狐浏览器、新浪浏览器和360浏览器。但是它们无一不是以IE为内核的(maxthon和搜狐浏览器有IE和webkit双内核的版本)，没有自己的内核。所以各位网民，不要以为你用了所谓“安全”浏览器你的电脑就安全了，它的内核IE本身都是不安全的，这些外壳浏览器谈何安全——不过有些浏览器会添加一些可以避免你误操作的功能。

对国内的浏览器市场来说，我认为这种“战国纷争”的局面是很不错的，至少能够普及一点儿“浏览器”知识，提高网民对互联网和互联网安全的认识。

但是我认为国内的浏览器厂商应该负起更多的责任。

你们的浏览器产品确实有很多特色，也有很多很有用或者很酷的功能，比较重视中国人的使用习惯。但是当用户因为IE的漏洞而被攻击的时候，你们会承担责任吗？还是将责任推到微软那里？这似乎有些不公平哦～～

对IE来说，最安全的、功能最强、稳定性最好的应该就是IE8了，如果你们能够推动用户去升级他们的内核到最新版，肯定能降低你们要为安全承担的风险。另外，减少一个内核支持也会减少你们的开发和维护支出吧。

总结

让IE6退出历史舞台，不是一朝一夕的事情，用户的惰性让他不愿意主动去升级，微软的浏览器升级模式又那么古老（而Firefox的提示升级和Chrome的后台自动升级模式倒省去了不少麻烦）。所以我们只有靠自己的力量来推动IE6的灭亡了。

先看界面：

正如你看到的，Opere 10.5也将带来一些界面上的改变，不过这不是本次升级的核心，这个版本的Opera，将带来以下新的功能和特性：

• Carakan，是的，这就是传说中的Opera的新一代JavasSript引擎，比上一个版本的JS引擎快了7倍！
• Presto 2.5。Presto是Opera的内核，就像webkit之与Chrome和Safari一样。是的，Opera 10.10甚至10.20beta版本发布之前，我都在期待Presto 2.3，但是，很遗憾，两个版本的内核依旧是Presto 2.2。然后就听到了关于Presto可能已经被cancel的消息。而Opera 10.5中将跳跃到Presto 2.5。
• Vega。这是Opera的新的图形库，是其图形渲染引擎，具体它是如何工作的我们不管，但是从官方得到的数据显示，Vega让Opera的图形性能提高了3倍以上……
• HTML5支持更多，比如离线存储
• 开始支持CSS3转换和变换，以及CSS3的border、background，已经box-shadow——正如我们在《CSS阴影详解》一文中提到的，Opera是目前除了IE之外唯一不支持box-shadow属性的浏览器。
• 更完美的支持Windows 7
• 支持“隐私标签”和“隐私窗口”，看起来和Chrome的有点儿像了
• 地址栏和搜索框增强。

是不是有些迫不及待了？Opera官方声明，这只是Pre-alpha版本，还很不稳定，你可以下载下来玩玩儿先，或者，焦急的等待正式版吧:)

查看Opera Labs的介绍。

Adobe BrowserLab自6月份发布以来，终于进行了一次较大的升级，新的BrowserLab添加了更多的浏览器和一些新的很实用的功能，具体更新如下：

• 增加浏览器支持：现在可以在更多的浏览器中预览页面了，新增了IE8和safari 4两个浏览器。
• 标尺和标线：这两个工具和Photoshop/Fireworks等绘图软件里面的一样，可以精确定位任何一个截图的任何位置。标尺的X和Y坐标可以向你显示精确的像素定位，加上标线，你可以很精确的看到页面在不同浏览器中的差别。
• 移动和平移：呃，其实就是拖拽的功能，可以通过拖拽来查看截图的任何位置，很方便。
• 洋葱皮对照：其实这个功能内测的时候也有，就是可以将两个浏览器的截图叠起来，通过重合度来分析浏览器的表现，这对于精确的布局问题很有用。
• 截屏延迟：最多暂停10秒中再渲染一个截屏，这样可以预览需要时间来生成的内容。

示例：

好了，现在就去体验一下吧。

译序：本文提到了一种很不错的实现跨浏览器圆角的解决方案，但是说的不够全面，前端观察最近将整理更多更全面的资源给大家，敬请期待。

前一段时间，我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元素的问题。你或许知道CSS3的border-radius 属性被Safari、Firefox和Chrome等浏览器原生支持，但是由于某些原因IE并不支持它。

那么要想在IE中实现圆角，你不得不使用一些技巧，比如使用带有背景图片的CSS类(看一下这篇文章)。

而我知道的在各个浏览器中实现圆角的较简单快速的方案是结合CSS3和JavaScript。CurvyCorners是一个为HTML元素创建漂亮的圆角的免费JavaScript库。效果如下：

该脚本的最大优势是可以在Safari/Chrome/Firefox中使用原生的CSS3属性(通过-webkit-border-radius和-moz-border-radius私有属性分别支持)而在IE和Opera中使用JavaScript。

你所需要做的就是在页面中引入curvycorners.js:

<script type="text/javascript" src="curvycorners.js"></script>

然后定义以下样式：

.roundedCorners{
width: 220px;
padding: 10px;
background-color: #DDEEF6;
border:1px solid #DDEEF6;
 
/* Do rounding (native in Safari, Firefox and Chrome) */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
 
}

然后在上面的样式后面定义以下代码：

<script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
var setting = {
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 },
antiAlias: true
}
curvyCorners(setting, ".roundedCorners");
}</script>

tl, tr, bl, br分别是:左上角(top-left)、右上角(top-right)、左下角(bottom-left)、右下角(bottom-right)。

如果你有不同的CSS类(例如roundedCorners、roundedCorners_1、roundedCorners_2等)你可以像这样在前面的代码中定义:

...
curvyCorners(setting, ".roundedCorners");
curvyCorners(setting, ".roundedCorners_1");
curvyCorners(setting, ".roundedCorners_2");
...

HTML代码如下：

<div class="roundedCorners"> </div>

这就是在各个浏览器中的效果:

我认为这的确是在各个浏览器中比较简单和快速的实现CSS3圆角的一种方案。但是，如果js脚本被浏览器禁用了怎么办？最靠谱的方案还是使用额外的使用背景图片的CSS类来实现，或者使用额外的空白标签(Google统计中使用的方法，没有遇到的可以Google一下)。你有更好更简单的方案吗？欢迎留言给我们，多谢！

感兴趣的童鞋可以下载源码。

根据CSS的盒模型概念，页面中的每个元素，都是一个矩形的盒子。这些盒子的大小、位置和行为都可以用CSS来控制。对于行为，我的意思是当盒子内外的内容改变的时候，它如何处理。比如，如果你没有设置一个盒子的高度，该盒子的高度将会根据它容纳内容的需要而增长。但是当你给一个盒子指定了一个高度或宽度而里面的内容超出的时候会发生什么？这就是该添加CSS的overflow属性的时候了，它允许你设定该种情况下如何处理。

overflow属性有四个值：visible (默认), hidden, scroll, 和auto。同样有两个overflow的姐妹属性overflow-y 和overflow-x，它们很少被采用。

让我们分别看一下这几个值，并讨论一写共同用法和技巧。

Visible

如果你不设置overflow属性，则默认的overflow属性值就是visible。所以一般而言，并没有什么理由特别的设定overflow的属性为visible除非你想覆盖它在其它地方被设定的值。

这里需要记住的重要的事情是，尽管盒子外面的内容是可见的，内容并不会影响页面的工作流。比如：

一般来说，你至少不用为里面的内容为文字的盒子设置固定的高度，这样就不会遇到这种情况了。

Hidden

默认值visible的相反的值就是hidden。它会将所有超出盒子的所有内容都给隐藏掉。

这对应付使用动态的内容，而且可能会由于内容溢出而引起一些布局上的问题的确很有用。尽管如此，请记住用此方法隐藏的内容将彻底的看不到(除非去查看源代码)。 比如有的用户设置他们的浏览器的默认字体比你预期的要大些，你会将一些文字推到盒子的外面然后完全的隐藏之……

Scroll

设置一个盒子的overflow值为scroll将会隐藏掉渲染到盒子之外的内容，但是它将会提供一个滚动条在盒子内部滚动，从而可以查看剩下的内容。

值得注意的是，使用scroll将会同时产生水平和垂直两个滚动条，就算内容只需要其中一个。

Auto

overflow的auto值很像scroll，它唯一解决的是在你不需要的时候也会出现滚动条的问题。

清除浮动

设置overflow的一个更流行的用处是，说也奇怪，清除浮动。设置overflow并不会在该元素上清除浮动，它将清除自己(self-clear)。意思就是，应用了overflow(auto或hidden)的元素，将会扩展到它需要的大小以包围它里面的浮动的子元素(而不是叠了起来(collapsing))，假设未定义高度。就像这样：

对于此问题，经过测试，IE6会自动扩展父层元素的高度，而IE8和FF等浏览器加上overflow:auto后，即可清除浮动。——神飞

这里有更多关于浮动的细节文章关于浮动的一切。

跨浏览器的烦恼

就像CSS中的很多东东，overflow有很多的跨浏览器的蹊跷的事情。比如这些：

滚动条在盒子里面还是外面?

Firefox将其放到盒子外面，而IE则将其放到里面。我认为只有IE是对的(它应该在里面的)。

看清楚这个明显的不同。

IE 8 扩展盒子的bug

IE8有很多有趣的新bug，包括一些非常严重的隐藏在网页中的。这里有更多的关于IE8的overflow的bug的介绍。

破坏浮动布局

IE 6, 7 和 8都会扭曲默认的overflow visible值并将水平的扩展一个盒子一匹配内容(比如图片)。 这对使用浮动列布局的结构非常痛苦，而且单个扩展的列就能够将其它列挤下去并使布局乱掉！

事实上，这个我在验证的时候发现，只有IE6才会出现这种情况，而IE7、IE8和其它浏览器表现一致。如果大家在使用IE7或IE8时有遇到这种情况，请告诉我，多谢！——神飞

滚动条能用CSS控制吗？

IE过去在较老的版本中允许这样，但是之后就收敛了。比如许多表单元素，滚动条就不允许使用CSS控制。我在它是否是件好事情上没有任何具体的意见，但是我可以说，在网站的所有内容上使用滚动条是很丑陋的和俗气的。如果你需要一个美化的滚动条，你或许需要寻找JavaScript来模拟。

IE 技巧

无论是否需要，IE都会一直显示一个垂直的滚动条，这对预防水平跳动是有些作用的，但并非总是可取的。要想在IE中移除它，可以在body元素中设置overflow为auto。PS:此种情况也较少发现，不过在body的样式中添加overflow:auto的方法，建议考虑采用——神飞

演示

本文的演示页面，可以查看这个页面。