Enviar búsqueda
Cargar
无名小站首页改版 -渐进增强与css3
•
9 recomendaciones
•
987 vistas
taobao.com
Seguir
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 80
Descargar ahora
Descargar para leer sin conexión
Recomendados
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
Adam Wang
Banquet 39
Banquet 39
Koubei UED
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
greengnn
twMVC#29 -Learning Machine Learning with Movie Recommendation
twMVC#29 -Learning Machine Learning with Movie Recommendation
Mia Chang
2013 05 同業分享會 米蘭數位 奶綠茶 createJS
2013 05 同業分享會 米蘭數位 奶綠茶 createJS
綠茶 奶
老成之CreateJS與Flash
老成之CreateJS與Flash
智遠 成
Epoca Parlamentaria
Epoca Parlamentaria
jorge vargas
La cuestion social y el centenario
La cuestion social y el centenario
Juan José Flores Muñoz
Recomendados
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
Adam Wang
Banquet 39
Banquet 39
Koubei UED
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
greengnn
twMVC#29 -Learning Machine Learning with Movie Recommendation
twMVC#29 -Learning Machine Learning with Movie Recommendation
Mia Chang
2013 05 同業分享會 米蘭數位 奶綠茶 createJS
2013 05 同業分享會 米蘭數位 奶綠茶 createJS
綠茶 奶
老成之CreateJS與Flash
老成之CreateJS與Flash
智遠 成
Epoca Parlamentaria
Epoca Parlamentaria
jorge vargas
La cuestion social y el centenario
La cuestion social y el centenario
Juan José Flores Muñoz
Pag 17 ke ocurrio
Pag 17 ke ocurrio
Pancho Henriquez
Imagenes parlamentarismo
Imagenes parlamentarismo
Pancho Henriquez
Clase 11 economía del salitre y la cuestión social
Clase 11 economía del salitre y la cuestión social
Roberto Dumenes
Chile la sociedad finisecular
Chile la sociedad finisecular
Pancho Henriquez
República parlamentaria
República parlamentaria
elgranlato09
Transformaciones Sociales Siglo XX
Transformaciones Sociales Siglo XX
Yanina Vargas
La CuestióN Social Y Las Grandes Huelgas
La CuestióN Social Y Las Grandes Huelgas
Paula Labrin
Cronologia sociedad de chile siglo xx (1900-1950)
Cronologia sociedad de chile siglo xx (1900-1950)
ayudanteonline
COMO INVESTIGAR
COMO INVESTIGAR
ANA HENRIQUEZ ORREGO
Cambios sociales, políticos, culturales y democráticos
Cambios sociales, políticos, culturales y democráticos
Francisco Javier Leiva Valenzuela
Resumen republica parlamentaria
Resumen republica parlamentaria
casuco
El parlamentarismo a la chilena
El parlamentarismo a la chilena
sandrita2
Chile Siglo Xx
Chile Siglo Xx
gueste947807
El Parlamentarismo
El Parlamentarismo
Paula Labrin
La República Parlamentaria_1891_1925
La República Parlamentaria_1891_1925
César Maldonado Díaz
Cambios y movimientos sociales en el Siglo XIX
Cambios y movimientos sociales en el Siglo XIX
Oscar González García - Profesor
Tutorial de Slideshare
Tutorial de Slideshare
Karina Crespo- Ministerio de Educacion
Siglo XIX, acontecimientos que marcaron la historia
Siglo XIX, acontecimientos que marcaron la historia
Jesús Antonio Treviño Franco
Wizkids v 0.2
Wizkids v 0.2
Senslytics Corporation
Convite De Formatura Diego Rodrigues Santos
Convite De Formatura Diego Rodrigues Santos
Diego Santos
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013
Adam Wang
Más contenido relacionado
Destacado
Pag 17 ke ocurrio
Pag 17 ke ocurrio
Pancho Henriquez
Imagenes parlamentarismo
Imagenes parlamentarismo
Pancho Henriquez
Clase 11 economía del salitre y la cuestión social
Clase 11 economía del salitre y la cuestión social
Roberto Dumenes
Chile la sociedad finisecular
Chile la sociedad finisecular
Pancho Henriquez
República parlamentaria
República parlamentaria
elgranlato09
Transformaciones Sociales Siglo XX
Transformaciones Sociales Siglo XX
Yanina Vargas
La CuestióN Social Y Las Grandes Huelgas
La CuestióN Social Y Las Grandes Huelgas
Paula Labrin
Cronologia sociedad de chile siglo xx (1900-1950)
Cronologia sociedad de chile siglo xx (1900-1950)
ayudanteonline
COMO INVESTIGAR
COMO INVESTIGAR
ANA HENRIQUEZ ORREGO
Cambios sociales, políticos, culturales y democráticos
Cambios sociales, políticos, culturales y democráticos
Francisco Javier Leiva Valenzuela
Resumen republica parlamentaria
Resumen republica parlamentaria
casuco
El parlamentarismo a la chilena
El parlamentarismo a la chilena
sandrita2
Chile Siglo Xx
Chile Siglo Xx
gueste947807
El Parlamentarismo
El Parlamentarismo
Paula Labrin
La República Parlamentaria_1891_1925
La República Parlamentaria_1891_1925
César Maldonado Díaz
Cambios y movimientos sociales en el Siglo XIX
Cambios y movimientos sociales en el Siglo XIX
Oscar González García - Profesor
Tutorial de Slideshare
Tutorial de Slideshare
Karina Crespo- Ministerio de Educacion
Siglo XIX, acontecimientos que marcaron la historia
Siglo XIX, acontecimientos que marcaron la historia
Jesús Antonio Treviño Franco
Wizkids v 0.2
Wizkids v 0.2
Senslytics Corporation
Convite De Formatura Diego Rodrigues Santos
Convite De Formatura Diego Rodrigues Santos
Diego Santos
Destacado
(20)
Pag 17 ke ocurrio
Pag 17 ke ocurrio
Imagenes parlamentarismo
Imagenes parlamentarismo
Clase 11 economía del salitre y la cuestión social
Clase 11 economía del salitre y la cuestión social
Chile la sociedad finisecular
Chile la sociedad finisecular
República parlamentaria
República parlamentaria
Transformaciones Sociales Siglo XX
Transformaciones Sociales Siglo XX
La CuestióN Social Y Las Grandes Huelgas
La CuestióN Social Y Las Grandes Huelgas
Cronologia sociedad de chile siglo xx (1900-1950)
Cronologia sociedad de chile siglo xx (1900-1950)
COMO INVESTIGAR
COMO INVESTIGAR
Cambios sociales, políticos, culturales y democráticos
Cambios sociales, políticos, culturales y democráticos
Resumen republica parlamentaria
Resumen republica parlamentaria
El parlamentarismo a la chilena
El parlamentarismo a la chilena
Chile Siglo Xx
Chile Siglo Xx
El Parlamentarismo
El Parlamentarismo
La República Parlamentaria_1891_1925
La República Parlamentaria_1891_1925
Cambios y movimientos sociales en el Siglo XIX
Cambios y movimientos sociales en el Siglo XIX
Tutorial de Slideshare
Tutorial de Slideshare
Siglo XIX, acontecimientos que marcaron la historia
Siglo XIX, acontecimientos que marcaron la historia
Wizkids v 0.2
Wizkids v 0.2
Convite De Formatura Diego Rodrigues Santos
Convite De Formatura Diego Rodrigues Santos
Similar a 无名小站首页改版 -渐进增强与css3
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013
Adam Wang
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
Joseph Chiang
Responsive Web UI Design
Responsive Web UI Design
jay li
Responsive Web Design [rebuild as design]
Responsive Web Design [rebuild as design]
Benny Chak
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
洧杰 廖
Koubei banquet 34
Koubei banquet 34
Koubei UED
淘宝网前端应用与发展
淘宝网前端应用与发展
taobao.com
DrupalCamp Taipei 2012 迷人的有「型」網站
DrupalCamp Taipei 2012 迷人的有「型」網站
Hipfox
前端样式开发演变之路
前端样式开发演变之路
Zhao Lei
Css schema by_sofish
Css schema by_sofish
Webrebuild
支付宝CSS构架
支付宝CSS构架
Sofish Lin
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
淘宝移动端Web开发实践
淘宝移动端Web开发实践
完颜 小卓
Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)
百範 陳
Html5和css3入门
Html5和css3入门
Xiujun Ma
960 grid system simple howto
960 grid system simple howto
Hina Chen
前端开发的那些事儿
前端开发的那些事儿
jndream
從雛形到設計-了解您的使用者在想什麼
從雛形到設計-了解您的使用者在想什麼
Souyi Yang
高性能网站最佳实践
高性能网站最佳实践
longhao
Similar a 无名小站首页改版 -渐进增强与css3
(20)
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
Responsive Web UI Design
Responsive Web UI Design
Responsive Web Design [rebuild as design]
Responsive Web Design [rebuild as design]
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
Koubei banquet 34
Koubei banquet 34
淘宝网前端应用与发展
淘宝网前端应用与发展
DrupalCamp Taipei 2012 迷人的有「型」網站
DrupalCamp Taipei 2012 迷人的有「型」網站
前端样式开发演变之路
前端样式开发演变之路
Css schema by_sofish
Css schema by_sofish
支付宝CSS构架
支付宝CSS构架
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
淘宝移动端Web开发实践
淘宝移动端Web开发实践
Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)
Html5和css3入门
Html5和css3入门
960 grid system simple howto
960 grid system simple howto
前端开发的那些事儿
前端开发的那些事儿
從雛形到設計-了解您的使用者在想什麼
從雛形到設計-了解您的使用者在想什麼
高性能网站最佳实践
高性能网站最佳实践
Más de taobao.com
编辑器设计U editor
编辑器设计U editor
taobao.com
Berserk js
Berserk js
taobao.com
淘宝开放产品前端实践
淘宝开放产品前端实践
taobao.com
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
taobao.com
第三方内容开发最佳实践
第三方内容开发最佳实践
taobao.com
编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
百度前端性能监控与优化实践
百度前端性能监控与优化实践
taobao.com
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
Kind editor设计思路
Kind editor设计思路
taobao.com
Java script physical engine
Java script physical engine
taobao.com
Html5环保小游戏
Html5环保小游戏
taobao.com
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
taobao.com
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索
taobao.com
张平:JavaScript引擎实现
张平:JavaScript引擎实现
taobao.com
高力:19楼现有前端架构
高力:19楼现有前端架构
taobao.com
李成银:前端编译平台
李成银:前端编译平台
taobao.com
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
taobao.com
张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考
taobao.com
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践
taobao.com
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
taobao.com
Más de taobao.com
(20)
编辑器设计U editor
编辑器设计U editor
Berserk js
Berserk js
淘宝开放产品前端实践
淘宝开放产品前端实践
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
第三方内容开发最佳实践
第三方内容开发最佳实践
编辑器设计Kissy editor
编辑器设计Kissy editor
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
Kind editor设计思路
Kind editor设计思路
Java script physical engine
Java script physical engine
Html5环保小游戏
Html5环保小游戏
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索
张平:JavaScript引擎实现
张平:JavaScript引擎实现
高力:19楼现有前端架构
高力:19楼现有前端架构
李成银:前端编译平台
李成银:前端编译平台
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
无名小站首页改版 -渐进增强与css3
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
36.
37.
好!那我們就來做吧! (熱血)
38.
你知道的…在大公司…
39.
你必須說服他們 •項目經理 •交互設計師 •視覺設計師 •測試工程師 •你的老闆
40.
「用戶值得更好的體驗!」
41.
設計師和前端工程師的鴻溝
42.
一份設計圖
很多種瀏覽器
43.
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.
設計師: 「那漸層呢? 總該要有了吧?」
54.
55.
用
Modernizr 做到優雅地漸進增強 (http://www.modernizr.com/ )
56.
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.
謝謝大家!
Descargar ahora