Embed Size (px)
Citation preview
無名小站首頁改版無名小站首頁改版--漸進增強與漸進增強與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/
我討厭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
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
謝謝大家！
