无名小站首页改版 -渐进增强与css3

無名小站首頁改版無名小站首頁改版--漸進增強與漸進增強與CSS3CSS3

Adam Wang

Frontend engineer, Yahoo!

2011.07.09

大家好，我是Adam

也有人叫我「阿當」

twitter:@adamp3

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

http://jsfiddle.net/adamp3/NF6TF/27/

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

我討厭IE，你呢?

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

這三年IE7, 8, 9Firefox 3, 4, 5Opera 9, 10, 11Chrome 0 - 14

http://www.okaygeek.com/blog/if-web-browsers-were-kids-on-a-playground.html

主題緣起於今年Yahoo!內部的

F2E summit

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

是什麼?

www.wretch.cc

是牆的另一頭未知的世界

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

靓妹很多

帥哥也很多

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

50%佔Yahoo!台灣總PV

#4Yahoo!全球流量排名

50億單月PV

1999無名小站

2001Internet Explorer 6

2008前一次改版

是時候改版了！

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

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

首頁的用途?

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

這是個好時機來玩一下

CSS3(css本來就是讓內容加分的)

CSS3哪裡好?

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

更安全更快速更容易維護

最近看到一篇射雕兄的博客

「日常工作与新技术」

http://lifesinger.wordpress.com/2011/06/12/daily-work-and-new-tech/

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

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

“

無名也一樣

現在還有76%的用戶

使用IE6-8

(Yahoo!全球有36%)

:(

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

我們真的需要讓每個瀏覽器都看起來一模一樣嗎?

http://dowebsitesneedtolookexactlyt

hesameineverybrowser.com

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

你知道的…在大公司…

你必須說服他們

•項目經理•交互設計師•視覺設計師•測試工程師•你的老闆

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

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

一份設計圖

很多種瀏覽器

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

transform: rotate(30deg);

transition: all 0.3s ease;

(如果你是設計師，可以參考http://matthewlein.com/ceaser/ )

前端工程師做出原型(prototype)

主動而且不斷更新地給設計師參考

(Life w/o Photoshop: http://www.quora.com/Joel-Lewenstein/Life-Without-Photoshop )

像是這樣的鬼東西…

http://jsfiddle.net/adamp3/UEnjS/

嘿，阿當。我還是希望這些效果可以出現在IE6

• border-radius

• rotate

• gradients

• transition

本日主題:

漸進增強Progressive

Enhancement

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

“

錯誤示範

沒有box-shadow、text-shadow 、border-radius和transition

其實也無所謂

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

用Modernizr做到優雅地漸進增強

(http://www.modernizr.com/ )

Feature SupportModernizr告訴你瀏覽器支援的程度，而非瀏覽器的版本。

(試試看 http://caniuse.com)

html.cssgradients .belt {...}

html.no-cssgradients .belt {...}

if (Modernizr.gradients) {…}

如何運作?偵測HTML5功能偵測樣式是否被套用

有興趣的話請參考http://blog.ericsk.org/archives/1444

漸進增強 和 備選機制progressive enhancement

& fallbacks

痛苦的備選機制:

filter透明度和旋轉實踐

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

透明度工具組*filter:alpha

opacity

rgba

IE8支援:after，但不支援filter在偽類別上

IE9支援rgba，問題解決

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

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

Google Chrome處理中文漸變和文字陰影有奇妙的結果

http://jsfiddle.net/adamp3/gVVdv/

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

@font-face的實用性?

4~5MB的檔案尺寸

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

有趣的消息

第六屆『方正獎』中文字體設計大賽

(活動網站: http://www.foundertype.com/ztds/ )

差不多要結束了希望大家可以帶點東西回家

http://amazingdata.com/rando

m-funny-shit/

先進的瀏覽器*就像高清電視機一開始有了高清電視機，才有高清的電視節目

(而且瀏覽器還不用花錢)

* modern browser

我們要提供更好的技術和內容

來鼓勵用戶

使用先進的瀏覽器

http://bbs.bj100.com/pic/view_242401_3?PHPSESSI

D=vn518eqg1pqn74qjs5r2b67js3

建造電扶梯，不是電梯

http://www.elevatorworld.com

IE6 must die.

Special thanks to…

mentor:

Nate Koechley

http://www.flickr.com/photos/fr

anksvalli/5166427652

F2E Summit organizer:

Nicholas Zakas

免費的好東西…

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/

聯絡我

about.me/adamp3

阿里旺旺:adamp3

twitter: @adamp3

QQ:2477492661

謝謝大家！