This document summarizes upcoming browser updates and technologies: 1) Major browsers like IE, Firefox, Chrome, and Safari will be releasing new versions in the coming months, bringing improvements like faster release cycles for Chrome and HTML5/CSS3 support for Safari extensions. 2) It discusses technologies for measuring webpage performance across browsers and standards like W3C Web Timing and potential Node.js solutions for dynamic CSS. 3) Preview technologies are mentioned like the Less.js dynamic stylesheet language, CSS3 PIE polyfills, and the Syn synthetic event library for improving JavaScript testing.

1. 夜宴:技术前哨站
2010.8.9
钨龙

2. Qzone 即将推用户更新IE6

3. • IE 9
– 在9月份进行公开测试
• Firefox 4.0 beta 2
– 已经开始公测,9月1日发布
• Chrome
– 加快发布周期
• Safari
– Safari浏览器扩展由第三方开发者使用HTML5、CSS3、JavaScript等开
放网页标准写成.

5. HTML 5 嵌套规则
http://www.w3.org/TR/2010/WD-html5-20100304/dom.html#kinds-of-content
http://www.w3.org/TR/2010/WD-html5-20100304/text-level-
semantics.html#text-level-semantics

6. 获取页面性能数据?

7. • Httpwatch?
• Firebug net panel?
• Fiddler?
• ySlow?
• Pageseed?
• …….

8. Web Timing
http://dev.w3.org/2006/webapi/WebTiming/
http://blogs.msdn.com/b/ie/archive/2010/06/28/measuring-web-page-performance.aspx

11. • W3c
– window.performance
• IE 9 preview
– window.msPerformance
• Chrome 6 +
– window.webkitPerformance
• Firefox,safari
–?

12. YUI 3.2.0 preview release

13. • Touch event support
• Browser capability loading
• Transition support for the animation
module
• update to the CSS grids
http://www.yuiblog.com/blog/2010/07/26/3-2-0pr1/

14. A Little PIE with that CSS3?
http://css3pie.com/

15. CSS behavior
Html Components （HTC）
http://en.wikipedia.org/wiki/HTML_Components

16. Do LESS with Less.js
http://lesscss.org/index.html

17. @brand-color: #3879BD;
.rounded(@radius: 3px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded(5px);
a{
color: @brand-color;
&:hover {
color: #000;
}
}
}

18. LESS.js
+
node.js
=
way fast server-side dynamic css ?

19. Synthetic Event Library Syn
Aims to Make Testing Easier

20. Problems :
• Manual
• Unit Tests Only
• Low fidelity
• Difficult to write
• Expensive

21. Ex:
Syn.click( {},'hello' )
.type( 'Hello World' )
.delay() //waits 600ms seconds by default
.drag( $('#trash') ,
function() {
ok( $('#hello').length == 0,
"removed hello" )
}
);

22. 3Q~