1. 無名小站首頁改版
- 漸進增強與CSS3
漸進增強與CSS3
2011.07.09
Adam Wang
Frontend engineer, Yahoo!

2. 大家好，我是Adam
也有人叫我「阿當」
twitter:@adamp3

3. 我喜歡設計，也喜歡用CSS畫畫
http://jsfiddle.net/adamp3/8c98P/24/
http://jsfiddle.net/adamp3/NF6TF/27/

4. 我從寶島台灣來
Check out this. http://jsfiddle.net/adamp3/nNW6J/

5. 我討厭IE，你呢?

6. Yahoo!前端工程師三年
去年開始參與無名小站專案

7. 這三年
IE7, 8, 9
Firefox 3, 4, 5
Opera 9, 10, 11
Chrome 0 - 14
http://www.okaygeek.com/blog/if-web-browsers-were-kids-on-a-playground.html

8. 主題緣起於
今年Yahoo!內部的
F2E summit

9. 淘寶的小馬覺得這題目很有趣
所以我就來了

10. 是什麼?
www.wretch.cc

11. 是牆的另一頭
未知的世界

12. UGC (User Generated Content)為主
相本 博客 視頻 揪團 嘀咕

13. 靓妹很多

14. 帥哥也很多

15. 讓你從無名小卒變成明星!

16. 50%佔Yahoo!台灣總PV
#4Yahoo!全球流量排名
50億單月PV

17. 1999
無名小站

18. 2001
Internet Explorer 6

19. 2008
前一次改版

20. 是時候改版了！

21. 不過礙於很多因素
我們只能先改衝擊最小的首頁

22. 提升變色龍廣告質感
也可以賣更好的價錢

23. 首頁的用途?

24. 把好的博客推廣出去
把重要的資訊突顯出來

25. 這是個好時機來玩一下
CSS3
(css本來就是讓內容加分的)

26. CSS3哪裡好?

27. 對於畫面呈現來說，
HTML5和CSS3都是瀏覽器原生支
援可以減少Flash的使用量

28. 更安全
更快速
更容易維護

29. 最近看到一篇射雕兄的博客
「日常工作与新技术」
http://lifesinger.wordpress.com/2011/06/12/daily-work-and-new-tech/

30. “
Q: 为什么感觉前端发展缓慢?

31. “
前端最近一两年，涌现的新技术中，
HTML5 和 CSS3 等，是非常有利于
UED 前端的价值体现。可恨的是淘宝
的大部分线上应用还受限于 IE6-8，缺
少真实用武之地，这导致去研究去用的
人非常有限，这可能就是感觉前端发展
慢的原因之一。

32. 無名也一樣
現在還有 76%的用戶
使用IE6-8
(Yahoo!全球有36%)

33. :(

34. 我們需要踏出一小步
才有機會改變

35. 我們真的需要讓每個瀏覽器都看起
來一模一樣嗎?
http://dowebsitesneedtolookexactlyt
hesameineverybrowser.com

37. 好！那我們就來做吧！
(熱血)

38. 你知道的…在大公司…

39. 你必須說服他們
•項目經理
•交互設計師
•視覺設計師
•測試工程師
•你的老闆

40. 「用戶值得更好的體驗！」

41. 設計師和前端工程師的鴻溝

42. 一份設計圖
很多種瀏覽器

44. CSS3裡有很多新的樣式
設計師要怎麼表達?

45. transform: rotate(30deg);
transition: all 0.3s ease;
(如果你是設計師，可以參考http://matthewlein.com/ceaser/ )

46. 前端工程師做出原型(prototype)
主動而且不斷更新地給設計師參考
(Life w/o Photoshop: http://www.quora.com/Joel-Lewenstein/Life-Without-Photoshop )

47. 像是這樣的鬼東西…
http://jsfiddle.net/adamp3/UEnjS/

48. 嘿，阿當。
我還是希望這些效果可以出現在IE6
• border-radius
• rotate
• gradients
• transition

49. 本日主題:
漸進增強
Progressive
Enhancement

50. “
電扶梯永遠不會壞
Escalator never breaks.

51. 錯誤示範

52. 沒有box-shadow、text-shadow 、
border-radius和transition
其實也無所謂

53. 設計師：
「那漸層呢? 總該要有了吧?」

55. 用 Modernizr
做到優雅地漸進增強
(http://www.modernizr.com/ )

57. Feature Support
Modernizr告訴你瀏覽器支援的程
度，而非瀏覽器的版本。
(試試看 http://caniuse.com )

58. html.cssgradients .belt {...}
html.no-cssgradients .belt {...}
if (Modernizr.gradients) {…}

59. 如何運作?
偵測HTML5功能
偵測樣式是否被套用
有興趣的話請參考
http://blog.ericsk.org/archives/1444

60. 漸進增強 和 備選機制
progressive enhancement
& fallbacks

61. 痛苦的備選機制:
filter透明度和旋轉實踐

62. 利用:after做出具有透明度的陰影效果

63. 透明度工具組
*filter:alpha
opacity
rgba

64. IE8支援:after，
但不支援filter在偽類別上
IE9支援rgba，問題解決

65. filter還會有奇妙的z-index問題，請
小心使用

66. 來談談CSS3與網頁中文字型吧

67. Google Chrome處理中文漸變和文字
陰影有奇妙的結果
http://jsfiddle.net/adamp3/gVVdv/

68. 最後我們只好把陰影拿掉
(這做法實在不夠牛)

69. @font-face的實用性?
4~5MB的檔案尺寸

70. 設計師: 黑體和Sans-serif
用戶:細明體和Serif

71. 有趣的消息
第六屆『方正獎』
中文字體設計大賽
(活動網站: http://www.foundertype.com/ztds/ )

72. 差不多要結束了
希望大家可以帶點東西回家
http://amazingdata.com/rando
m-funny-shit/

73. 先進的瀏覽器*就像高清電視機
一開始有了高清電視機，才有高清的
電視節目
(而且瀏覽器還不用花錢)
* modern browser

74. 我們要提供
更好的技術和內容
來 用戶鼓勵
使用先進的瀏覽器
http://bbs.bj100.com/pic/view_242401_3?PHPSESSI
D=vn518eqg1pqn74qjs5r2b67js3

75. 建造電扶梯，
不是電梯
http://www.elevatorworld.com

76. IE6 must die.

77. Special thanks to…
F2E Summit organizer: mentor:
Nicholas Zakas Nate Koechley
http://www.flickr.com/photos/fr
anksvalli/5166427652

78. 免費的好東西…
http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-
modernizr/
http://www.colorzilla.com/gradient-editor/
http://matthewlein.com/ceaser
http://caniuse.com/
http://css3please.com/
http://developer.yahoo.com/yui/theater/

79. 聯絡我
about.me/adamp3
阿里旺旺:adamp3
twitter: @adamp3
QQ:2477492661

80. 謝謝大家！